@caoscompanybr/merlin 3.5.0

package/.merlin-core/skills/general/mage-beauty/references/responsive-and-multi-format.md

@@ -0,0 +1,98 @@
+# responsive-and-multi-format — Web breakpoints + video aspect ratios
+
+## Charter
+
+Responsive design used to mean "make the desktop layout shrink." That mental model is broken. Today's rule: design for 375 px first, expand outward. Plus, for FF's video pipeline, the format isn't just a screen size — it's a fundamentally different composition. A 1080×1920 vertical reel is not a cropped 1920×1080 video. Beauty in responsive design comes from honoring each canvas as its own thing, not as a derivative of another.
+
+## Principles
+
+1. **Mobile-first is a discipline, not a hashtag.** Start the CSS from no media query (mobile defaults), add `@media (width >= 768px)` for tablet expansions, `@media (width >= 1024px)` for laptop, `@media (width >= 1440px)` for wide desktop. Reverse-engineering from desktop is harder.
+2. **Breakpoints by content, not by device.** Devices come and go. Content needs change at specific widths — when a card hits 320 px, when text drops below 65 ch, when a 2-column grid no longer fits 2 useful columns. Use logical breakpoints, not "iPhone 14".
+3. **Fluid typography over breakpoint typography.** `font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem)` smoothly scales from mobile to desktop without 6 step changes. Tailwind v4 supports this natively.
+4. **Container queries for components.** A card sidebar component shouldn't care about the viewport — it should care about its container. `@container` (now widely supported) lets components be self-aware.
+5. **No horizontal scroll on mobile.** Test at 375 px. Use `overflow-x: hidden` only as the absolute last resort. Real fix: contain widths, use `min-w-0` on flex children, set `max-width: 100vw` on rebellious elements.
+6. **16 px minimum body text on mobile.** Smaller fonts trigger iOS auto-zoom on form focus. Universally bad UX. Even labels at 14 px should bump up if they're inside a tappable area.
+7. **Touch-first on mobile.** No hover-only interactions. Every hover state needs a tap equivalent. Tooltips become tap-to-reveal popovers.
+8. **For video formats: each aspect ratio is a redesign, not a crop.** The focal element, hierarchy, and safe areas differ. A talking-head shot for 16:9 needs to crop tighter for 9:16, and the lower-third graphic moves entirely.
+
+## Web breakpoints
+
+**The four-tier system:**
+| Tier | Min width | Use case |
+|---|---|---|
+| Mobile | 375 px (default) | Phones, narrow viewports |
+| Tablet | 768 px | iPad portrait, landscape phones, narrow laptops |
+| Laptop | 1024 px | iPad landscape, smaller laptops, half-screen browsers |
+| Desktop | 1440 px | Full-screen modern displays |
+
+Tailwind v4 default: `sm:` 640, `md:` 768, `lg:` 1024, `xl:` 1280, `2xl:` 1536. Many teams override `sm` to 480 to better match real phone landscape.
+
+**Test viewport widths**: 375 (iPhone SE), 414 (iPhone Pro), 768 (iPad), 1024 (iPad landscape), 1440 (laptop), 1920 (desktop). Anything that breaks at any of these fails.
+
+**Common responsive patterns:**
+
+- **Stack-to-grid** — single column mobile, 2-col tablet, 3-col laptop. Use `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
+- **Sidebar collapse** — hidden mobile (drawer/sheet), inline tablet+, persistent laptop+
+- **Nav switch** — hamburger mobile, full nav tablet+, mega-menu desktop
+- **Container reflow** — image+text side-by-side on desktop, stacked on mobile, image first or last by hierarchy
+
+## Remotion multi-format
+
+**FF's 9 templates × 3+ dimensions:**
+
+| Template        | Format                  | Dimensions                      | Aspect | Use case                      |
+| --------------- | ----------------------- | ------------------------------- | ------ | ----------------------------- |
+| SocialVertical  | tiktok                  | 1080×1920                       | 9:16   | TikTok, Instagram Reels       |
+| Widescreen      | widescreen              | 1920×1080                       | 16:9   | YouTube, web embeds           |
+| SocialSquare    | square                  | 1080×1080                       | 1:1    | Instagram feed legacy         |
+| Educational     | widescreen              | 1920×1080                       | 16:9   | Course content, tutorials     |
+| Promotional     | tiktok                  | 1080×1920                       | 9:16   | Promo reels, ads              |
+| Storytelling    | widescreen              | 1920×1080                       | 16:9   | Long-form narrative           |
+| ProductShowcase | widescreen              | 1920×1080                       | 16:9   | Product demos                 |
+| CarouselSlide   | square/portrait/stories | 1080×1080, 1080×1350, 1080×1920 | mixed  | Static IG carousel            |
+| VerticalClip    | stories                 | 1080×1920                       | 9:16   | Subtitled clips, face-tracked |
+
+**Safe-area zones per platform:**
+
+- **Instagram Reels (1080×1920):** top 200 px (username overlay), bottom 250 px (caption + UI), right 80 px (action buttons). Place primary content in the central 980×1470 region.
+- **TikTok (1080×1920):** top 150 px (caption text), bottom 200 px (action bar), right 100 px (icons). Central 880×1570 region.
+- **YouTube (1920×1080):** top 50 px (title overlay first 8 s), bottom 80 px (controls/end-screen). Central 1820×950.
+- **Instagram Feed (1080×1080):** 5% margin every side (54 px). Central 972×972.
+- **Stories (1080×1920):** top 200 px reserved (poll/sticker UI), bottom 100 px (action UI). Central 1080×1620.
+
+**Format-specific composition rules:**
+
+1. **Vertical (9:16):** vertical hierarchy. Hero element top-third, supporting middle-third, CTA bottom-third (above safe area).
+2. **Square (1:1):** balanced composition. Single focal point center or rule-of-thirds. Avoid wide horizontal layouts.
+3. **Wide (16:9):** rule of thirds. Lower-third graphics 80% from top. Title cards take advantage of horizontal space.
+4. **Portrait (4:5, 1080×1350):** vertical hierarchy with more breathing room than 9:16. Good for IG feed if vertical reels not fitting.
+
+## Cross-references
+
+- For touch-target rules and mobile interaction: read `interaction-design.md` in this skill
+- For typography sizing across breakpoints: read `typography.md` in this skill
+- For Remotion bucket-by-bucket details: read `remotion-bridge.md` in this skill
+- For Tailwind v4 breakpoint customization: read `tailwind-design-system` skill
+
+## Quick checklist
+
+**Web:**
+
+- [ ] Designed mobile-first (375 px baseline)
+- [ ] Tested at 375 / 768 / 1024 / 1440
+- [ ] No horizontal scroll on mobile
+- [ ] Body text ≥ 16 px on mobile
+- [ ] Container queries used where component reflow needed
+- [ ] Fluid typography (clamp) where appropriate
+- [ ] No hover-only interactions
+- [ ] Sidebar/nav patterns match the 4-tier system
+
+**Remotion:**
+
+- [ ] Format chosen first, composition designed for it (not cropped)
+- [ ] Safe-area zones respected for target platform
+- [ ] Vertical compositions use vertical hierarchy
+- [ ] Wide compositions use rule of thirds
+- [ ] Square compositions are balanced/centered
+- [ ] Lower-third graphic positioned at 80% bottom for wide formats
+- [ ] No critical content in platform UI overlays

package/.merlin-core/skills/general/mage-beauty/references/spatial-design.md

@@ -0,0 +1,88 @@
+# spatial-design — Asymmetry, negative space, intentional grid breaks
+
+## Charter
+
+Most AI-generated layouts default to a centered column with evenly-spaced cards on a 12-column grid. The result is symmetric, balanced, and forgettable. Beauty in space comes from intentional asymmetry, negative space treated as a design element rather than waste, and grid breaks that signal hierarchy. The grid is a tool, not a cage.
+
+## Principles
+
+1. **Negative space is content.** Whitespace is not empty — it directs attention, signals luxury, and gives the eye somewhere to rest. The most expensive products in the world (Apple, Hermès, Aesop) use more whitespace than competitors, not less.
+2. **Asymmetric layouts feel alive.** A centered hero with three centered feature columns underneath looks like a template. Off-center the hero, weight one feature larger than the others, let an element extend beyond the grid container. The page gains rhythm.
+3. **Use a spacing scale.** 4px or 8px base. Tokens: `space-1` (4) / `space-2` (8) / `space-3` (12) / `space-4` (16) / `space-6` (24) / `space-8` (32) / `space-12` (48) / `space-16` (64). Arbitrary `padding: 19px` is the surest sign of an undisciplined hand.
+4. **Section padding is bigger than you think.** Mobile sections want `space-12` to `space-16` (48–64 px) of vertical breathing room. Desktop wants `space-24` (96 px) or more. AI-generated sites consistently under-pad and feel cramped.
+5. **Break the grid with one element per section.** A photo that bleeds full-width while the text stays in the 12-col grid. A pull quote at 80% width while the body sits at 65 ch. One break per section creates rhythm; three breaks creates chaos.
+6. **Layer with overlap.** Cards overlapping the section above. Photos overlapping a band of color. A heading kissing the edge of an image. Overlap signals depth and intention.
+7. **Container queries over breakpoints when possible.** A card that needs to reflow when its container is narrow shouldn't depend on the viewport — it should query its container.
+8. **Max-width discipline.** Body content at `max-w-prose` (~65 ch). Marketing sections at `max-w-7xl` (1280 px) or wider. Full-bleed media at viewport. Mixing these creates the right tension.
+
+## Web application
+
+**Spacing tokens** in Tailwind v4:
+
+```css
+@theme {
+  --spacing-section-y: 6rem; /* 96px */
+  --spacing-section-x: 1.5rem; /* 24px mobile */
+}
+
+@media (width >= 768px) {
+  :root {
+    --spacing-section-x: 4rem;
+  }
+}
+```
+
+**Grid breaks** examples:
+
+- Bleed photo: `<img class="w-screen relative left-1/2 -translate-x-1/2">` inside a constrained container
+- Off-center hero: 5/12 + 7/12 columns, body left, image right
+- Layered card: `mt-[-4rem] z-10` to lift over previous section
+
+**Common compositions:**
+
+- **Bento grid** — Apple-style feature showcase. Mixed-size cells. One large + several smaller.
+- **Editorial** — long-form content, single column, generous margins, breakable for pull quotes
+- **Dashboard** — dense, information-first, reduced spacing scale
+- **Marketing** — punchy, alternating sections, full-bleed mixed with constrained
+- **App shell** — sidebar + main, sticky header, scrollable region
+
+## Remotion application
+
+Video composition is spatial design at high stakes — every pixel is intentional because the viewer can't pause to re-read.
+
+1. **Safe areas matter.** Bottom 250 px on Instagram is hidden under captions. Bottom 200 px on TikTok is the action bar. Top 100 px on YouTube has the title overlay. Place nothing important there.
+2. **Rule of thirds for cinematic shots.** `cinematic/CameraMotion` Ken Burns presets respect this — the focal point lands on a third intersection. Don't compose center-frame for cinematic templates.
+3. **Layout components in FF:**
+   - `layout/SplitScreen` — two-up composition, perfect for before/after, comparison, dialogue
+   - `layout/Overlay` — text or graphic over background media, requires contrast plate
+   - `layout/FullBleed` — edge-to-edge media, used for hero shots in 16:9 templates
+   - `layout/Grid` — multi-cell composition, max 4 cells before the eye loses track
+   - `layout/CenteredContent` — for typographic moments, quotes, single-statement frames
+4. **Vertical, square, wide need different layouts.** A composition that works at 1920×1080 fails at 1080×1920. Plan the focal element first, then crop the surroundings.
+
+**Format-specific grids:**
+
+- **1080×1920 (vertical/Reels/TikTok):** central column at 80% width, top 200 px reserved for username/sound, bottom 250 px reserved for captions
+- **1080×1080 (square/Carousel):** 5% margin all sides, central focal point, max one secondary element
+- **1920×1080 (wide/YouTube):** rule-of-thirds composition, lower-third graphic at 80% bottom band
+- **1080×1350 (portrait/Feed):** 5% margin, vertical hierarchy preferred over horizontal
+
+## Cross-references
+
+- For 30-pattern landing-page catalog: read `design-ux-patterns` skill, `references/landing-patterns.md`
+- For Tailwind v4 spacing tokens: read `tailwind-design-system` skill
+- For Remotion layout components in detail: read `remotion-bridge.md` in this skill
+- For motion timing inside layouts: read `motion-design.md` in this skill
+
+## Quick checklist
+
+- [ ] Spacing scale tokens used everywhere — no arbitrary px values
+- [ ] Section padding generous (mobile ≥48 px Y, desktop ≥96 px Y)
+- [ ] At least one intentional grid break per major section
+- [ ] Asymmetric composition where appropriate (no everything-centered)
+- [ ] Negative space treated as a design element
+- [ ] Container queries used for component-level reflow
+- [ ] Max-width discipline (prose, marketing, full-bleed are distinct)
+- [ ] For Remotion: safe-area zones respected per platform
+- [ ] For Remotion: format-specific composition (vertical ≠ wide ≠ square)
+- [ ] Layer with overlap where depth is wanted

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

@@ -0,0 +1,60 @@
+# typography — Type as identity carrier
+
+## Charter
+
+Type is the loudest carrier of identity in any interface. Most AI-generated UIs lose immediately because they default to Inter or Geist for everything — the fonts that say "this was made by an LLM in 2025." A confident type system pairs on contrast, commits to a scale, and earns its hierarchy through weight and size, not through 47 different colors.
+
+## Principles
+
+1. **Pair on contrast, never on similarity.** The strongest pairings put a serif against a sans, a display against a humanist body, or a thin geometric heading against a slab body. Two grotesques are noise.
+2. **Use a modular scale.** 1.25 (major third) is the safe default. 1.333 (perfect fourth) for editorial. 1.125 (major second) for data-dense dashboards. Never set arbitrary pixel sizes.
+3. **Body type ≥ 16px on screen.** 14px is for labels and metadata only. Smaller body text fails legibility at 1m viewing distance, fails iOS auto-zoom on form inputs, and signals "I do not respect the reader."
+4. **Line height carries hierarchy.** 1.5 for body paragraphs. 1.2 for headings (so they feel architectural). 1.7 for long-form reading. Mixing these wrong creates the feeling that the page is "off" without the user being able to name why.
+5. **Line length 65–75 characters.** Beyond that, the eye loses the next line. Below 45, the rhythm gets choppy. Use `max-w-prose` in Tailwind or `max-width: 65ch` in CSS.
+6. **Limit weights.** Load 3 weights per family, max. Regular 400 + Medium 500 + Bold 700 covers 95% of cases. Variable fonts let you avoid this rule entirely — load one file, use any weight.
+7. **Letter-spacing scales inversely with size.** H1 wants `-0.02em` to `-0.04em` (large letters need tightening). Body wants `0`. ALL CAPS labels want `+0.05em` to `+0.1em`. Default letter-spacing on display sizes always looks loose.
+8. **Numerals matter.** For data, use tabular figures (`font-variant-numeric: tabular-nums`) so columns align. For prose, use proportional. For prices, lining figures over old-style.
+
+## Web application
+
+- **Loading**: `font-display: swap` always, never block on font load
+- **next/font**: `next/font/google` is preferred over manual `<link>` — auto-subsets and self-hosts at build time
+- **CSS variables**: declare `--font-heading` and `--font-body` once at `:root`, reference everywhere
+- **Variable fonts**: `Inter Variable`, `Outfit`, `Space Grotesk`, `Source Serif 4` — use the variable axis (`wght`, `slnt`, `opsz`) instead of loading multiple files
+- **Fallback stacks**: every custom font needs a `system-ui, -apple-system, sans-serif` fallback so FOUT doesn't break layout
+
+## Remotion application
+
+Video typography behaves differently. Three rules override the web defaults:
+
+1. **Letter-spacing is animatable**, and animating it from `+0.1em` → `0` over 12 frames creates the most-used text reveal in the cinematic component bucket. Use it for `text/Title` and `text/Subtitle` entrances.
+2. **Compression breaks thin weights.** Anything under 400 weight degrades visibly at 8 Mbps H.264. Default to 500 minimum for Remotion text components.
+3. **Line height is taller in video.** Body text on screen wants 1.5; subtitles in `text/SubtitleOverlay` want 1.35–1.4 because the viewer's eye doesn't stay on a single block — they're reading bursts. Long line height in video feels lazy, not generous.
+
+Component-specific:
+
+- `text/Title` — display weight, tight letter-spacing, animated entrance
+- `text/Subtitle` — body+1 size, regular weight, no letter-spacing animation (loses readability)
+- `text/Typewriter` — monospace family, fixed-width, character-reveal animation
+- `text/SubtitleOverlay` — caption weight (500), background plate or text-shadow for legibility on any video, max 2 lines per cue
+- `text/WordHighlight` — body family, accent color shift on cue word, no font-family swap (visually unstable)
+
+## Cross-references
+
+- For full font-pairing catalog: read `design-typography` skill, especially `references/full-pairings.md` (57 pairings)
+- For OKLCH on type colors: read `color-and-contrast.md` in this skill
+- For motion timing of text reveals: read `motion-design.md` in this skill
+- For caption tone and brevity (paired with type): read `voice-and-microcopy.md`
+
+## Quick checklist
+
+- [ ] Body type ≥ 16 px (or 500 weight in video)
+- [ ] Maximum 2 font families (heading + body, or single family)
+- [ ] Maximum 3 weights per family loaded
+- [ ] Modular scale (1.25 default) — no arbitrary px sizes
+- [ ] Line height: 1.5 body / 1.2 heading / 1.4 video subtitles / 1.7 long-form
+- [ ] Line length 65–75 ch on web body
+- [ ] Letter-spacing: negative on display, neutral on body, positive on caps
+- [ ] Tabular figures for data tables and prices
+- [ ] `font-display: swap` on every Google Font import
+- [ ] Tight pairing rationale documented (why these two fonts)

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

@@ -0,0 +1,102 @@
+# verb-adapt — Different devices for web, different formats for Remotion
+
+## Trigger
+
+User invokes `/beauty adapt [target]` or asks to "make this work on mobile," "adapt for tablet," "redo this for vertical," "we need a square version of this video." Translates an existing design into a new viewport (web) or a new aspect ratio (Remotion).
+
+## Inputs
+
+- A target that exists in one canvas
+- A new canvas to translate to (e.g., desktop → mobile, 16:9 → 9:16)
+
+## Process
+
+1. Read `references/responsive-and-multi-format.md` (primary). For Remotion: `remotion-bridge.md` (format-specific composition).
+2. **Don't crop. Recompose.** A 16:9 design cropped to 9:16 looks broken because the focal element wasn't designed for vertical. Treat each canvas as its own design.
+3. **For web (desktop → mobile or vice versa):**
+   - Identify the **single primary action** on each viewport (mobile users have less patience)
+   - Stack columns vertically on mobile (mobile-first)
+   - Replace hover-only interactions with tap equivalents
+   - Bump body text to 16 px minimum
+   - Test at 375 / 768 / 1024 / 1440
+   - Container queries for component-level reflow
+4. **For Remotion (16:9 → 9:16, etc.):**
+   - Identify the focal element first (the thing that must read regardless of crop)
+   - Recompose around it: vertical hierarchy for 9:16, balanced for 1:1, rule-of-thirds for 16:9
+   - Recompute safe areas for the target platform (Instagram captions, TikTok bottom bar, YouTube end-screen)
+   - Adjust line breaks in captions (vertical can hold 2-line captions tighter than wide)
+   - Camera motion may need different preset (Ken Burns reads differently in 9:16)
+
+## Output
+
+A new variant of the target file (or a section of it) for the new canvas + a log of what changed.
+
+```
+Adapt applied (16:9 widescreen → 9:16 vertical):
+- Layout: layout/SplitScreen → layout/CenteredContent (vertical hierarchy)
+- Hero text: 80% width → 90% width
+- Subtitle: hidden in 16:9 → shown in 9:16 (vertical has more space top-to-bottom)
+- Camera: cinematic/CameraMotion preset="dolly" → "ken-burns" (drift reads better vertically)
+- Top 200 px reserved (Instagram username), bottom 250 px (caption)
+- Lower-third graphic moved to upper-third (16:9 lower-third position is in safe area for 9:16)
+- TransitionEffect unchanged (cross-dissolve works in both formats)
+```
+
+## Pre-checks
+
+- [ ] Recomposed (not cropped)
+- [ ] Primary focal element preserved across formats
+- [ ] Safe areas respected for target platform
+- [ ] For web: tested at 375 / 768 / 1024 / 1440
+- [ ] For web: hover replaced with tap on mobile
+- [ ] For web: body ≥ 16 px, no horizontal scroll
+- [ ] For Remotion: format-appropriate composition (vertical/square/wide)
+- [ ] For Remotion: caption breaks adjusted for new aspect
+- [ ] For Remotion: camera motion preset re-evaluated
+
+## Examples
+
+**Web target adapt pass (desktop → mobile):**
+
+```
+File: components/landing/Pricing.tsx
+
+Desktop (1440):
+- 3 plan cards in a row, 4 features visible per card
+- Hover reveals additional details
+- Comparison table below cards (full-width)
+
+Mobile (375) adapted:
+- Stack: 3 cards vertically, "Most popular" plan first (highest intent)
+- All features visible (no hover-only details on mobile — replaced with tap-to-expand)
+- Comparison table → "View full comparison" link to a separate route
+- CTA buttons sticky to bottom on long card scroll
+- Touch targets bumped: py-2 → py-4 (min 44 px)
+```
+
+**Remotion target adapt pass (16:9 → 9:16):**
+
+```
+File: scene/IntroScene-vertical.tsx (new variant of scene/IntroScene.tsx)
+
+16:9 original:
+- layout/SplitScreen 50/50: hero photo right, text left
+- Title at top-left, subtitle below
+- LowerThird at 80% from top (rule of thirds)
+
+9:16 adapted:
+- layout/CenteredContent stacked vertically
+- Hero photo: top half (full-width)
+- Text: bottom half (above 250 px caption safe area)
+- Title at vertical-third intersection (recomposed for vertical)
+- LowerThird removed (would compete with caption zone)
+- Top 200 px reserved (Instagram username overlay)
+- Camera preset changed: pan-right → ken-burns (vertical drift)
+```
+
+## Cross-references
+
+- Cites: `responsive-and-multi-format.md` (primary), `remotion-bridge.md` (Remotion targets), `spatial-design.md`
+- For Tailwind v4 responsive patterns: `tailwind-design-system` skill
+- For 9 FF templates by aspect: `responsive-and-multi-format.md`
+- Companion: `verb-layout` (composition fixes for the new canvas)

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

@@ -0,0 +1,97 @@
+# verb-animate — Add purposeful motion
+
+## Trigger
+
+User invokes `/beauty animate [target]` or asks to "add motion here," "this feels static," "give this some life," "animate the entrance." Adds motion that **earns its place** — every animation must clarify hierarchy or guide attention, never just exist.
+
+## Inputs
+
+- A target that's static or under-animated
+- Optional: motion intent ("entrance only", "hover states", "scroll-triggered")
+
+## Process
+
+1. Read `references/motion-design.md` (primary). For Remotion: also `remotion-bridge.md`.
+2. Identify what motion would serve:
+   - **Entrance** — page load, modal open, content reveal
+   - **State change** — hover, focus, active, loading
+   - **Scroll-triggered** — section reveal as it enters viewport
+   - **Data update** — number changes, list reorders, card moves
+   - **Pacing** (Remotion only) — scene transitions, beat emphasis
+3. Apply with discipline:
+   - **Use transform + opacity only** (GPU-accelerated)
+   - **Stagger 50–100 ms** (web) / **6–8 frames** (Remotion at 30fps)
+   - **Exits faster than entrances** (~150 ms vs ~300 ms)
+   - **Hover at 150 ms**, focus at same
+   - **prefers-reduced-motion** respected — wrap or use `useReducedMotion()`
+4. For Remotion: pick from the FF library — `animation/SpringEntrance`, `animation/StaggeredList`, `animation/FadeIn/SlideIn/ZoomIn`. For scenes: `cinematic/CameraMotion` and `cinematic/TransitionEffect`.
+
+## Output
+
+Target with motion added + token references used.
+
+```
+Animate applied:
+- Hero entrance: Title fade-up 400ms ease-out, stagger 80ms between H1 / subtitle / CTA
+- Cards: hover translateY(-2px) + shadow-shift, 150ms ease-out
+- List item add: layout animation 250ms (Framer Motion)
+- Reduced-motion: all decorative animation disabled, only loading retained
+- Tokens: --duration-base 300ms, --ease-out cubic-bezier(0.16, 1, 0.3, 1)
+```
+
+## Pre-checks
+
+- [ ] Every animation has a purpose (clarifies hierarchy or guides attention)
+- [ ] No bounce/elastic easing (anti-pattern #7)
+- [ ] No animation on width/height/margin (use transform/opacity)
+- [ ] prefers-reduced-motion respected
+- [ ] Stagger 50–100 ms (web) / 6–8 frames (Remotion)
+- [ ] Exits faster than entrances
+- [ ] Hover 100–200 ms
+- [ ] No element animating "just because"
+- [ ] For Remotion: camera motion runs full segment length
+- [ ] For Remotion: ColorGrade applied at scene level if cinematic intent
+
+## Examples
+
+**Web target animate pass:**
+
+```
+File: components/landing/Hero.tsx
+
+Before:
+- All elements appear instantly on load, no entrance
+- Buttons static on hover
+
+After:
+- Page-load reveal: H1 fadeUp 400ms ease-out → subtitle 480ms (stagger 80ms) → CTA 560ms
+- Hero image: scale(0.98) → 1 + opacity 0 → 1, 600ms ease-out
+- Button hover: translateY(-2px) + shadow-shift, 150ms
+- Wrapped in @media (prefers-reduced-motion: no-preference)
+- Used Framer Motion's <motion.div> with whileInView for scroll-triggered subsequent sections
+```
+
+**Remotion target animate pass:**
+
+```
+File: scene/ListScene.tsx
+
+Before:
+- 5 list items appear simultaneously — feels glitchy
+- No camera motion
+- Hard cut transition out
+
+After:
+- Wrapped items in animation/StaggeredList (6-frame stagger between siblings)
+- Each item uses animation/SlideIn from="bottom" 24px / 12-frame spring
+- Added cinematic/CameraMotion preset="drift" (gentle background motion)
+- Out-transition: cinematic/TransitionEffect preset="cross-dissolve" 18 frames
+
+Scene now reads: list arrives intentionally instead of all-at-once.
+```
+
+## Cross-references
+
+- Cites: `motion-design.md`, `remotion-bridge.md` (Remotion only), `interaction-design.md` (for state changes)
+- For framer-motion specifics: see Merlin's `frontend-ui-animator` or `ui-animation` skill
+- Companion: `verb-delight` (motion that creates joy, beyond just reveal animations)

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

@@ -0,0 +1,99 @@
+# verb-audit — Technical quality checks (a11y/perf/correctness)
+
+## Trigger
+
+User invokes `/beauty audit [target]` or asks to "check accessibility," "audit this for performance," "verify WCAG," "check render performance." This verb runs **technical** checks (mechanically verifiable), distinct from `verb-critique` which does subjective design review.
+
+## Inputs
+
+- A target file or component
+- Optional: scope flag ("a11y only", "perf only", "all")
+
+## Process
+
+1. Detect target type (web vs Remotion).
+2. **For web targets:**
+   - Read `references/interaction-design.md` (focus, touch targets, loading states)
+   - Read `references/color-and-contrast.md` (WCAG verification)
+   - Read `references/responsive-and-multi-format.md` (breakpoint testing)
+   - Run mental checks: WCAG AA contrast on every text/bg pair, focus-visible on every interactive element, 44 px touch targets, prefers-reduced-motion wrapping, image alt text, heading hierarchy (no skipped levels), keyboard navigation
+3. **For Remotion targets:**
+   - Read `references/remotion-bridge.md` (bucket-specific render performance)
+   - Read `references/responsive-and-multi-format.md` (safe-area zones)
+   - Run mental checks: weights ≥500 (H.264 compression), particle count ≤1 per video, max 4 layers per VideoLayerStack, captions ≤17 chars/sec, safe areas respected for target platform, ColorGrade applied at scene level not per-element
+4. Categorize findings: CRITICAL (data-loss / total fail), HIGH (broken UX), MEDIUM (degraded UX), LOW (polish).
+5. For each finding, output: location → problem → impact → fix (specific values).
+
+## Output
+
+```
+[CRITICAL/HIGH/MEDIUM/LOW] Issue title
+Where: file:line or "Hero section"
+Problem: <specific>
+Impact: <user-facing consequence>
+Fix: <exact change with values>
+```
+
+Plus a totals line: e.g., `0 CRITICAL / 2 HIGH / 5 MEDIUM / 3 LOW = 10 findings`.
+
+## Pre-checks
+
+- [ ] Every finding has a specific fix, not "improve X"
+- [ ] CRITICAL reserved for actual data-loss or total fail (not polish)
+- [ ] WCAG ratios calculated and cited (e.g., "2.4:1, fails AA 4.5:1")
+- [ ] For Remotion: safe-area zones cited by exact pixel values per platform
+
+## Examples
+
+**Web target audit:**
+
+```
+[HIGH] Touch target too small
+Where: components/MobileNav.tsx:34 (close button)
+Problem: 32×32 px tap target, below 44 px WCAG 2.5.5
+Impact: Mis-taps on mobile, accessibility fail
+Fix: Add `p-3` (12 px padding) or set explicit `size-11` (44 px)
+
+[MEDIUM] No focus ring on custom button
+Where: components/Button.tsx:18
+Problem: `outline-none` without replacement
+Impact: Keyboard users lose focus indication
+Fix: Add `focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary`
+
+[LOW] Reduced-motion not respected
+Where: animations/HeroReveal.tsx:12
+Problem: Animation runs unconditionally
+Impact: Motion-sensitive users get unwanted animation
+Fix: Wrap in `@media (prefers-reduced-motion: no-preference)` or use Framer Motion's `useReducedMotion()`
+
+Totals: 0 CRITICAL / 1 HIGH / 1 MEDIUM / 1 LOW = 3 findings
+```
+
+**Remotion target audit:**
+
+```
+[HIGH] Caption reading speed exceeds limit
+Where: scene/ContentScene.tsx (cue at 0:04–0:06)
+Problem: 62 chars in 2 seconds = 31 chars/sec, exceeds 17 ch/s comfort threshold
+Impact: Viewers can't read caption before it disappears
+Fix: Split into two cues at natural phrase boundary, or extend duration to 3.7 s
+
+[MEDIUM] Title weight too thin for compression
+Where: text/Title in IntroScene
+Problem: weight 300, degrades visibly at 8 Mbps H.264
+Impact: Letterforms look broken in delivered video
+Fix: Bump to weight 500 minimum, ideally 600 for display sizes
+
+[LOW] No ColorGrade on scene
+Where: scene/IntroScene.tsx
+Problem: scene renders untreated; default palette feels untouched
+Impact: Visual identity weaker than peer scenes with grade applied
+Fix: Wrap scene in `cinematic/ColorGrade preset="golden-hour"` or appropriate emotional preset
+
+Totals: 0 CRITICAL / 1 HIGH / 1 MEDIUM / 1 LOW = 3 findings
+```
+
+## Cross-references
+
+- Cites: `interaction-design.md`, `color-and-contrast.md`, `responsive-and-multi-format.md`, `remotion-bridge.md`
+- Web a11y standards from `design-ux-patterns` skill (119 UX rules)

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

@@ -0,0 +1,94 @@
+# verb-bolder — Amplify timid designs
+
+## Trigger
+
+User invokes `/beauty bolder [target]` or asks to "make this bolder," "amplify this," "this is too safe," "more confidence in this design," "go bigger." This verb pushes the existing direction further — it doesn't change direction, it commits harder to the one already there.
+
+## Inputs
+
+- A target that feels muted, hedged, or under-committed
+- Optional: a dimension to amplify ("bolder typography only", "bolder color")
+
+## Process
+
+1. Read `verb-critique`'s output mentally — identify which dimensions feel timid: type weight too light, color too muted, spacing too cramped, motion too subtle, microcopy too cautious.
+2. Read references for the dimensions to amplify: `typography.md` for type, `color-and-contrast.md` for color, `spatial-design.md` for composition, `motion-design.md` for motion, `voice-and-microcopy.md` for copy.
+3. Apply a **2x rule** per amplified dimension:
+   - **Type:** display weight 500 → 700, size up one scale step, letter-spacing more negative
+   - **Color:** chroma bumped 30%, accent used in more places, contrast ratio raised one bracket
+   - **Composition:** section padding doubled, hero takes more vertical space, one element bleeds full-width
+   - **Motion:** entrance duration shortened (snappier), stagger more pronounced, hover scale 1.02 → 1.05
+   - **Microcopy:** verbs more declarative, hero copy 50% shorter and 100% more direct
+4. Verify pre-checks — bolder must not break anti-patterns (e.g., bolder color ≠ purple-to-blue gradient).
+
+## Output
+
+The target file with amplifications applied. Plus a "before/after" log:
+
+```
+Bolder applied:
+- H1: weight 600 → 800, size text-4xl → text-6xl, letter-spacing -0.02em → -0.04em
+- Accent color chroma: 0.15 → 0.20
+- Hero section padding: py-16 → py-32 (doubled)
+- Entrance reveal: 400ms → 250ms (snappier)
+- Hero copy: "Welcome to our platform that helps teams collaborate more effectively" → "Build faster. Together."
+```
+
+## Pre-checks
+
+- [ ] No anti-patterns introduced (bigger ≠ purple gradient, bolder color ≠ pure red on pure black)
+- [ ] WCAG AA still passes (bolder color must verify contrast)
+- [ ] Touch targets still ≥ 44 px (bigger UI ≠ accidentally smaller buttons)
+- [ ] Reduced-motion still respected (snappier ≠ unconditional motion)
+- [ ] Microcopy still helpful, not cryptic (shorter ≠ vague)
+- [ ] For Remotion: amplified motion still respects safe areas + format
+
+## Examples
+
+**Web target bolder pass:**
+
+```
+File: components/Hero.tsx
+
+Before:
+- H1 "Welcome to Lampada — your analytics platform" / weight 500, text-3xl
+- Subtitle text-base, weight 400, text-gray-600
+- CTA "Sign Up" / py-2 px-4
+- Section py-16
+- Background bg-white
+
+After:
+- H1 "See your data clearly." / weight 800, text-6xl, letter-spacing -0.04em
+- Subtitle text-xl, weight 500, text-gray-900
+- CTA "Start your free 14-day trial" / py-4 px-8 / bg-primary
+- Section py-32
+- Background bg-[oklch(98%_0.01_264)] (tinted, more deliberate)
+- Added: H1 stagger reveals at 8 frames (snappier than default 12)
+```
+
+**Remotion target bolder pass:**
+
+```
+File: scene/IntroScene.tsx
+
+Before:
+- Title weight 500, no letter-spacing animation
+- Subtitle reveals 18 frames after Title
+- No ColorGrade
+- Camera static
+
+After:
+- Title weight 800, letter-spacing animates +0.10em → 0 over 12 frames
+- Subtitle reveals 6 frames after Title (compressed stagger, more energy)
+- Wrapped in cinematic/ColorGrade preset="cyberpunk" (high-impact emotion)
+- Added cinematic/CameraMotion preset="dolly" (forward push, urgency)
+- Added cinematic/TransitionEffect preset="glitch" on out-transition (matches energy)
+
+Bolder verdict: scene now reads as cinematic, not corporate.
+```
+
+## Cross-references
+
+- Cites: `typography.md`, `color-and-contrast.md`, `spatial-design.md`, `motion-design.md`, `voice-and-microcopy.md`
+- For Remotion: `remotion-bridge.md` (cinematic stack composition)
+- Antagonist verb: `verb-quieter` (use that to tone down over-bold designs)