craft-layer

Use when a web-app surface needs a visual asset — an icon system, SVG/vector, 3D model, illustration or imagery, a font, or background video — deciding build vs source vs commission, format, bundle cost, licence/provenance. Never names a vendor, never ships an asset.

Use before a craft build to fight generic, thin results on a landing page, SaaS, CRM, or app — work-type archetype, a divergent concept via the creative-director agent, a content-depth budget, palette bias. Feeds design-research, never replaces it.

Use when starting or restyling a UI/app build and reference designs must become buildable direction — mines live sites, pattern galleries, and brand assets for patterns and token direction feeding /ui-ux:theme and /ui-ux:build. Does not generate palettes or token scales itself.

Use when adding a pointer micro-interaction — a custom cursor, magnetic button, tilt, or drag — or when a review flags a pointer effect that hides the real cursor, ignores touch, or lacks a reduced-motion path.

Use when animating type — kinetic or variable-font headlines, weight/width axis animation, rotating phrase cross-fades, split-text reveals — or when a review flags type that moves without earning it or lacks a reduced-motion path.

Use when deciding HOW to animate a web-app surface — Framer Motion vs anime.js vs Three.js/R3F vs sprite-sheets — or when a motion review flags a missing perf budget, prefers-reduced-motion path, or reduced-bundle fallback.

Use when adding motion between routes or pages — a shared element persisting across a nav, a full-page crossfade, an SPA route change (View Transitions API) — or when a review flags a transition with no reduced-motion or unsupported-browser fallback.

Use when a surface needs real 2D physics — objects that fall, collide, or drag (matter.js), not a spring a library already covers — or when a review flags a physics sim with no body budget, reduced-motion path, or keyboard route.

Use when adding smooth scroll, scroll-linked reveals, scrub, pin, or parallax — Lenis + GSAP ScrollTrigger or the native CSS scroll-driven path — or when a review flags scroll drift/jitter, a missing smooth-scroll contract, or no reduced-motion path.

Use when a craft build should be decided section by section with the user instead of generated in one shot — staged treatments per spine slot, picks recorded in the section ledger the build and audit read.

Use when building or reviewing Three.js code — scenes, renderers, shaders, react-three-fiber, WebGPU/WebGL choice, TSL, asset loading, disposal/leak discipline, render-loop performance. Resolve the locked rXXX revision before advising.

Use when a craft run is EXPLICITLY boosted — "ultra-craft"/"ultracraft" in a prompt, or a bare `ultra` as FIRST token of /craft-layer:craft's own args; another command's token never fires it. Pins maximal ambition, live dated-source research, escalated reviewer tiers, and a red-team.

Use when adding a postprocessing pass or custom shader to a Three.js/R3F scene — bloom, DOF, a scroll/pointer fragment effect, a bespoke material — or when a review flags a WebGL effect with no GPU budget, capability fallback, or reduced-motion path. Sits on motion-tiers Tier 3.