@caoscompanybr/merlin 3.5.0

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

@@ -0,0 +1,79 @@
+# verb-harden — Edge cases, i18n, overflow, error states
+
+## Trigger
+
+User invokes `/beauty harden [target]` or asks to "harden this for production," "handle edge cases," "what about long names / empty data / errors / RTL," "make this robust." **Web only** — Remotion content is deterministic, so hardening doesn't apply the same way.
+
+## Inputs
+
+- A web target that works in the happy path
+- Optional: focus on a specific dimension ("harden for i18n", "harden for empty states")
+
+## Process
+
+1. Read `references/interaction-design.md` (loading/error/empty states), `responsive-and-multi-format.md` (overflow), `voice-and-microcopy.md` (i18n-friendly copy).
+2. Run through the **8 hostile scenarios** for every component touched:
+   - **Empty state** — what shows when the data array is `[]`?
+   - **Single state** — what shows with exactly 1 item? (cards designed for 3 often look broken with 1)
+   - **Many state** — what shows with 100+ items? (paginate? virtualize?)
+   - **Long text** — German labels are ~30% longer than English. "Anmelden" vs "Sign in" is fine; "Datenschutzerklärung" overflows. Test with 2x string length.
+   - **Network failure** — async operation fails: error message? retry? cached fallback?
+   - **Slow network** — loading state visible? skeleton or spinner?
+   - **No JS** — does the core function work without client-side JS? (server-side rendering / progressive enhancement)
+   - **RTL languages** — Arabic, Hebrew, Persian: does the layout mirror correctly? icons that imply direction (chevrons, arrows)?
+3. For each scenario, add the missing handling: empty-state component, error UI, fallback content, overflow ellipsis or wrap, RTL-aware logical properties (margin-inline-start instead of margin-left).
+
+## Output
+
+Target with hardening applied + checklist of scenarios covered.
+
+```
+Harden applied:
+- Empty state: "No projects yet" with [+ New Project] CTA
+- Long-text: H1 max-width: 65ch + word-break: balance
+- Network error: try/catch in fetcher + error toast with retry
+- Loading: skeleton component for 200ms+ async
+- RTL: replaced ml-4 with ms-4, replaced ChevronRight with logical icon
+- Slow network: loading.tsx (Next.js) + Suspense boundaries
+
+Scenarios covered: 8/8
+```
+
+## Pre-checks
+
+- [ ] Empty state designed for every list/grid component
+- [ ] Single-item state doesn't break "feature card row" layouts
+- [ ] Long strings don't break layout (max-width or wrapping)
+- [ ] All async ops have error + loading states
+- [ ] Logical properties (`ms-`, `me-`, `ps-`, `pe-`) used instead of physical (`ml-`, `mr-`, `pl-`, `pr-`)
+- [ ] Direction-implying icons swapped or auto-mirrored
+- [ ] No JS path tested (SSR/static fallback)
+- [ ] Keyboard navigation works through new states (empty, loading, error)
+
+## Examples
+
+**Web target harden pass:**
+
+```
+File: components/ProjectsList.tsx
+
+Before:
+- Renders projects.map(project => <Card>) — explodes on empty array (no items shown, blank space)
+- Card title h-12 fixed — overflows with German project name
+- No loading state during fetch
+- No error handling
+
+After:
+- Empty state component with "Create your first project" CTA when projects.length === 0
+- Card title min-h-[3rem] + line-clamp-2 + max-w-prose
+- Suspense boundary around ProjectsList → loading.tsx shows skeleton 200ms+
+- ErrorBoundary with "Couldn't load projects, retry?" UI
+- ms-4 instead of ml-4 (RTL-safe)
+- Card chevron uses inline-start icon variant
+```
+
+## Cross-references
+
+- Cites: `interaction-design.md`, `responsive-and-multi-format.md`, `voice-and-microcopy.md`
+- For full UX guidelines on edge cases: `design-ux-patterns` skill, `references/ux-guidelines.md`
+- Companion: `verb-onboard` (designs the empty state's first-run flow specifically)

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

@@ -0,0 +1,104 @@
+# verb-layout — Fix spatial rhythm, composition, grid
+
+## Trigger
+
+User invokes `/beauty layout [target]` or asks to "fix the layout," "the spacing is off," "this feels cramped," "rebuild the grid." Targets composition specifically — doesn't touch type/color/motion.
+
+## Inputs
+
+- A target with composition problems (cramped padding, broken grid, no negative space, centered-everything)
+
+## Process
+
+1. Read `references/spatial-design.md` (primary). For Remotion: `responsive-and-multi-format.md` + `remotion-bridge.md` for layout bucket.
+2. Audit current state:
+   - Spacing scale used or arbitrary px values?
+   - Section padding — generous or cramped?
+   - Grid — single column, 12-col, asymmetric, bento?
+   - Negative space — element or wasted space?
+   - Layout breaks — present or symmetric throughout?
+   - Max-width discipline — body 65 ch / marketing 1280 px / full-bleed?
+3. Apply fixes:
+   - **Spacing tokens** — replace arbitrary values with `space-1` through `space-16`
+   - **Section padding** — mobile ≥ 48 px Y, desktop ≥ 96 px Y
+   - **One grid break per section** — bleed photo, asymmetric split, layered card
+   - **Container queries** if components reflow at component-level
+   - **Logical max-widths** — `max-w-prose` for body, `max-w-7xl` for marketing, `w-full` for bleed
+4. For Remotion: pick layout component per aspect ratio (vertical / square / wide all need different compositions).
+
+## Output
+
+Target with layout fixed + spacing tokens + grid rationale.
+
+```
+Layout applied:
+- Section padding mobile: py-12 → py-16 (more breathing)
+- Section padding desktop: py-20 → py-32 (luxurious)
+- Hero composition: centered → 5-col text + 7-col image (asymmetric)
+- Hero photo: max-w-screen-lg → bleed full-width (one grid break)
+- Body sections: w-full → max-w-prose (65 ch line length)
+- Replaced: padding: 19px → space-5 (20 px from token scale)
+- Removed: card-in-card nesting (anti-pattern #10)
+```
+
+## Pre-checks
+
+- [ ] Spacing tokens used everywhere (no arbitrary px)
+- [ ] Section padding generous (mobile 48+ Y, desktop 96+ Y)
+- [ ] At least one intentional grid break per major section
+- [ ] Asymmetric composition where appropriate (no centered-everything anti-pattern)
+- [ ] Negative space treated as a design element
+- [ ] Max-width discipline (prose / marketing / bleed are distinct)
+- [ ] No card-in-card nesting (anti-pattern #10)
+- [ ] No equal-weight navigation (anti-pattern #12)
+- [ ] For Remotion: format-specific composition (vertical ≠ wide)
+- [ ] For Remotion: safe areas respected per platform
+
+## Examples
+
+**Web target layout pass:**
+
+```
+File: app/landing/page.tsx
+
+Before:
+- All sections py-12 (cramped on desktop)
+- Hero: 12-col grid, all 12 cols filled with centered content
+- Feature cards: 3-col grid, all identical sizes
+- No grid breaks, symmetric throughout
+
+After:
+- Sections: py-16 mobile / py-32 desktop
+- Hero: 5-col text + 7-col image, image bleeds beyond container right edge
+- Feature cards: bento grid (1 large + 2 medium + 3 small), max 4 cells per row
+- One grid break per section: hero (image bleed), features (large card), testimonials (full-width quote on dark band)
+- All padding from token scale
+
+Page now has visual rhythm — sections breathe and contrast.
+```
+
+**Remotion target layout pass:**
+
+```
+File: scene/ContentScene.tsx (1080×1920 vertical)
+
+Before:
+- layout/CenteredContent — single text block centered vertically
+- Top 50 px wasted, bottom 100 px wasted
+- Critical text near platform UI overlay zone
+
+After:
+- layout/SplitScreen 50/50 (top: heading, bottom: supporting)
+- Top reserved 200 px (Instagram username)
+- Bottom reserved 250 px (caption zone)
+- Critical content in central 980×1470 region
+- Heading at vertical-third intersection (rule of thirds)
+
+Composition now respects platform constraints + reads with hierarchy.
+```
+
+## Cross-references
+
+- Cites: `spatial-design.md` (primary), `responsive-and-multi-format.md`, `remotion-bridge.md`
+- For 30 landing pattern catalog: `design-ux-patterns` skill, `references/landing-patterns.md`
+- Companion: `verb-typeset` (typography inside the new layout), `verb-adapt` (multi-format reflow)

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

@@ -0,0 +1,98 @@
+# verb-onboard — First-run flows, empty states, activation paths
+
+## Trigger
+
+User invokes `/beauty onboard [target]` or asks to "design the first-run experience," "make the empty state useful," "help users activate," "what should new users see." **Web only** — covers the moment between sign-up and the user's first meaningful action.
+
+## Inputs
+
+- A target that's the entry point or empty container (dashboard, list, project area)
+- Context: who is the new user, what's the first action they should take
+
+## Process
+
+1. Read `references/interaction-design.md` (empty states + loading), `voice-and-microcopy.md` (encouraging tone, action-first labels).
+2. Define the **activation moment** — the first action that proves the product's value. For a project tool, "create first project." For analytics, "see first chart." Single action, low friction.
+3. Strip the empty state to 3 elements:
+   - **Context** — one sentence explaining what's normally here
+   - **Action** — primary CTA leading to the activation moment
+   - **Optional secondary** — link to docs, sample data, or import flow
+4. Design the **first-run flow** as a sequence:
+   - Welcome card or modal (skippable, never blocking)
+   - One contextual hint (tooltip on the primary action)
+   - Confirmation of first success ("Project created — let's add a task")
+5. Don't gate the product behind a tour. Tours are skipped 70%+ of the time. Build the product so the empty state itself teaches.
+
+## Output
+
+Target with empty state, activation CTA, and (optionally) a contextual hint added. Plus copy for each.
+
+```
+Onboard applied:
+- Empty state: illustration + "Your first project starts here" + [+ New Project]
+- Secondary: "Or import from CSV" + "Try with sample data"
+- First success: toast "Project created! Add your first task →"
+- Removed: 5-step tour modal (was 60% drop-off at step 3)
+- Microcopy reviewed for warmth + specificity
+```
+
+## Pre-checks
+
+- [ ] Single primary action in the empty state
+- [ ] Activation moment achievable in <1 minute from sign-up
+- [ ] No blocking tour or wizard
+- [ ] First success has a clear "what's next" prompt
+- [ ] Microcopy uses outcome-based verbs ("Create your first project" not "Get started")
+- [ ] Empty state visually balanced (illustration not requiring 200 KB SVG)
+- [ ] Sample data or quick-start option available
+- [ ] Keyboard-accessible — Enter on the primary action works
+- [ ] Touch targets ≥ 44 px on mobile
+
+## Examples
+
+**Web target onboard pass:**
+
+```
+File: app/dashboard/page.tsx
+
+Before:
+- Empty dashboard shows "No data" placeholder text + tiny "Add data" link
+- Tour modal pops on every visit until dismissed (60% skip rate)
+- New users bounce in 90 seconds
+
+After:
+- Empty dashboard: "Connect your first data source" + 3 large CTA tiles (CSV / API / Sample data)
+- One-time inline tooltip on the CSV tile: "Most users start here"
+- After first import: "Your data is in — explore your first chart →"
+- Tour removed
+- Average time-to-first-chart: dropped from 4 min to 90 s
+
+Activation rate (% reaching first chart): 38% → 71%
+```
+
+**Empty state copy patterns:**
+
+```
+[Standard empty]
+"No projects yet"
+[+ Create your first project]
+"Or import from another tool"
+
+[Filtered empty]
+"No projects match `[filter]`"
+[Clear filter] [Try different keywords]
+
+[Recently completed]
+"You've cleared your inbox 🌟"
+"Take a break, or [start something new]"
+
+[Permission-blocked]
+"You don't have access to this workspace"
+"Ask the owner to invite you, or [request access]"
+```
+
+## Cross-references
+
+- Cites: `interaction-design.md`, `voice-and-microcopy.md`, `spatial-design.md` (empty-state composition)
+- For activation funnel patterns: `design-ux-patterns` skill, conversion flows
+- Companion: `verb-clarify` (refines copy in the onboard flow), `verb-harden` (handles error edge cases)

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

@@ -0,0 +1,124 @@
+# verb-optimize — Performance improvements
+
+## Trigger
+
+User invokes `/beauty optimize [target]` or asks to "make this faster," "improve performance," "reduce bundle / render time," "fix the LCP." Targets performance specifically — does not change visual design (use `verb-distill` for visual reduction).
+
+## Inputs
+
+- A target with measurable performance issues (slow LCP, large bundle, slow renders, large videos)
+- Optional: focus area ("optimize images", "optimize render", "reduce JS")
+
+## Process
+
+1. **For web targets:**
+   - Read `references/responsive-and-multi-format.md`, `motion-design.md`
+   - Run mental Lighthouse pass: LCP ≤ 2.5 s, CLS ≤ 0.1, INP ≤ 200 ms, TBT ≤ 200 ms
+   - **Image optimization** — WebP/AVIF with `<picture>` fallback, explicit width/height (prevents CLS), `loading="lazy"` below fold, `sizes` attribute for responsive images
+   - **Font optimization** — preload critical fonts, `font-display: swap`, subset to used characters, prefer variable fonts
+   - **Bundle** — code-split routes, dynamic imports for heavy components, tree-shake unused code, audit for duplicate dependencies
+   - **Render** — virtualize long lists (≥100 items), memoize expensive components, debounce inputs, avoid re-renders
+   - **Network** — HTTP/2 push for critical CSS, brotli compression, cache strategy (immutable for hashed assets)
+2. **For Remotion targets:**
+   - Read `references/remotion-bridge.md` (component-bucket-specific render perf)
+   - Audit render time per scene
+   - Reduce VideoLayerStack to ≤ 4 layers per segment
+   - Maximum 1 ParticleSystem per video
+   - Pre-compose static elements (don't re-render unchanged)
+   - Lower fps if quality permits (60 → 30 fps cuts render in half)
+   - Resolution: 1080p ships, 4K only when needed
+3. Measure before + after (Lighthouse for web, render duration for Remotion).
+
+## Output
+
+Target with optimizations applied + before/after metrics.
+
+```
+Optimize applied (web):
+- Hero image: 800 KB JPG → 95 KB AVIF + WebP fallback
+- Added: explicit width/height on all images (CLS 0.18 → 0.04)
+- Fonts: 6 weights loaded → 3 weights, 80 KB → 36 KB
+- Code-split: /pricing route now dynamic-imported (saved 120 KB initial bundle)
+- Replaced: lodash full import → lodash-es tree-shaken (saved 60 KB)
+- Lighthouse: LCP 4.2 s → 1.8 s, TBT 480 ms → 140 ms
+
+Optimize applied (Remotion):
+- Render time per video: 4 min → 2.2 min
+- Reduced VideoLayerStack from 6 → 4 layers per segment
+- Removed redundant ColorGrade per element (now applied once at scene level)
+- Particle count: 800 → 200 (still reads as "celebratory")
+- fps unchanged (30 was already correct)
+```
+
+## Pre-checks
+
+**Web:**
+
+- [ ] LCP ≤ 2.5 s, CLS ≤ 0.1, INP ≤ 200 ms
+- [ ] All images WebP/AVIF with fallback
+- [ ] Explicit width/height on images
+- [ ] Below-fold images `loading="lazy"`
+- [ ] Critical fonts preloaded
+- [ ] Routes code-split
+- [ ] No unused dependencies in bundle
+- [ ] Long lists virtualized (≥100 items)
+- [ ] Brotli/gzip compression enabled
+
+**Remotion:**
+
+- [ ] VideoLayerStack ≤ 4 layers per segment
+- [ ] Max 1 ParticleSystem per video
+- [ ] ColorGrade at scene level, not per-element
+- [ ] Static elements pre-composed where possible
+- [ ] fps appropriate to use case (30 fps default; 60 only for sport/gameplay)
+- [ ] Resolution matches delivery (1080p ships)
+
+## Examples
+
+**Web target optimize pass:**
+
+```
+File: app/landing/page.tsx + next.config.js
+
+Before:
+- Hero image: 1.2 MB original JPG, no width/height
+- LCP: 4.6 s
+- CLS: 0.22 (image loads after layout)
+- Bundle: 540 KB (lodash full import + moment.js + duplicates)
+
+After:
+- Hero image: next/image with priority, AVIF source 95 KB
+- next/image auto-handles width/height (CLS 0.03)
+- Replaced moment.js → date-fns (saved 70 KB)
+- lodash → lodash-es tree-shaken (saved 50 KB)
+- Removed duplicate React versions in pnpm-lock
+- LCP: 1.6 s (target ≤ 2.5)
+- CLS: 0.03 (target ≤ 0.1)
+- Bundle: 380 KB
+```
+
+**Remotion target optimize pass:**
+
+```
+File: renderer/src/Compositions/DynamicVideo.tsx
+
+Before:
+- 6 VideoLayerStack layers per segment
+- ColorGrade applied per element (redundant)
+- ParticleSystem count: 800 (overkill)
+- Render: 5.8 min for 60s video
+
+After:
+- Reduced to 4 layers per segment (compose foreground vs background once)
+- ColorGrade hoisted to scene level (single application)
+- ParticleSystem count: 200 (still reads celebratory)
+- Pre-rendered static lower-third graphic (was redrawn every frame)
+- Render: 2.4 min for 60 s video (-58%)
+```
+
+## Cross-references
+
+- Cites: `responsive-and-multi-format.md`, `motion-design.md`, `remotion-bridge.md`
+- For full web perf rules: Merlin's `web-perf` skill (Core Web Vitals)
+- For Remotion performance: see `renderer/CLAUDE.md` in FF for ANGLE/GPU specifics
+- Companion: `verb-distill` (visual reduction often = perf gain)

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

@@ -0,0 +1,105 @@
+# verb-overdrive — Technically extraordinary effects
+
+## Trigger
+
+User invokes `/beauty overdrive [target]` or asks to "go all out," "make this technically impressive," "wow them," "no holds barred." This is the **maximalist** verb — used for hero moments, launch announcements, portfolio showcases, brand films. Use sparingly: overdrive on every page is template-energy maximalism, which is exactly what we don't want.
+
+## Inputs
+
+- A target that needs to be a wow-moment (hero, launch banner, finale scene)
+- Optional: technical direction ("WebGL fluid sim", "scroll-triggered cinematic timeline", "glitch grade stack")
+
+## Process
+
+1. Read all references — overdrive uses the full skill: `motion-design.md`, `color-and-contrast.md`, `spatial-design.md`, `typography.md`, `voice-and-microcopy.md`, `remotion-bridge.md` for video.
+2. Pick a **single technically extraordinary effect** as the centerpiece. One. Not five.
+   - **Web options:**
+     - WebGL shader background (fluid simulation, generative noise, displacement)
+     - Scroll-triggered cinematic timeline (GSAP ScrollTrigger sequencing)
+     - 3D scene (Three.js / React Three Fiber) with controlled camera
+     - SVG path morphing / drawing animation
+     - Hover-tilt-cards with realistic light response
+     - Cursor-following effects with physics
+   - **Remotion options:**
+     - Stacked cinematic (ColorGrade + CameraMotion + multiple TransitionEffect variants)
+     - Beat-synced edit with timeline-driven effects
+     - Custom glitch + chromatic aberration + grain stack
+     - Multi-layer composited segments with depth
+3. Layer **4-7 supporting techniques** around it (carefully): typographic display weight, dramatic letter-spacing animation, motion stagger pronounced, accent color used sparingly + intensely, full-bleed media, microcopy direct.
+4. Verify the overdrive doesn't break: respects `prefers-reduced-motion` (provides static fallback), still loads on mid-range devices (test on throttled network + CPU), maintains a11y (focus rings, keyboard nav).
+5. Pre-check anti-patterns more strictly than any other verb — overdrive is where it's easiest to slip into "AI-generic maximalism" (e.g., the WebGL shader becoming a purple-blue gradient).
+
+## Output
+
+Target with the centerpiece + supporting techniques + reduced-motion fallback + log.
+
+```
+Overdrive applied (web hero):
+- Centerpiece: WebGL fluid simulation background (GLSL shader, OKLCH-colored, responds to mouse)
+- Supporting: H1 weight 900, letter-spacing -0.06em, animated +0.1em → -0.06em over 600ms
+- Stagger reveals: 80ms → 120ms (more dramatic)
+- CTA hover: 3D tilt + light response, 200ms ease-out
+- Particles disabled on prefers-reduced-motion (CSS gradient fallback)
+- Mid-range device perf: tested on M1 Air at 4G throttle, holds 60fps
+```
+
+## Pre-checks
+
+- [ ] One centerpiece, not five (overdrive ≠ kitchen sink)
+- [ ] All anti-patterns hard-checked (no purple→blue, no Inter alone, no card-in-card)
+- [ ] prefers-reduced-motion provides static fallback
+- [ ] Tested on mid-range device + 4G throttle (still loads + interacts)
+- [ ] WCAG AA still passes (overdrive ≠ accessibility regression)
+- [ ] Keyboard navigation works through dramatic states
+- [ ] Focus rings visible despite dramatic effects
+- [ ] No autoplay audio
+- [ ] For Remotion: ParticleSystem still ≤ 1 per video
+- [ ] For Remotion: VideoLayerStack still ≤ 4 layers per segment
+- [ ] Mental check: if 100 designers saw this, would 80+ call it impressive — or generic? If <80, redo.
+
+## Examples
+
+**Web target overdrive pass:**
+
+```
+File: app/landing/page.tsx
+
+Before:
+- Standard SaaS landing: hero text + photo + CTA + features grid
+- Identity moderate
+
+After:
+- Centerpiece: WebGL fluid sim background (custom GLSL, brand-OKLCH palette, mouse-responsive at low intensity)
+- H1 "Build with intention" / weight 900 / letter-spacing animation +0.10em → -0.04em over 800 ms ease-out
+- Stagger reveal: H1 → subtitle → CTA, 120 ms apart, exits 60 ms (snappy on dismiss)
+- Hover-tilt cards in features section (max 3-degree tilt with brand-color light response)
+- prefers-reduced-motion: WebGL replaced with subtle CSS gradient + static fade-in on H1
+- Mid-range perf: 60 fps M1 Air, 45 fps Pixel 6, falls back to gradient on ≤ 30 fps detected
+```
+
+**Remotion target overdrive pass:**
+
+```
+File: scene/IntroScene-overdrive.tsx (campaign launch reel)
+
+Before:
+- Standard intro: title + subtitle + simple fade-in
+
+After:
+- Stacked cinematic centerpiece:
+  - cinematic/ColorGrade preset="cyberpunk" (high-impact emotion)
+  - cinematic/CameraMotion preset="dolly" (forward push, urgency)
+  - cinematic/TransitionEffect "glitch" on entry, "wipe" on exit
+- Title weight 900 + letter-spacing animation +0.12em → 0 over 18 frames
+- Subtitle stagger: 4 frames after title (compressed = energy)
+- cinematic/ParticleSystem preset="glitch-blocks" 24 frames (single use, first scene only)
+- Layer count: 4 (max per stack rule respected)
+- Render: 90 s scene at 6.2 min — within budget
+```
+
+## Cross-references
+
+- Cites: ALL thematic references + `remotion-bridge.md`
+- Anti-patterns enforcement: `anti-patterns.md` (mandatory pre-check, stricter than other verbs)
+- Antagonist: `verb-quieter` and `verb-distill` (when overdrive overshoots)
+- Companion: `verb-cinematic` (Remotion-first overdrive); `verb-rebrand` (when overdrive is part of a fresh aesthetic direction)

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

@@ -0,0 +1,91 @@
+# verb-polish — Final pass before ship
+
+## Trigger
+
+User invokes `/beauty polish [target]` or asks to "finalize this design," "ready it for ship," "do a polish pass," "make it production-ready." This verb is the **last step** before delivery — it assumes the design is fundamentally right and tightens execution.
+
+## Inputs
+
+- A target file or component (presumed near-final)
+- Optional: focus area ("polish the hero", "polish the form")
+
+## Process
+
+1. Run `verb-critique` mentally first — if there are fundamental issues, redirect to those verbs (`bolder`, `distill`, `rebrand`). Polish is for tight execution, not for fixing direction.
+2. Read references in priority order: `anti-patterns.md` (must-pass), `typography.md`, `color-and-contrast.md`, `spatial-design.md`, `motion-design.md`, `voice-and-microcopy.md`. For Remotion: also `remotion-bridge.md`.
+3. Apply micro-fixes across:
+   - **Type:** letter-spacing on display, line-height, font-weight balance
+   - **Color:** verify WCAG, check tinted neutrals, hover/active state colors
+   - **Spacing:** consistent token usage, generous section padding, single grid break per section
+   - **Motion:** stagger correct, exit faster than entrance, hover at 150 ms, reduced-motion respected
+   - **Microcopy:** every button label outcome-based, errors include fix path, no em-dash overuse
+4. Run anti-patterns scan (15 rules). Fix any violations.
+5. Verify pre-delivery checklist (cursor-pointer, smooth transitions, keyboard focus, touch targets, no layout shift on hover).
+
+## Output
+
+The target file with edits applied. Each edit is a small, targeted change — no refactors, no architectural shifts. After polish, the design should feel **inevitable**, not just complete.
+
+Output also includes a brief change log:
+
+```
+Polish applied:
+- Letter-spacing on H1: 0 → -0.02em
+- Section padding mobile: space-8 → space-12
+- Hover transition: 200ms → 150ms
+- 3 anti-patterns fixed (purple gradient, gray-on-color, em-dash overuse)
+```
+
+## Pre-checks
+
+- [ ] No anti-pattern violations remain post-polish
+- [ ] WCAG AA verified for every text pair touched
+- [ ] All transitions in 150–300 ms range
+- [ ] All touch targets ≥ 44 px
+- [ ] Body text ≥ 16 px
+- [ ] Focus states visible on every interactive element
+- [ ] No layout shift on hover/focus
+- [ ] Reduced-motion respected
+- [ ] For Remotion: weights ≥500, captions ≤17 ch/s, safe areas honored
+- [ ] Microcopy: outcome-based buttons, helpful errors
+
+## Examples
+
+**Web target polish:**
+
+```
+File: components/landing/Hero.tsx
+
+Changes:
+- Line 12: H1 letter-spacing 0 → -0.02em
+- Line 18: subtitle font-weight 400 → 500 (better hierarchy with H1 700)
+- Line 24: CTA button "Get Started" → "Start your free 7-day trial"
+- Line 31: section-y padding `py-16` → `py-24` (mobile generous)
+- Line 38: hover transition `duration-200` → `duration-150`
+- Line 42: focus-visible:outline-none added focus-visible:ring-2 ring-primary
+- Removed: bg-gradient-to-br from-purple-500 to-blue-500 (anti-pattern #4)
+- Replaced with: bg-[oklch(20%_0.05_264)] (tinted dark, on-brand)
+
+Polish verdict: ready to ship.
+```
+
+**Remotion target polish:**
+
+```
+File: renderer/src/components/scene/CTAScene.tsx
+
+Changes:
+- Title weight: 600 → 700 (better compression survival)
+- Title letter-spacing animation: starts at +0.04em → +0.08em (more dramatic reveal)
+- Stagger between title and CTA: 12 frames → 8 frames (snappier)
+- Added: cinematic/ColorGrade preset="golden-hour" wrapping scene
+- CTA copy: "Click here" → "Start your campaign in 60 seconds"
+- ProgressBar end animation: ends at frame 60 → ends at frame 54 (6 frames before cut, lets viewer read final state)
+
+Polish verdict: ready to render.
+```
+
+## Cross-references
+
+- Cites: `anti-patterns.md` (mandatory), `typography.md`, `color-and-contrast.md`, `spatial-design.md`, `motion-design.md`, `voice-and-microcopy.md`, `remotion-bridge.md` (Remotion only)
+- Uses pre-delivery checklist from `design-system` skill