@caoscompanybr/merlin 3.5.0

package/.merlin-core/skills/general/mage-beauty/references/verb-cinematic.md

@@ -0,0 +1,128 @@
+# verb-cinematic — Apply cinematic stack holistically (Remotion-first)
+
+## Trigger
+
+User invokes `/beauty cinematic [target]` or asks to "make this cinematic," "give this a film feel," "color grade + camera + transitions," "Hollywood this." **Remotion-first** verb — added by mage-beauty as a native operation for FF's video pipeline.
+
+## Inputs
+
+- A Remotion target (scene or composition) that's currently flat or untreated
+- Optional: emotional direction ("noir", "golden-hour", "cyberpunk", "dream", or a free-form mood)
+
+## Process
+
+1. Read `references/remotion-bridge.md` (mandatory primary), `motion-design.md`, `color-and-contrast.md`.
+2. **Pick the emotional register first** — this drives all 3 cinematic-stack choices in concert:
+   - `noir` → desaturated, high contrast, urban tension
+   - `golden-hour` → warm nostalgia, slow pace
+   - `cyberpunk` → magenta + cyan, urgency
+   - `dream` → soft, low contrast, contemplative
+   - `dystopia` → desaturated, cold, isolation
+   - `carnival` → high saturation, joy, mixed warm
+   - `horror` → desaturated + green-tinted shadows
+   - `vintage` → warm fade, lifted blacks
+   - `ice` → cool clarity, blue + white
+   - `neon` → high saturation + dark bg + glow
+3. Apply the **3-component stack** (the verb's signature move):
+   - `cinematic/ColorGrade preset={emotion}` — wraps the entire scene
+   - `cinematic/CameraMotion preset={matching}` — picks from 14 presets that match the emotion
+   - `cinematic/TransitionEffect preset={matching}` — picks transition style that matches energy
+4. **Emotion → preset matchings** (canonical):
+
+| Emotion     | ColorGrade  | CameraMotion      | TransitionEffect      | Particles?                  |
+| ----------- | ----------- | ----------------- | --------------------- | --------------------------- |
+| noir        | noir        | dolly (slow)      | fade                  | none                        |
+| golden-hour | golden-hour | ken-burns         | cross-dissolve        | none (or embers if intense) |
+| cyberpunk   | cyberpunk   | dolly (urgent)    | glitch                | glitch-blocks (1 use)       |
+| dream       | dream       | drift             | cross-dissolve (long) | fireflies (subtle)          |
+| dystopia    | dystopia    | static or breathe | fade                  | none                        |
+| carnival    | carnival    | pan or tilt       | wipe or flip          | confetti (1 use)            |
+| horror      | horror      | breathe (anxious) | cross-dissolve        | none                        |
+| vintage     | vintage     | ken-burns         | fade                  | embers (subtle)             |
+| ice         | ice         | drift (cold)      | wipe                  | snow                        |
+| neon        | neon        | dolly             | glitch                | sparks                      |
+
+5. Tune secondary elements: typography weight to match (heavier for dystopia, lighter for dream), accent color shifted toward the grade's hue, motion stagger pace (slower for golden-hour, faster for cyberpunk).
+6. Verify: VideoLayerStack ≤ 4, ParticleSystem ≤ 1 per video, safe areas respected.
+
+## Output
+
+Remotion target with full cinematic stack applied + emotion log.
+
+```
+Cinematic applied — emotion: golden-hour
+- Wrapped scene in cinematic/ColorGrade preset="golden-hour"
+- Added cinematic/CameraMotion preset="ken-burns" (slow drift, nostalgia)
+- TransitionEffect out: cross-dissolve 24 frames (long, contemplative)
+- Title weight 600 (warmer feel than 700)
+- Title color: oklch(96% 0.02 80) (warm white)
+- Accent shifted: oklch(72% 0.22 50) (warm gold)
+- Stagger: 8 frames (slightly slower than default 6, reflective pace)
+- ParticleSystem: none (clean nostalgic feel; embers would be too much)
+```
+
+## Pre-checks
+
+- [ ] Single emotional register chosen (no mixing noir + cyberpunk)
+- [ ] All 3 stack components match the emotion
+- [ ] Typography tuned to emotion (weight, color)
+- [ ] Accent color shifted toward grade hue
+- [ ] Motion pace matches (slow for golden-hour, fast for cyberpunk)
+- [ ] VideoLayerStack ≤ 4 layers per segment
+- [ ] ParticleSystem ≤ 1 per video
+- [ ] Safe areas respected (top/bottom for vertical, etc.)
+- [ ] Captions still readable over the grade (test contrast post-grade)
+- [ ] Render time within budget
+
+## Examples
+
+**Remotion target cinematic pass — choosing "noir":**
+
+```
+File: scene/QuoteScene.tsx (philosophical quote, urban setting)
+
+Before:
+- Default rendering, no grade
+- Static camera
+- Hard cut transitions
+
+After:
+- Wrapped in cinematic/ColorGrade preset="noir"
+- cinematic/CameraMotion preset="dolly" (slow forward, weight)
+- TransitionEffect out: fade 18 frames (clean break)
+- Title: weight 700 + letter-spacing -0.04em (architectural)
+- Color: pure neutral palette (no accents — noir is monochromatic)
+- Background: oklch(8% 0.005 264) (near-black, cool tinted)
+- Text: oklch(94% 0.01 264) (near-white, cool tinted)
+- Stagger: 10 frames (deliberate, slow)
+- No particles
+
+Scene reads: tense, considered, weighty.
+```
+
+**Remotion target cinematic pass — choosing "carnival":**
+
+```
+File: scene/CTAScene.tsx (campaign launch, celebratory)
+
+Before:
+- Default rendering, generic look
+
+After:
+- Wrapped in cinematic/ColorGrade preset="carnival"
+- cinematic/CameraMotion preset="pan" (lateral movement, energy)
+- TransitionEffect out: wipe 12 frames (directional, decisive)
+- Title: weight 800 + letter-spacing animation +0.10em → 0 over 12 frames
+- Accent: oklch(70% 0.25 30) (warm orange, post-compression chroma bumped)
+- Stagger: 4 frames (compressed = energy)
+- cinematic/ParticleSystem preset="confetti" 30 frames (single use, peak moment)
+
+Scene reads: joyful, decisive, celebratory.
+```
+
+## Cross-references
+
+- Cites: `remotion-bridge.md` (mandatory primary), `motion-design.md`, `color-and-contrast.md`
+- For ColorGrade preset details: `remotion-bridge.md` Cinematic bucket section
+- Companion: `verb-overdrive` (when cinematic stack is the centerpiece of an extreme moment); `verb-rebrand` (when cinematic emotion is the new aesthetic direction)
+- Antagonist: `verb-quieter` (when cinematic stack overwhelmed the message)

package/.merlin-core/skills/general/mage-beauty/references/verb-clarify.md

@@ -0,0 +1,107 @@
+# verb-clarify — Improve unclear UX copy
+
+## Trigger
+
+User invokes `/beauty clarify [target]` or asks to "fix this copy," "the text is confusing," "rewrite the labels," "what does this mean?" Targets UX writing specifically — does not change visual design.
+
+## Inputs
+
+- A target with unclear, jargony, generic, or hostile copy
+- Optional: focus area ("clarify the errors", "clarify the empty state", "clarify the buttons")
+
+## Process
+
+1. Read `references/voice-and-microcopy.md` (primary). The voice doc framework drives everything.
+2. Identify the failures:
+   - **Generic CTAs** — "Get Started" / "Submit" / "OK" / "Click here"
+   - **Jargon** — "webhook," "API endpoint," "SAML SSO," "OAuth scope" — terms your users don't know
+   - **Validation jargon** — "Invalid format" / "Field required" / "ERR_VALIDATION_FAILED"
+   - **Empty states with no action** — "No data found" / "Nothing here yet"
+   - **Loading messages** — "Loading…" with no time expectation
+   - **Confirmation dialogs** — "Are you sure?" without context
+   - **Em-dash overuse** — every paragraph has at least one
+3. Rewrite each:
+   - **CTAs** describe outcome — "Send invite" / "Save changes" / "Start your free trial"
+   - **Jargon** becomes user language — "API endpoint failed" → "We couldn't update your other apps"
+   - **Errors** include the fix — "Invalid email" → "Use a format like name@example.com"
+   - **Empty states** show the next action — "Create your first project [+ New]"
+   - **Loading** sets expectations — "Generating your video — usually 30 seconds"
+   - **Confirmations** name the object + consequence — "Delete project Q3-launch?" / "47 files will be removed."
+   - **Em-dashes** replaced with comma / period / parens
+4. Verify against voice doc — every revision should sound like the same person wrote it.
+
+## Output
+
+Target with copy revised + before/after diffs.
+
+```
+Clarify applied:
+- "Get Started" → "Start your free 14-day trial"
+- "Submit" (form) → "Send invite"
+- "Email is invalid" → "Use a format like name@example.com"
+- "No data found" → "Create your first project to see it here [+ New]"
+- "Loading..." → "Generating preview — about 8 seconds"
+- "Are you sure?" → "Delete `Q3-launch`? 47 files will be removed. This can't be undone."
+- 4 em-dashes removed, replaced with periods (more natural read-aloud)
+- Verified against voice doc: direct, warm, technical (not cute, corporate, vague)
+```
+
+## Pre-checks
+
+- [ ] Voice doc consulted (or created if missing)
+- [ ] No "Get Started" / "Submit" / "OK" / "Click here" CTAs (anti-pattern #13)
+- [ ] No "Invalid input" / "Error: 500" — every error has a fix path (anti-pattern #15)
+- [ ] No em-dash >1 per ~150 words (anti-pattern #14)
+- [ ] No jargon users wouldn't know
+- [ ] Loading messages set expectations on >5 s waits
+- [ ] Confirmation dialogs name object + consequence
+- [ ] Empty states have a next action
+- [ ] Specific over generic ("2 hours ago" not "recently")
+- [ ] For Remotion: caption brevity ≤ 17 chars/sec
+- [ ] For Remotion: tone matches UI tone (one voice across modalities)
+
+## Examples
+
+**Web target clarify pass:**
+
+```
+File: app/billing/page.tsx
+
+Before:
+- H1 "Billing"
+- Empty state: "No invoices found"
+- CTA: "Get Started"
+- Error: "Payment processing failed"
+- Confirmation: "Are you sure?"
+
+After:
+- H1 "Billing"
+- Empty state: "No invoices yet — they'll appear here when your trial ends. [Manage plan]"
+- CTA: "Update payment method"
+- Error: "Your card was declined. Try a different card, or [contact support]."
+- Confirmation: "Cancel subscription? You'll keep access until [date]; no refund for the current period."
+
+Clarity score: every text now has a job and does it.
+```
+
+**Remotion target clarify pass:**
+
+```
+File: scene/CTAScene.tsx (caption + voiceover)
+
+Before:
+- Caption: "Sign up now at our website"
+- VO: "Visit lampada.com and discover everything our platform has to offer for your business analytics needs"
+
+After:
+- Caption: "Try Lampada free at lampada.com"
+- VO: "Try Lampada free at lampada.com." (matches caption, ~14 chars/sec)
+
+Caption + VO now match in tone + speed. UI tone preserved.
+```
+
+## Cross-references
+
+- Cites: `voice-and-microcopy.md` (primary), `anti-patterns.md` (rules 13–15)
+- For copywriting depth: Merlin's `copywriting` skill (general/)
+- Companion: `verb-onboard` (microcopy in first-run flows), `verb-harden` (error copy under hostile inputs)

package/.merlin-core/skills/general/mage-beauty/references/verb-colorize.md

@@ -0,0 +1,106 @@
+# verb-colorize — Strategic color introduction
+
+## Trigger
+
+User invokes `/beauty colorize [target]` or asks to "add color here," "the design feels gray," "introduce an accent," "warm this up." Used when a design is over-neutral and needs strategic color injection — not random color spray.
+
+## Inputs
+
+- A target that's monochrome, all-neutral, or color-anemic
+- Optional: a palette direction ("warm", "cool", "luxury gold", "trust blue")
+
+## Process
+
+1. Read `references/color-and-contrast.md` (primary). For Remotion: also `remotion-bridge.md` for ColorGrade preset selection.
+2. Decide the **role of color** before picking values:
+   - Identity (brand) — one primary tone the user remembers
+   - Hierarchy (accent) — used 10% of the time on the highest-priority elements
+   - Semantic (status) — error/success/warning/info
+   - Emotional — warm vs cool overall direction
+3. Apply the **60-30-10 rule** — 60% dominant, 30% secondary, 10% accent. Resist the urge to give every section its own color.
+4. Pick OKLCH values (not HSL or hex first):
+   - **Background**: tint the neutral toward a hue (`oklch(98% 0.005 264)` cool, `oklch(98% 0.005 80)` warm)
+   - **Primary**: chroma 0.15–0.20, lightness 50–60% for default state
+   - **Accent**: chroma higher (0.18–0.25), used sparingly on CTAs / highlights
+5. Verify WCAG AA on every text/bg pair using the new colors.
+6. Define dark mode pairs simultaneously (don't ship light-only).
+
+## Output
+
+Target with palette introduced + token definitions + WCAG verification log.
+
+```
+Colorize applied:
+- Bg: white → oklch(98% 0.005 80) (warm tinted)
+- Primary: --color-primary: oklch(55% 0.15 264) (trust blue)
+- Accent: --color-accent: oklch(70% 0.20 50) (warm gold, used on CTA only)
+- Body text: oklch(15% 0.025 264)
+- Muted text: oklch(46% 0.02 264)
+- Dark mode pairs defined
+- WCAG AA verified: 4.8:1 body, 3.4:1 muted, 5.2:1 accent on bg
+```
+
+## Pre-checks
+
+- [ ] OKLCH values used (with fallback if needed)
+- [ ] 60-30-10 weighting respected
+- [ ] No purple→blue gradient (anti-pattern #4)
+- [ ] No pure #000 or #FFF (anti-pattern #6)
+- [ ] No gray-on-color (anti-pattern #5)
+- [ ] WCAG AA verified for every text/bg pair
+- [ ] Dark mode palette defined alongside
+- [ ] Accent chroma reduced ~30% for dark mode
+- [ ] For Remotion: chroma bumped 15–20% for compression
+- [ ] For Remotion: ColorGrade preset selected as foundation
+
+## Examples
+
+**Web target colorize pass:**
+
+```
+File: components/Pricing.tsx
+
+Before:
+- bg-white, text-gray-900, all buttons bg-gray-900 — no color personality
+- "Recommended" plan indistinguishable from others
+
+After:
+- @theme:
+  --color-bg: oklch(98% 0.005 80);     /* warm tinted */
+  --color-surface: oklch(100% 0 0);
+  --color-text: oklch(15% 0.025 264);
+  --color-primary: oklch(55% 0.15 264);  /* trust blue, default actions */
+  --color-accent: oklch(70% 0.20 50);    /* warm gold, recommended plan badge */
+
+- Default plan buttons: bg-primary text-white
+- Recommended plan: ring-2 ring-accent + "Most popular" badge in accent
+- WCAG AA verified across all states
+
+Identity now: cool trust + warm celebratory accent.
+```
+
+**Remotion target colorize pass:**
+
+```
+File: scene/IntroScene.tsx
+
+Before:
+- No ColorGrade applied
+- Default neutral palette
+- Visual identity weak
+
+After:
+- Wrapped scene in cinematic/ColorGrade preset="golden-hour"
+- Title color: oklch(96% 0.02 80) (warm white, complements grade)
+- Accent: oklch(72% 0.22 50) (warm gold, post-compression bumped from 0.18)
+- Subtitle: oklch(85% 0.05 80) (warm muted)
+
+Scene reads: warm, nostalgic, intentional.
+```
+
+## Cross-references
+
+- Cites: `color-and-contrast.md` (primary), `remotion-bridge.md` (Remotion targets)
+- For 96-palette industry catalog: `design-palette` skill, `references/full-palettes.md`
+- For Tailwind v4 OKLCH setup: `tailwind-design-system` skill
+- Companion: `verb-rebrand` (when full aesthetic shift is wanted, not just color)

package/.merlin-core/skills/general/mage-beauty/references/verb-critique.md

@@ -0,0 +1,88 @@
+# verb-critique — UX/visual review, no fix
+
+## Trigger
+
+User invokes `/beauty critique [target]` or asks to "review this design," "what's wrong with this," "give me feedback on the look," "where does this fail." This verb is **read-only judgment** — it does not edit code or files. The output is a structured critique the user can act on.
+
+## Inputs
+
+- A target file or component (web `.tsx/.jsx/.css` or Remotion component)
+- Optional: a focus area ("focus on typography" or "focus on the hero")
+- Optional: a benchmark ("compare to Linear")
+
+## Process
+
+1. Detect target type (web vs Remotion path-based).
+2. Read the target file(s) fully.
+3. Read `references/anti-patterns.md` for the 15-rule checklist.
+4. Read the relevant thematic references: `typography.md`, `color-and-contrast.md`, `spatial-design.md`, `motion-design.md` minimum. For Remotion: also `remotion-bridge.md`.
+5. Score the target across 6 dimensions: **Sophistication / Differentiation / Experience / Enchantment / Usability / Beauty** (rubric from `frontend-design` skill).
+6. List specific issues with file/line refs (where possible) — what fails, why it fails, what to fix.
+7. End with a one-line verdict: pass / needs work / fundamental rethink.
+
+## Output
+
+A markdown critique block with structure:
+
+- **Verdict** (one sentence)
+- **What works** (1–3 bullets)
+- **What fails** (numbered list with file refs, anti-pattern citations, fix specificity)
+- **Score** (across the 6 dimensions, brief)
+- **Top 3 fixes by impact**
+
+No code changes. No file edits. The user runs other verbs (`polish`, `colorize`, etc.) to apply fixes.
+
+## Pre-checks
+
+- [ ] All 15 anti-patterns scanned
+- [ ] Citations point to specific files and lines, not generic descriptions
+- [ ] Every issue includes the exact fix (hex code, px value, font name, ms duration)
+- [ ] No vague language ("feels off", "could be better") — replace with specific failure mode
+
+## Examples
+
+**Web target — `app/dashboard/page.tsx`**
+
+```
+Verdict: Needs work — 3 anti-patterns, hierarchy unclear
+
+What works:
+- Spacing scale used consistently
+- Dark mode tokens defined
+
+What fails:
+1. Inter for both heading and body (anti-pattern #1) → pair with Outfit at 700 weight for H1/H2
+2. Card-in-card on lines 47–54 (anti-pattern #10) → drop inner border, use bg-surface-elevated
+3. Gray text #6B7280 on accent #3B82F6 (anti-pattern #5, fails 2.4:1 vs 4.5:1 required) → switch to #FFFFFF or tint of accent
+
+Score: Sophistication 6/10 — every element exists for a reason, but identity is generic.
+
+Top 3 fixes:
+1. Pair fonts (10 min, transforms identity)
+2. Flatten card nesting (5 min)
+3. Fix contrast on accent (5 min)
+```
+
+**Remotion target — `renderer/src/components/scene/IntroScene.tsx`**
+
+```
+Verdict: Pass with refinements — strong base, missing one cinematic preset
+
+What works:
+- 9:16 safe areas respected (top 200px clear, bottom 250px clear)
+- Title weight at 700 (survives compression)
+
+What fails:
+1. No ColorGrade applied (remotion-bridge.md L#cinematic) → wrap in cinematic/ColorGrade preset; based on copy tone, suggest "golden-hour"
+2. Title letter-spacing animation ends at 0 but starts at +0.04em — too tight (typography.md L#letter-spacing for video) → start at +0.08em
+3. Stagger between Title and Subtitle is 12 frames — too slow (motion-design.md L#stagger video target = 6–8 frames)
+
+Score: Beauty 7/10 — close to cinematic, missing the grade pass.
+
+Top 3 fixes: ColorGrade wrap, letter-spacing start value, stagger to 8 frames.
+```
+
+## Cross-references
+
+- Cites: `anti-patterns.md`, `typography.md`, `color-and-contrast.md`, `spatial-design.md`, `motion-design.md`, `remotion-bridge.md` (Remotion targets only)
+- Uses 6-axis evaluation rubric from `frontend-design` skill

package/.merlin-core/skills/general/mage-beauty/references/verb-delight.md

@@ -0,0 +1,98 @@
+# verb-delight — Add moments of joy
+
+## Trigger
+
+User invokes `/beauty delight [target]` or asks to "add some delight," "make this fun," "moments of joy here," "easter egg this." Adds **earned delight** — small moments that reward the user without compromising professionalism. Hard to do well, easy to overdo.
+
+## Inputs
+
+- A target that's competent but feels emotionless
+- Optional: tone direction ("subtle delight" vs "celebratory")
+
+## Process
+
+1. Read `references/motion-design.md` (delight is mostly motion + microcopy timing) and `voice-and-microcopy.md` (warmth in language).
+2. Identify **delight moments** — places where the user just succeeded or completed friction:
+   - First successful action (project created, first post published)
+   - Streak milestones (7 days in a row, 100th item)
+   - Unexpected success (saved before deadline, deleted error recovered)
+   - Small wins (checkbox completed, file uploaded)
+3. Apply delight with restraint — **one delight moment per major flow**, not 47:
+   - **Web:** spring animation on success state, confetti microparticle effect (≤300 particles, ≤2 s), haptic feedback (mobile), warm copy ("Nice — your first project is live")
+   - **Remotion:** `cinematic/ParticleSystem` (max 1 per video), accent color flash, beat-synced sting on milestone
+4. Verify the delight doesn't:
+   - Block the next action (stays out of the way after 2 s)
+   - Wear thin on repeat (the 50th time should be quieter than the 1st)
+   - Patronize ("Awesome!! 🎉🎉" everywhere is pandering)
+5. Make it skippable / dismissable.
+
+## Output
+
+Target with delight added + the trigger condition + the dismissal path.
+
+```
+Delight applied:
+- First-project-created: confetti burst (200 particles, 1.8s), Framer Motion spring on success card, copy "Your first project is live — let's add a task →"
+- 7-day-streak: subtle accent color flash on streak counter, haptic (mobile), copy "Week one, done. Keep going."
+- 100th item: bigger celebration (2.5s) + saved milestone in user history
+- Repeat-trigger logic: confetti only on first occurrence per user; subsequent successes get the spring + copy only
+- Reduced-motion variant: no particles, just copy + color shift
+```
+
+## Pre-checks
+
+- [ ] Delight is earned (user just succeeded), not performative (not on every page load)
+- [ ] One delight per flow, not stacked
+- [ ] Subsequent occurrences quieter than first (or rotate variants)
+- [ ] Doesn't block next action
+- [ ] Reduced-motion variant exists (no particles when prefers-reduced-motion)
+- [ ] Copy is warm without being saccharine ("Nice work" not "OMG amazing!! 🎉🎉🎉")
+- [ ] Skippable / non-blocking
+- [ ] Tone-of-voice matches product (a bank app celebrates differently than a fitness app)
+- [ ] For Remotion: max 1 ParticleSystem per video (anti-pattern enforcement)
+
+## Examples
+
+**Web target delight pass:**
+
+```
+File: components/CreateProject.tsx
+
+Before:
+- Project created, route to dashboard, no acknowledgment
+- User has no idea they did the thing right
+
+After:
+- On success:
+  - Spring-animated card slides up: "Project [name] is live"
+  - 200-particle confetti burst (1.8 s), Framer Motion AnimatePresence
+  - Copy under: "Your first project. Want to add tasks? [+ Add task]"
+  - After 4 s: card dismisses, route to dashboard with project pre-selected
+- Subsequent project creations: card slides up + copy, no confetti (only first counts)
+- Reduced-motion: just the card slide, color shift on success — no particles
+```
+
+**Remotion target delight pass:**
+
+```
+File: scene/CTAScene.tsx (campaign final beat)
+
+Before:
+- "Sign up at lampada.com" / fade in / fade out
+- Forgettable
+
+After:
+- "Get started at lampada.com"
+- Wrapped in cinematic/ParticleSystem preset="confetti" 24 frames
+- Accent color flash on URL (oklch(72% 0.22 50)) at frame 15
+- TransitionEffect "wipe" out (matches energy)
+- LowerThird removed (would compete with the moment)
+
+Scene now lands the call-to-action with energy.
+```
+
+## Cross-references
+
+- Cites: `motion-design.md`, `voice-and-microcopy.md`, `color-and-contrast.md`, `remotion-bridge.md` (cinematic bucket)
+- Antagonist: `verb-quieter` (when delight has gone overboard)
+- Companion: `verb-onboard` (delight is most powerful at first-success moments)

package/.merlin-core/skills/general/mage-beauty/references/verb-distill.md

@@ -0,0 +1,97 @@
+# verb-distill — Strip to essence
+
+## Trigger
+
+User invokes `/beauty distill [target]` or asks to "strip this to essentials," "what's actually needed here," "remove everything that doesn't earn its place," "minimal but not minimalist." Goes further than `verb-quieter` — quieter reduces noise; distill removes elements entirely.
+
+## Inputs
+
+- A target that has accumulated complexity over time
+- Optional: a target outcome ("distill to a single CTA", "distill to one column")
+
+## Process
+
+1. List every element on screen. For each, ask: **"If I delete this, what breaks?"** If the answer is "nothing critical," it's a candidate for removal.
+2. Read references with elimination lens: `spatial-design.md` (negative space as element), `voice-and-microcopy.md` (every word earns its place), `anti-patterns.md` (cards-in-cards = always candidates).
+3. Apply the **survives 3-question filter** to each element:
+   - Does it serve the primary user task?
+   - Does it carry information not available elsewhere?
+   - Would removing it confuse anyone?
+4. If 3 answers are "no" — delete it. If "yes/no/no" — usually delete. If "no/yes/no" — consolidate it elsewhere.
+5. After cuts, re-balance: typography hierarchy may need re-tuning since some siblings are gone, spacing may need reduction since fewer elements need separation.
+
+## Output
+
+Target file with elements removed + before/after element count + change log.
+
+```
+Distill applied:
+- Removed: 2 testimonial cards (already had social proof in hero)
+- Removed: "Features" section H2 (the 3 feature cards self-describe)
+- Removed: secondary "Learn more" link (one CTA is enough)
+- Removed: decorative SVG illustration in middle band
+- Consolidated: 4 trust badges → 1 row
+- Element count: 47 → 18
+
+Result: page reads in one scroll instead of three.
+```
+
+## Pre-checks
+
+- [ ] No critical user task broken by deletions
+- [ ] Information density still appropriate to context (a dashboard can't distill to "single CTA")
+- [ ] Hierarchy restored after removals (no orphan headings)
+- [ ] Spacing re-balanced if needed
+- [ ] Brand identity preserved — distill ≠ stripped of personality
+- [ ] Anti-patterns scan: removing cards may create scenarios that were hidden by the noise (e.g., gray-on-color now visible without the surrounding card)
+
+## Examples
+
+**Web target distill pass:**
+
+```
+File: app/page.tsx (landing)
+
+Before — 9 sections:
+1. Hero with 2 CTAs + video + 4 logos
+2. "What is X" section (3 paragraphs)
+3. Feature grid (6 cards)
+4. Testimonial carousel (5 quotes)
+5. Pricing (3 tiers + comparison table)
+6. FAQ (12 questions)
+7. Blog teaser (4 articles)
+8. Newsletter signup
+9. Footer (massive)
+
+After — 5 sections:
+1. Hero (1 CTA, 4 logos, no video — link to demo on click)
+2. Feature grid (3 cards, the 3 most distinguishing)
+3. Pricing (2 tiers — most products only need 2)
+4. FAQ (5 questions, the most asked)
+5. Footer (essentials only)
+
+Cuts: ~70% reduction in elements. Conversion path is clearer.
+```
+
+**Remotion target distill pass:**
+
+```
+File: scene/ContentScene.tsx
+
+Before:
+- Title + subtitle + body paragraph + 3 bullet points + supporting image + transition flourish + particle accent
+
+After:
+- Title + 1 supporting line + 1 bullet point + 1 image
+- Transition simplified to cross-dissolve (no flourish)
+- Particles removed
+
+Distill verdict: same message, half the screen-time, viewer absorbs it.
+```
+
+## Cross-references
+
+- Cites: `spatial-design.md`, `voice-and-microcopy.md`, `anti-patterns.md`
+- Sibling: `verb-quieter` (subtler reduction, no removals)
+- Antagonist: `verb-bolder` (amplification)
+- Companion: `verb-clarify` (improves what remains after distill)