Skill v1.0.0
currentAutomated scan100/100version: "1.0.0" name: build-recipes description: Build the landing from the approved DESIGN.md and design plan on the fixed stack (Next.js + Tailwind + GSAP + Lenis, optional R3F). Use when craft/elevate invoke it after the design-plan gate, or standalone to rebuild a section. Never use before a design plan is approved.
Build recipes — fixed-stack construction
Stack is FIXED: Next.js (App Router) + Tailwind + GSAP + Lenis. R3F only if the approved design plan names a 3D signature. gsap-skills (installed separately) owns API correctness — consult it for GSAP syntax. This skill owns WHICH pattern goes WHERE and the site-level wiring.
Order of construction
- Scaffold:
create-next-app(TS, Tailwind, App Router, src/). Install
gsap lenis. No other animation libs.
- Global wiring FIRST (${CLAUDE_PLUGIN_ROOT}/skills/build-recipes/references/lenis-setup.md):
Lenis on GSAP ticker, lagSmoothing(0), single RAF loop. html { scroll-behavior: auto !important }.
- Tokens: read them from DESIGN.md's YAML frontmatter (
colors,
typography, rounded, spacing, components) — that layer is normative, the prose sections are context. Motion tokens come from the ## Motion identity extension section (mirrored in .impeccable/design.json under extensions.motion). Frontmatter → Tailwind theme + CSS custom properties (--ease-out-brand, --dur-base...). gsap.defaults({ease, duration}). Keep the CSS custom-property names equal to the frontmatter token slugs so impeccable's detector and live panel resolve them. 3b. When an approved comp exists, the comp is king and the build runs in two phases. Phase one is REPRODUCTION, statics only: rebuild the first viewport at the comp's own width, screenshot it at the comp's dimensions, and set the two side by side. Materials, component character, elevation, scale relationships and type silhouette must match; the only allowed concessions are the closest obtainable font, the icon set, and genuine defects in the comp. The comparison is the authority, never your conviction that the recreation worked — models systematically believe HTML/CSS recreations succeeded when they did not. A region that keeps losing the comparison stops being recreated in code and becomes a produce asset composited into the page. Prove the hero this way BEFORE building past it: every later section inherits the hero's shortfall, and a five-minute retry here is what a rebuild verdict at verify costs. Where the comp does not cover a section, build it inside the fidelity inventory recorded in the design plan (§ Comps) — corner language, line weights, materials, type ramp — never from stock defaults. Only when reproduction holds does phase two (steps 4-7: motion, interaction, responsive) begin. No comp → skip this step and build from the wireframe.
- Sections in SCRIPT ORDER, one at a time. Per section pick the pattern from
${CLAUDE_PLUGIN_ROOT}/skills/build-recipes/references/page-anatomy.md + ${CLAUDE_PLUGIN_ROOT}/skills/build-recipes/references/scrolltrigger-patterns.md. Consult ${CLAUDE_PLUGIN_ROOT}/skills/build-recipes/references/anti-patterns.md BEFORE writing each ScrollTrigger.
- Asset placeholders: every media slot renders a placeholder at the EXACT
ratio from the design plan (aspect-[16/9] etc.) with the slot name visible — layout must never reflow when real assets land.
prefers-reduced-motionfrom the START, not retrofit: every ScrollTrigger
created inside gsap.matchMedia() with a reduce context (opacity-only, no pin, no scrub, no parallax). Content NEVER gated behind animation — no opacity: 0 initial states in CSS; set from JS.
- Signature moment LAST, with the most care. Budget: 1–2 pinned sequences per
page max, runway 1.5–3 viewport-heights per chapter. Signature techniques: scroll-video → ${CLAUDE_PLUGIN_ROOT}/skills/build-recipes/references/scroll-video.md; 3D → ${CLAUDE_PLUGIN_ROOT}/skills/build-recipes/references/r3f.md.
Hard rules (from verified doctrine)
- Scrub OR toggleActions per trigger, never both. Scrub 0.5–1.5 for
storytelling; scrub: true only for frame-accurate (sequences, progress).
- Pace = runway (
end), neverduration, on scrubbed timelines. - Never a ScrollTrigger on a tween nested in a timeline. Never animate the pin
target (pin wrapper, animate children). Pinned triggers in document order.
- Horizontal containers + parallax:
ease: "none"mandatory. - Function-based start/end +
invalidateOnRefresh: truefor anything
size-dependent. All triggers inside gsap.matchMedia() contexts.
- Continuous/scroll-linked animation:
transform+opacityONLY. - Mobile (≤768px) gets a DESIGNED simpler choreography, not degraded desktop.