Skip to main content
bricks-ctor includes built-in skills that are automatically installed into your project during bun install. These skills provide domain knowledge that helps AI coding agents understand and build BRICKS applications.
Skills are reusable instruction documents that provide context to AI agents. See the CTOR skills reference for details on how skills work.

​
bricks-ctor

The bricks-ctor skill is installed to <project>/.bricks/skills/bricks-ctor/ (with compatibility symlinks at .claude/skills/ and .codex/skills/). It provides architecture patterns and configuration references for the BRICKS runtime. Use when: You are building or configuring a BRICKS application and need domain-specific guidance.

​
Topics covered

Flow decomposition strategy and pattern selection priority. Teaches how to break down user flows into the simplest combination of generators, event action chains, system actions, and data calculations.
Animation system reference covering 3 animation types (timing, spring, decay), 9 animatable properties, 10+ easing functions, and composed animations (parallel/sequence).
Canvas enter/exit animations and shared element transitions. Covers 5 standby modes (top, bottom, left, right, custom) with frame options and timing best practices.
E2E testing framework with 3 automation types (launch, anytime, cron), simulation actions (brick press, key events, HTTP requests), and 6+ assertion types including visual regression with screenshots.
JavaScript sandbox reference with 25+ built-in libraries (lodash, moment, crypto, compression, and more). Covers trigger modes, async operations, multiple outputs, and anti-patterns to avoid.
LAN device synchronization for multi-display setups. Covers main/minor device roles, run modes, configuration at subspace and data levels, and use cases like video walls and interactive kiosks.
Cloud data sync with 3 remote update types, web update page generation for non-technical users, REST API access with authentication, and data routing with access control.
Asset management covering media box organization, generator media flow for file listing, 4 property kinds (image, video, audio, lottie), upload methods, and CDN delivery.
Remote AI inference offloading. Covers capability exchange, strategy options (prefer-local, prefer-buttress, prefer-best), server setup, and GPU configuration.

​
bricks-design

The bricks-design skill is installed to <project>/.bricks/skills/bricks-design/. It is the visual-design discipline for Applications and Subspaces — type, palette, asset acquisition, design language, system commitment, visual rhythm, and brand work. Use when: You are doing visual, aesthetic, system, style, or brand-asset work — even when the brief is named in product terms (slideshow, kiosk, signage, menu board, lobby screen, museum display) or starts from a Figma file, website, screenshot, PDF, or brand book.
For end-to-end briefs (“design a kiosk for X”, “build a presentation introducing Y”), bricks-design runs in parallel with bricks-ux: visual surface here, interaction shape there.

​
Topics covered

The 10 load-bearing laws of BRICKS design — Canvas-as-state, Data as the conduit for dynamic values, shared Brick ids that auto-tween, Switches compare while Data hit only matches, Generators are headless and async, frames are grid units, Standby Transition is part of the design language, Subspace as a typed module, DataCalculation is derivation only, and no scroll/overflow/reflow.
Pass-based delivery (not sprint-to-finished): verify deployment context, declare the design system as a comment block, lock down one Showcase Canvas first, build out the full Canvas graph with hero ids shared across Canvases, polish for spacing rhythm and multilingual fits, then verify and self-critique.
A curated library of visual languages (Swiss Editorial, Kenya Hara emptiness, Field.io motion poetics, Brutalist web, Y2K futurist-retro, and more) across 10 directions × 5 schools, each with grid-stance and spacing-scale-in-grid-units. Direction Advisor proposes three spanning candidates for vague briefs.
Visual-inspection-first protocol — never translate from a markdown extraction. Drives browser automation to capture every page or frame, then reads each screenshot back through image-reading capability before composing the BRICKS-native equivalent.
Five-step asset acquisition for logo, product photography, UI screenshots, scene photography, and motion — scored against a 5-10-2-8 quality bar across five named dimensions, with three fallback paths per category and structural enforcement that Bricks reference Media Flow Data via DataLink instead of embedding or redrawing.
Canvas-graph shape decision (linear slide chain vs. hub-and-spoke vs. orchestrated reveals), hero continuity via shared-Brick auto-tween, anti-narrated-PowerPoint rules, and a first-viewer rubric for sequenced work.
Throttle at the Generator boundary, bound Data history, reserve persistData: true for last-known-good and idempotency keys, render the boot Canvas in under 1 s from cached Data, offline-first wrap on networked Generators. Plus complexity tells — Subspace abuse, Switch fanout, DataCalc chains, animation overuse, Canvas inflation.
Three patterns ordered by token cost — Data-preset (default), shared module, separate Subspaces — with a staged-delivery workflow. Comparison surface is chat plus source tree, never an in-Canvas theme picker left in production.
Definition of done: every Canvas screenshotted via the preview MCP, every screenshot viewed back through image-reading, side-by-side delta against reference material, and console clean. Path 1 uses the Electron preview MCP; Path 2 escalates to on-device DevTools (CDP at :19851) for hardware-bound deployments — payment, identity capture, peripherals, Local Sync.
Every Canvas scored on system commitment, visual hierarchy, craft, functional fit, and originality. Anti-slop sweep covers snap canvas transitions, hardcoded dynamic strings, hover affordances on no-touch hardware, sketch-drawn brand stand-ins, and aggregator-sourced logos shipped as final.

​
bricks-ux

The bricks-ux skill is installed to <project>/.bricks/skills/bricks-ux/. It is the interaction-design discipline — user journey, archetypes, flow states, pressable composition, monitoring screens, accessibility — for any Application or Subspace built on Canvases, Bricks, Generators, and Data. Use when: You are doing usability, flow, journey, affordance, feedback, recovery, or accessibility work — “audit this flow”, “improve usability”, “design the wait state”, “fix the error path”, “design the monitor’s alarm state”, “design for multilingual”, “design idle and attractor states”.
bricks-ux invokes in parallel with bricks-design for end-to-end briefs. Web habits (hover affordances, scroll-to-reveal, modal-as-default, page-submit forms) do not transfer to no-touch or peripheral-bound hardware.

​
Topics covered

Seven steps every interaction follows — affordance, instruction, immediate feedback, in-flight visibility, continuation, recovery, closure. The scaffold replaces device-specific recipes: QR scan, face detection, BLE proximity, NFC tap, payment, voice mic, and touch all follow the same shape.
Six things a user does in front of a BRICKS screen — glance, browse, interact, transact, monitor, dwell. Each has its own Subspace structure (Canvas count, dominant Bricks, motion vocabulary), failure tells, and which UX dimensions weight strongest.
Seven first-class states — idle, attractor, loading, empty, error, boot, maintenance — each with universal principles, BRICKS-native expression notes, and the failure mode that consistently slips into agent work. Idle is a designed Canvas, not “whatever was last loaded.”
Deliberate decisions about where on_press sits in a composite button and which inner Bricks are pressable: 'bypass'. Affordance must be visually distinct — a pressable tile cannot look identical to a decorative one.
Calm/detect/demand discipline. Calm state must be readable and forgettable, change must be detectable without being demanding, demand must compel response without crying wolf. Stale data is worse than no data; alarm hierarchy holds under stress.
Deployment-relative floors for contrast, scale, color-not-only, motor reach, reduced-motion, predictable navigation, and audio cues. Calibrate to viewing distance, ambient light, user posture, and hardware capability rather than pinning pixel measurements.
Critique tiered by deployment risk — CRITICAL on transact / identity / safety-critical, HIGH on interact and alarm-bearing monitors, MEDIUM on browse / dwell, LOW on glance / loop. Must-Have and Anti-Pattern pairs per section; runs concurrently with bricks-design critique, and both block ship.