@devinilabs/reelstack 1.2.0

package/skill/SKILL.md

@@ -0,0 +1,229 @@
+---
+name: reelstack
+description: Use when the user invokes any /reelstack-* command, asks to scaffold a reel, make a 9:16 video for Instagram/TikTok/Shorts/YouTube Shorts, names one of the 5 style families (Glass Iridescent, Cream Paper, Dark Cinematic, Warm Signature, Forbidden), or names one of the 22 presets (graphify, paperclip, gstack, lilagents, jcode, claudewatch, claudewatchcta, justdrop, opus, designreel, devini3d, stitch, stitch2, codedrop, claudedispatch, notebooklm, gpt55, resourcescta, skills, huashu, mempalace, heretic). Premium 9:16 Reel OS for Remotion. Scaffolds production-grade reels with audio-locked motion, IG-safe layouts, and palette + BEAT structure copied from real Devini Labs reels.
+allowed-tools: Bash, Read, Write, Edit, AskUserQuestion
+argument-hint: "[family] [--preset=<name>] [--name=<MyReel>] [--vo=<path.wav>]"
+homepage: https://reelstack.dev
+repository: https://github.com/devinilabs/reelstack
+license: Commercial (see LICENSE in package)
+user-invocable: true
+---
+
+# ReelStack — Premium 9:16 Reel OS for Remotion
+
+ReelStack packages the **Devini Labs reel aesthetic** — five cinematic style families, twenty-two production-tested presets, a whisper-locked audio pipeline, and a hand-tuned motion vocabulary — into a Claude Code skill plus a companion CLI installed at `~/.reelstack/`.
+
+When a `/reelstack-*` command fires, you scaffold a complete `<Name>Reel.tsx` Remotion composition: palette inlined, primitives imported, BEAT skeleton in place, IG safe zones reserved, and the new comp registered in `src/Root.tsx`. From scaffold to first preview render in under 60 seconds.
+
+> **License gate.** ReelStack is a paid product. If `~/.reelstack/.license` is missing, invalid, or older than 7 days, every command except `preview` short-circuits and tells the buyer to run `npx @devinilabs/reelstack init`. Each license activates up to 3 machines (rolling 30-day window).
+
+---
+
+## Design discipline & productivity influences
+
+ReelStack v1.1+ bakes in two outside influences so buyers don't think about taste at all — they just trigger a slash command and inherit curator-grade design + huashu-style productivity patterns:
+
+- **`leonxlnx/taste-skill`** (MIT) — design-discipline rules baked directly into ReelStack's components, palettes, and lint. Anti-emoji, font lockdown (Geist/Geist Mono only — Inter / Roboto / Helvetica banned), no pure `#000000`, max one accent per family at <80% saturation, hardware-accel-only animations (transform + opacity), spring-physics defaults, anti-AI-purple (`#7c3aed` family blocked), `prefers-reduced-motion` parity via the `reduceMotion` prop on every motion component, 4-px grid alignment, complete-output discipline. Per-family overlays: **Glass = Soft + General**, **Cream Paper = Minimalist + Soft**, **Dark Cinematic = Brutalist Tactical + General**, **Warm Signature = Minimalist + Soft**, **Forbidden = Brutalist Swiss Industrial**. Variant-specific components shipped: `<GlassCardBezel />` (Soft Double-Bezel), `<Scanlines />` (Brutalist Tactical CRT), `<NewsprintTexture />` (Brutalist Swiss substrate), `<EditorialSerifText />` (Minimalist serif hero).
+- **`alchaincyf/huashu-design`** (Personal Use Only — pattern inspiration only, no code/text copied) — productivity-UX patterns adapted to Remotion. Implemented as: `/reelstack-direction "<brief>"` (Design Direction Advisor: 3 family picks for vague briefs), `/reelstack-lint <file> --critique` (5-dimension expert critique radar), `/reelstack-render --format=mp4,gif --bgm=<path> --interpolate=60` (multi-format + BGM + 60fps interpolation), pre-render frame-smoke check (verifies frame 0 / mid / last aren't all-black before rendering). The Warm Signature family's `huashu` preset is named for AlchainHust's project — natural credit hook.
+
+The full influence map and rule citations live at `~/.reelstack/docs/design-discipline.md`.
+
+---
+
+## Reference reels (v1.1.1+)
+
+ReelStack ships **12 reference reels** at `~/.reelstack/reference/<family>/<preset>.tsx` — production-tested Devini Labs reels with asset imports stripped (look for `REFERENCE-STRIP` markers). Use them as canonical examples of each family's motion vocabulary when scaffolding or iterating.
+
+| Family | References available |
+|---|---|
+| Glass Iridescent | graphify · paperclip · claudewatch |
+| Cream Paper | justdrop · opus · designreel |
+| Dark Cinematic | stitch · claudedispatch · notebooklm |
+| Warm Signature | huashu · mempalace |
+| Forbidden | heretic |
+
+**When you (Claude) scaffold a reel:**
+1. After the CLI scaffolds the file, check `~/.reelstack/reference/<family>/<preset>.tsx`.
+2. If it exists, READ it before answering any "make my reel feel more like X" follow-up.
+3. Use its JSX scene composition as a model — same primitives, same BEAT spacing, same camera moves.
+4. Quote specific scene names ("the RevealScene in graphify uses…") when explaining design choices to the buyer.
+
+**Buyer-facing usage:**
+- `/reelstack-glass --preset=graphify` automatically references `glass/graphify.tsx`.
+- `/reelstack-glass --preset=graphify --reference=claudewatch` overrides to use ClaudeWatchReel as the iteration model.
+- See `~/.reelstack/docs/design-discipline.md` for the full pattern catalog.
+
+**Reference license:** study + adapt patterns OK. Verbatim re-publication as your own paid template NOT OK. See LICENSE.
+
+---
+
+## When to invoke ReelStack
+
+Trigger this skill when the user:
+
+- Runs any of the 11 `/reelstack-*` slash commands.
+- Asks to "scaffold a reel", "make a 9:16 video", "build an Instagram/TikTok/Shorts/YouTube Shorts reel".
+- Names one of the 5 style families: **Glass Iridescent**, **Cream Paper**, **Dark Cinematic**, **Warm Signature**, **Forbidden**.
+- Names one of the 22 presets: **Glass** (graphify, paperclip, gstack, lilagents, jcode, claudewatch, claudewatchcta), **Paper** (justdrop, opus, designreel, devini3d), **Dark** (stitch, stitch2, codedrop, claudedispatch, notebooklm, gpt55, resourcescta, skills), **Warm** (huashu, mempalace), **Forbidden** (heretic).
+- Asks to convert a voiceover into BEAT constants, or "lock motion to audio".
+- Asks to render a reel for IG, TikTok, or Shorts with the right encode flags.
+- Asks to validate a reel against IG safe zones / motion floors / hero-text fit.
+
+**Do not invoke** for 16:9 YouTube content (out of scope in v1.0), generic Remotion questions unrelated to reels, or non-Remotion video work.
+
+---
+
+## The 13 slash commands
+
+| Command | What it does |
+|---|---|
+| `/reelstack-glass` | Scaffold a **Glass Iridescent** reel. Light lavender + iridescent particles. Presets: claudewatch (default), graphify, paperclip, gstack, lilagents, jcode, claudewatchcta. |
+| `/reelstack-paper` | Scaffold a **Cream Paper** reel. Warm cream + dark-green cards. Presets: justdrop (default), opus, designreel, devini3d. |
+| `/reelstack-dark` | Scaffold a **Dark Cinematic** reel. Zinc void + drifting spotlights. Presets: claudedispatch (default), stitch, stitch2, codedrop, notebooklm, gpt55, resourcescta, skills. |
+| `/reelstack-warm` | Scaffold a **Warm Signature** reel. Single-accent rule, amber signature. Presets: huashu (default), mempalace. |
+| `/reelstack-forbidden` | Scaffold a **Forbidden** reel. Cream-rose + ember + crimson. Preset: heretic (auto-defaults silently — only one preset). |
+| `/reelstack-init` | First-time setup. License verify, ffmpeg + whisper-cpp dependency check, scaffold a starter Demo.tsx. |
+| `/reelstack-direction "<brief>"` | Design Direction Advisor — return 3 differentiated family picks for a vague brief (one-sentence input). |
+| `/reelstack-beats <vo.wav>` | Run whisper-cli on a voiceover and print frame-accurate `BEAT` constants ready to paste. |
+| `/reelstack-capture <url>` | Wrap the user's existing reel-capture skill to grab product screenshots into `public/captures/`. |
+| `/reelstack-icons <brand>` | Wrap better-icons CLI to fetch real brand SVGs (logos:react, logos:next-js, etc.) into `public/icons/`. |
+| `/reelstack-render <id> [--platform=ig\|tiktok\|shorts]` | Render with platform-optimal H.264 / bitrate / color flags + IG safe-zone validation. |
+| `/reelstack-lint <file>` | Validate motion floors (≥4 layers in opener, ≥3 in anchors), IG safe zones, hero-text fit, audio lock. |
+| `/reelstack-critique <file>` | 5-dimension expert critique radar (palette · motion · timing · hierarchy · brand fit) + Keep/Fix/Quick punch list. |
+
+### Slash-command flow (every family command)
+
+1. **Verify license first** by running `node ~/.reelstack/cli/index.js --verify` and checking exit code. If non-zero, print: *"ReelStack license missing or expired. Run `npx @devinilabs/reelstack init` to activate."* and stop.
+2. **If `--preset` is missing**, present the family-specific preset menu defined in each command stub (`~/.claude/commands/reelstack-<family>.md`). Every menu lists the family's presets with one-line use-cases and marks the recommended default. Print the menu verbatim, wait for the buyer's reply (number or preset key), and map to the canonical preset before continuing. **Forbidden auto-defaults to `heretic`** with a one-line confirmation — no menu, since it has only one preset.
+3. **If `--name` or `--vo` is missing**, ask the user via `AskUserQuestion`.
+4. **Shell to the scaffolder:**
+   ```bash
+   node ~/.reelstack/cli/index.js scaffold \
+     --family=<family> \
+     --preset=<preset> \
+     --name=<Name> \
+     [--vo=<path>]
+   ```
+5. **Surface the reference doc.** Read `~/.reelstack/docs/family-galleries/<family>.md` and print: palette swatches, primitive list, motion vocabulary, "must-have" rules. (This is the recall-by-slash-command behavior the buyer paid for.)
+6. **Read the reference reel** if `~/.reelstack/reference/<family>/<preset>.tsx` exists — internalize its JSX scene composition, BEAT timing, and motion choreography for any iteration follow-ups.
+7. **Offer Studio.** Ask: *"Open Remotion Studio now? (Y/n)"* — if yes, run `npm run dev` in the user's CWD (background).
+
+---
+
+## Family taxonomy
+
+Each family declares a palette, a set of primitives, a recommended frame range, and the rules that make it feel coherent. Presets within a family share these foundations and differ only in palette accents, frame count, and BEAT structure.
+
+### Glass Iridescent — `~/.reelstack/families/glass/`
+
+- **Palette base.** Lavender cream `#EFEAF2` background, iridescent stops cyan `#7FE8D4` · violet `#8B7FE8` · rose `#E89BC4` · gold `#F2D88F`.
+- **Primitives.** `CausticBlobs`, `HairlineGrid`, `GlassCard`, `EyebrowPill`, `StaggeredWords`, `Counter`, `SonarRings`, `ParticleBurst`, `LightBeam`, `FloatingGlyphs`.
+- **Presets.** graphify (1956f) · paperclip (1650f) · gstack (2820f) · lilagents (2160f) · jcode (2164f) · claudewatch (3156f) · claudewatchcta (240f).
+- **Mood.** Premium product reveal. Underwater-light caustics, glass surfaces, iridescent text shimmer.
+- **House rules.** Glass cards always over textured background (caustics + grid). Floating glyphs use unicode math symbols only — **no emojis ever**.
+
+### Cream Paper — `~/.reelstack/families/paper/`
+
+- **Palette base.** Cream `#f0ede8`, dark-green cards `#1e3a27`, Claude terracotta accent `#D4663A`, paper grid `#e5e2dd`.
+- **Primitives.** `CardSpring`, `ScaleBlurText`, `CreamGrid`, `GreenAccentCard`, `PaperShadow`.
+- **Presets.** justdrop (1760f) · opus (3330f) · designreel (300f) · devini3d (1170f).
+- **Mood.** Editorial print. Warm, document-like, with depth in the dark-green card stack.
+- **House rules.** Light text on cream is `#1a1a1a` heading / `#2d2d2d` body / `#6b6b6b` muted. Card springs use damping 20, stiffness 200.
+
+### Dark Cinematic — `~/.reelstack/families/dark/`
+
+- **Palette base.** Zinc void `#0a0a0b` (lifted `#141416`), Claude terracotta `#D4663A`, semantic accents (danger `#e25822`, safe `#4fc46a`).
+- **Primitives.** `DriftingSpotlights`, `RadialVignette`, `SegmentOpacity` (the `so()` helper), `Crossfade`, `GridBackground`.
+- **Presets.** stitch (2297f) · stitch2 (600f) · codedrop (1110f) · claudedispatch (2220f) · notebooklm (1680f) · gpt55 (2900f) · resourcescta (210f) · skills (1260f).
+- **Mood.** Premium ad-film, late-night mood, mood-lit cards. Multi-brand accents allowed (NotebookLM blue, Stitch rose).
+- **House rules.** Crossfades always 0.45s in / 0.55s out. Drifting spotlights at 0.003–0.004 sine drift. Each scene declared as an entry in a `SEGS` array.
+
+### Warm Signature — `~/.reelstack/families/warm/`
+
+- **Palette base.** Warm zinc `#1a1610`, amber `#f99c00` (signature), emerald payoff `#00d294`, red wall `#ef4444`.
+- **Primitives.** `BentoGrid`, `AccentGlow`, `ScaleBlurCounter`, `FilmGrain`, `WarmSurface`.
+- **Presets.** huashu (2984f) · mempalace (2520f, parchment-gold variant).
+- **Mood.** Confident product launch. Strict single-accent rule.
+- **House rules.** Exactly **one primary accent** (amber) with one payoff (emerald) and one negative (red). No other hues. Bento grids for feature matrices.
+
+### Forbidden — `~/.reelstack/families/forbidden/`
+
+- **Palette base.** Cream-rose paper `#F2EBE5`, ember `#D97757`, crimson `#C4506B`, ultraviolet `#6B5BD9`, plasma `#A87FE8`.
+- **Primitives.** Inherits from Glass (`CausticBlobs`, `GlassCard`, `EyebrowPill`, etc.) but with tinted shadows for cream backgrounds.
+- **Presets.** heretic (1639f).
+- **Mood.** Forbidden, mysterious, slightly off-kilter. Desaturated palette suggests something declassified.
+- **House rules.** Shadows tinted with rose-purple (`rgba(120,80,120,…)`) instead of pure black. No iridescent gold (gold is for Glass).
+
+> Full palette tokens, BEAT structures, and per-preset specs live in `~/.reelstack/docs/family-galleries/<family>.md`. Read those when a slash command fires — they are the reference the buyer paid for.
+
+---
+
+## House pipeline (every reel inherits these rules)
+
+1. **IG safe zones.** Every scaffold reserves the top 280 px and bottom 422 px of the 1920 px canvas. Hero copy and CTAs stay between these bands. The `<SafeZones />` overlay component (off in production, on during dev) shows the reserved bands as a 5%-opacity tint.
+2. **Motion floors.** Opener (frames 0–180) needs **≥ 4 simultaneous motion layers**. Anchor scenes (CTA, stat reveal, hero turn) need **≥ 3**. `reelstack lint` enforces this.
+3. **Audio lock.** Voiceover beats come from `whisper-cli` SRT, never eyeballed. `/reelstack-beats` runs `ffmpeg → 16 kHz mono → whisper-cli → SRT → BEAT` constants. Empirical drift on 90-second clips when eyeballed: 6+ seconds. Audio lock is non-negotiable.
+4. **Hero text fit.** 5-digit MONO counters cap at 256 px width. Counter and caption sit on separate vertical bands (baseline + gap). Wrapped text scales down before it overflows.
+5. **Sequence timing.** When a scene starts mid-composition with `<OffthreadVideo>`, wrap it in `<Sequence from={X}>`. Inside the Sequence, `useCurrentFrame()` returns LOCAL frames — don't subtract X.
+6. **Real brand assets.** Tech logos pulled via `better-icons get logos:<brand> > public/icons/<brand>.svg`. Never hand-draw a brand mark.
+7. **GSAP vocabulary.** Easings (`power4Out`, `expoOut`, `backOut`, `bouncy`, `gentle`) live in `~/.reelstack/utils/easing.ts` and are exposed to every scaffold. Spring configs match design-system.md (snappy, gentle, bouncy, glass).
+
+The lint command (`/reelstack-lint <file>`) statically analyzes a scaffolded reel and reports violations of rules 1, 2, 4, and 6. Rules 3 and 5 are enforced at scaffold time.
+
+---
+
+## Companion CLI surface (~/.reelstack/cli/index.js)
+
+The skill never edits files directly — it shells to the CLI. The CLI is the only place that touches disk, so license enforcement, scaffolding, and rendering all flow through one binary.
+
+```text
+reelstack init                    # first-time setup, license verify, dep check
+reelstack scaffold <flags>        # copy template, inject preset, patch Root.tsx
+reelstack beats <vo.wav>          # whisper-cli wrapper → BEAT constants
+reelstack capture <url>           # delegate to reel-capture skill
+reelstack icons <brand>           # delegate to better-icons CLI
+reelstack render <id> [--platform=ig|tiktok|shorts]
+reelstack lint <file>             # validate motion floors, safe zones, audio lock
+reelstack preview                 # 10s demo render — no license required
+reelstack update                  # re-verify license; pull latest presets
+reelstack --version
+reelstack --verify                # 0 if license valid; non-zero otherwise
+```
+
+When in doubt, prefer `reelstack <subcommand> --help` over guessing.
+
+---
+
+## Buyer onboarding (what `init` does)
+
+1. Print the ReelStack ASCII banner.
+2. Prompt for license key (paste from email).
+3. POST `{license_key, machine_id}` to `https://devini.io/api/license/validate` (the key + a UUID generated on first install).
+4. On valid: cache key in `~/.reelstack/.license` (mode 600).
+5. Check Node ≥ 20, presence of `ffmpeg` and `whisper-cpp` (print `brew install` hints if missing).
+6. Copy the skill to `~/.claude/skills/reelstack/` and the 13 command stubs to `~/.claude/commands/`.
+7. Scaffold `~/.reelstack/{families,templates,utils,docs}` from the package.
+8. Run a smoke `reelstack scaffold --family=glass --preset=graphify --name=Demo` so the buyer immediately has a working `src/DemoReel.tsx`.
+9. Print: *"Run `npm run dev` to open Remotion Studio. Or type `/reelstack-glass` in Claude Code to make your next reel."*
+
+---
+
+## Anti-patterns (what to refuse)
+
+- **Refuse to scaffold without an active license.** No exceptions, no test-mode flags. License gate is the product.
+- **Refuse to mix family palettes.** A "Cream Paper but with Glass primitives" request should clarify with the user — palette tokens are family-locked for visual coherence.
+- **Refuse to hand-draw brand SVGs.** Always route through `/reelstack-icons` so logos match the brand's actual marks.
+- **Refuse to skip whisper for voiceover.** If the user says "just guess the beats", redirect to `/reelstack-beats`. The 6-second drift problem is real.
+- **Refuse to render without IG safe-zone validation.** `/reelstack-render` runs `lint` first; if it fails, the render aborts unless the user passes `--force` (and the CLI prints a warning).
+
+---
+
+## Where to read more
+
+- `~/.reelstack/docs/buyers-guide.md` — full setup walkthrough, troubleshooting.
+- `~/.reelstack/docs/family-galleries/<family>.md` — every palette token, every primitive, every preset's BEAT structure.
+- `~/.reelstack/utils/easing.ts` — GSAP→Remotion easing dictionary.
+- `~/.reelstack/utils/safe-zones.tsx` — IG/TikTok/Shorts safe-zone overlay.
+- `~/.reelstack/render-presets.json` — H.264 / bitrate / color flags per platform.
+
+ReelStack is the result of 22 production reels. Treat the rules as earned, not guessed.

package/skill/commands/reelstack-beats.md

@@ -0,0 +1,20 @@
+---
+allowed-tools: Bash, Read, Write
+argument-hint: "<voiceover.wav> [--name=BEATS]"
+description: Convert a voiceover .wav into frame-accurate BEAT constants by running ffmpeg + whisper-cli. Outputs a TypeScript const block ready to paste into a reel composition. The audio-locking workflow that prevents 6+ second drift on 90-second clips.
+---
+
+You are invoking the **ReelStack** skill in **beats** mode.
+
+This is the workflow that makes ReelStack reels feel professional — voiceover beats locked frame-accurately to whisper SRT, never eyeballed.
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`. If non-zero, refuse with the standard `init` CTA.
+2. Parse the input: `<voiceover.wav>` must be the first argument. If missing, ask the user for the path via `AskUserQuestion`.
+3. Shell to: `node ~/.reelstack/cli/index.js beats <path/to/vo.wav>`. The CLI will:
+   - Resample to 16 kHz mono via `ffmpeg -i $vo -ar 16000 -ac 1 -c:a pcm_s16le /tmp/v16k.wav`.
+   - Run `whisper-cli -m /tmp/ggml-base.en.bin -f /tmp/v16k.wav --output-srt -of /tmp/out`.
+   - Parse `/tmp/out.srt` and emit a TypeScript `const BEATS = { … }` block keyed by phrase → frame number (frames = `Math.round(seconds * 30)`).
+4. Surface the const block in the chat for the user to paste into their reel.
+5. **Important caveat to surface:** whisper base.en mishears tech jargon ("Claude" → "Cloud", "Remotion" → "Re-motion"). Tell the user: *"Use these timings frame-for-frame, but copy the on-screen text from your script — don't trust whisper's transcription for tech terms."*
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-capture.md

@@ -0,0 +1,24 @@
+---
+allowed-tools: Bash, Read, Write
+argument-hint: "<url> [--scroll] [--name=<slug>]"
+description: Capture product screenshots or scroll-recordings from a URL into public/captures/<slug>/ for use in a reel scene. Wraps the user's existing reel-capture skill with ReelStack's slug + asset conventions.
+---
+
+You are invoking the **ReelStack** skill in **capture** mode.
+
+ReelStack delegates this to the user's existing `reel-capture` skill but enforces ReelStack's asset conventions.
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`.
+2. If `<url>` is missing, ask the user.
+3. Shell to: `node ~/.reelstack/cli/index.js capture <url> [--scroll] [--name=<slug>]`. The CLI:
+   - Validates the URL (no localhost / file:// / private IPs unless `--allow-local`).
+   - Activates the user's `reel-capture` skill via the `Skill` tool to drive the chrome-devtools MCP.
+   - Saves output under `public/captures/<slug>/` with conventional filenames: `hero.png` for stills, `frame_0001.png … frame_NNNN.png` for scroll recordings.
+4. Print a wiring snippet the user can paste into their reel:
+   ```tsx
+   import {staticFile} from "remotion";
+   <Img src={staticFile("captures/<slug>/hero.png")} style={{...}} />
+   ```
+5. **Never auto-edit** `src/<Name>Reel.tsx` — capture only writes assets. Wiring is the user's call.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-critique.md

@@ -0,0 +1,15 @@
+---
+allowed-tools: Bash, Read
+argument-hint: "<src/MyReel.tsx>"
+description: Run a 5-dimension expert critique on a reel — palette · motion · timing · hierarchy · brand fit. Outputs a radar score plus Keep/Fix/Quick punch list. Inspired by alchaincyf/huashu-design's 5-dimension expert critique pattern. Use this when /reelstack-lint passes but you want a deeper qualitative review.
+---
+
+You are invoking ReelStack's **Critique** mode.
+
+Flow:
+
+1. Verify license.
+2. Shell to: `node ~/.reelstack/cli/index.js lint <file> --critique`. Surface the radar + punch list verbatim.
+3. Offer to apply the "Quick" fixes (small ones — padding alignment, etc.) by editing the file directly. Always ask before editing.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-dark.md

@@ -0,0 +1,40 @@
+---
+allowed-tools: Bash, Read, Write, Edit, AskUserQuestion
+argument-hint: "[--preset=stitch|stitch2|codedrop|claudedispatch|notebooklm|gpt55|resourcescta|skills] [--name=<MyReel>] [--vo=<path.wav>]"
+description: Scaffold a Dark Cinematic 9:16 reel — zinc void + drifting spotlights + Claude terracotta + multi-brand accents. Premium ad-film mood. Presets carry exact palette and BEAT structure of StitchReel, Stitch2Reel, CodeDropReel, ClaudeDispatchReel, NotebookLMReel, GPT55Reel, ResourcesCTAReel, or SkillsReel.
+---
+
+You are invoking the **ReelStack** skill in **Dark Cinematic** mode.
+
+Follow the slash-command flow described in `~/.claude/skills/reelstack/SKILL.md`:
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`. If non-zero, refuse and direct the user to `npx @devinilabs/reelstack init`.
+
+2. **If `--preset` is missing from `$ARGUMENTS`**, print the menu below verbatim and wait for the user's reply. Map their reply (number or preset key) to the canonical preset key. If they're unsure, recommend `claudedispatch`.
+
+   ```
+   You're scaffolding a Dark Cinematic reel. Pick the preset that fits:
+
+     1. claudedispatch (default) — Insider/secret reveal. Dispatch workflow with ForestCard surfaces.
+     2. stitch                   — Multi-brand workflow showcase. Agent unlock narrative.
+     3. stitch2                  — 20-second clip-led teaser. Title lift over hero video.
+     4. codedrop                 — Screen-rec overlay format. 30–40s tutorial reel.
+     5. notebooklm               — Integration reveal. Memory/RAG narrative.
+     6. gpt55                    — Long-form competitive thesis. Half-step narrative.
+     7. resourcescta             — 7-second outro / footer CTA.
+     8. skills                   — Bento-grid feature/category showcase.
+
+   Reply with the number (1–8) or the preset key.
+   ```
+
+3. **If `--name` or `--vo` is missing**, ask via `AskUserQuestion`.
+
+4. Shell to: `node ~/.reelstack/cli/index.js scaffold --family=dark --preset=<preset> --name=<Name> [--vo=<path>]`.
+
+5. Print the family reference doc from `~/.reelstack/docs/family-galleries/dark.md`: palette (zinc `#0a0a0b`, terracotta `#D4663A`, semantic accents), primitives (DriftingSpotlights, RadialVignette, SegmentOpacity `so()`, Crossfade, GridBackground), and crossfade timing (0.45s in / 0.55s out).
+
+6. **Read the reference reel.** After scaffolding, check whether `~/.reelstack/reference/dark/<preset>.tsx` exists. If yes, READ it. Internalize the JSX scene composition, BEAT timing, and motion choreography. When the buyer asks for iteration help ("add a reveal scene like…", "make this section punchier", etc.), cite specific scenes from the reference reel ("ClaudeDispatch's ForestCard reveal at frame 90 layers a RadialVignette + DriftingSpotlights — let's mirror that").
+
+7. Offer to launch Remotion Studio.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-direction.md

@@ -0,0 +1,17 @@
+---
+allowed-tools: Bash, Read, AskUserQuestion
+argument-hint: "\"<brief>\""
+description: When the buyer's brief is vague, return 3 differentiated family picks with reasoning. Inspired by alchaincyf/huashu-design's Design Direction Advisor pattern. Useful as a fallback before scaffolding when the buyer doesn't know which family fits their content.
+---
+
+You are invoking ReelStack's **Design Direction Advisor**.
+
+Flow:
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`. If non-zero, refuse and direct the user to `npx @devinilabs/reelstack init`.
+2. If `$ARGUMENTS` is empty, ask the user via `AskUserQuestion`: "What's your reel about? Describe in one sentence — product launch, partnership reveal, thesis essay, etc."
+3. Shell to: `node ~/.reelstack/cli/index.js direction "<brief>"`. Surface the three family picks output verbatim.
+4. Ask the user which family they pick (1, 2, or 3, or "custom").
+5. If they pick, fire the matching slash command (`/reelstack-<family>`). If "custom", let them choose a different family.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-forbidden.md

@@ -0,0 +1,25 @@
+---
+allowed-tools: Bash, Read, Write, Edit, AskUserQuestion
+argument-hint: "[--preset=heretic] [--name=<MyReel>] [--vo=<path.wav>]"
+description: Scaffold a Forbidden 9:16 reel — cream-rose paper + ember + crimson + ultraviolet + plasma. Desaturated, mysterious, slightly off-kilter. Preset carries exact palette and BEAT structure of HereticReel.
+---
+
+You are invoking the **ReelStack** skill in **Forbidden** mode.
+
+Follow the slash-command flow described in `~/.claude/skills/reelstack/SKILL.md`:
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`. If non-zero, refuse and direct the user to `npx @devinilabs/reelstack init`.
+
+2. **If `--preset` is missing from `$ARGUMENTS`**, silently default to `heretic` (the only Forbidden preset at v1.1.1). Print a one-line confirmation: *"Scaffolding with the `heretic` preset (only Forbidden preset at v1.1.1)."* and continue. Do **not** prompt the buyer with a menu — there's no choice to make. Future v1.x releases may add more Forbidden presets, at which point this stub will introduce a menu.
+
+3. **If `--name` or `--vo` is missing**, ask via `AskUserQuestion`.
+
+4. Shell to: `node ~/.reelstack/cli/index.js scaffold --family=forbidden --preset=heretic --name=<Name> [--vo=<path>]`.
+
+5. Print the family reference doc from `~/.reelstack/docs/family-galleries/forbidden.md`: palette (cream-rose paper `#F2EBE5`, ember `#D97757`, crimson `#C4506B`, ultraviolet `#6B5BD9`, plasma `#A87FE8`), primitives (Glass family inherited but with rose-purple tinted shadows `rgba(120,80,120,…)`), and the **no-iridescent-gold** rule (gold belongs to Glass; Forbidden is desaturated).
+
+6. **Read the reference reel.** After scaffolding, check whether `~/.reelstack/reference/forbidden/heretic.tsx` exists. If yes, READ it. Internalize the JSX scene composition, BEAT timing, and motion choreography. When the buyer asks for iteration help ("add a reveal scene like…", "make this section punchier", etc.), cite specific scenes from the reference reel ("HereticReel's caustic-multiply background at frame 0 + crimson EyebrowPill at frame 24 — let's mirror that").
+
+7. Offer to launch Remotion Studio.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-glass.md

@@ -0,0 +1,39 @@
+---
+allowed-tools: Bash, Read, Write, Edit, AskUserQuestion
+argument-hint: "[--preset=graphify|paperclip|gstack|lilagents|jcode|claudewatch|claudewatchcta] [--name=<MyReel>] [--vo=<path.wav>]"
+description: Scaffold a Glass Iridescent 9:16 reel — light lavender + iridescent caustics, sonar rings, glass cards, floating glyphs. Presets carry exact palette and BEAT structure of GraphifyReel, PaperclipReel, GstackReel, LilAgentsReel, JcodeReel, ClaudeWatchReel, or ClaudeWatchCTAReel.
+---
+
+You are invoking the **ReelStack** skill in **Glass Iridescent** mode.
+
+Follow the slash-command flow described in `~/.claude/skills/reelstack/SKILL.md`:
+
+1. Verify the license by running `node ~/.reelstack/cli/index.js --verify`. If exit code is non-zero, refuse and tell the user to run `npx @devinilabs/reelstack init`.
+
+2. **If `--preset` is missing from `$ARGUMENTS`**, print the menu below verbatim and wait for the user's reply. Map their reply (number or preset key) to the canonical preset key before continuing. If they're unsure, recommend `claudewatch`.
+
+   ```
+   You're scaffolding a Glass Iridescent reel. Pick the preset that fits:
+
+     1. claudewatch (default) — Long-form skill drop with technical breakdown (~105s).
+     2. graphify              — Premium product/SaaS reveal. Strongest motion-floor budget (~65s).
+     3. paperclip             — Open-source MIT product launch. Dash-offset glyph reveal (~55s).
+     4. gstack                — Long-form toolkit launch (~94s). Heavy GlassCard variant.
+     5. lilagents             — Character-driven mascot reveal. Local privacy-first tools (~72s).
+     6. jcode                 — Performance/benchmark narrative. Rust rebuild reveal (~72s).
+     7. claudewatchcta        — 8-second standalone CTA outro.
+
+   Reply with the number (1–7) or the preset key.
+   ```
+
+3. **If `--name` or `--vo` is missing**, ask via `AskUserQuestion`. The voiceover path can be left empty if the user hasn't recorded yet — they'll add it before running `/reelstack-beats`.
+
+4. Shell to: `node ~/.reelstack/cli/index.js scaffold --family=glass --preset=<preset> --name=<Name> [--vo=<path>]`.
+
+5. Print the family reference doc: read `~/.reelstack/docs/family-galleries/glass.md` and surface palette swatches, primitive list (CausticBlobs, HairlineGrid, GlassCard, EyebrowPill, StaggeredWords, Counter, SonarRings, ParticleBurst, LightBeam, FloatingGlyphs), and the family's house rules.
+
+6. **Read the reference reel.** After scaffolding, check whether `~/.reelstack/reference/glass/<preset>.tsx` exists. If yes, READ it. Internalize the JSX scene composition, BEAT timing, and motion choreography. When the buyer asks for iteration help ("add a reveal scene like…", "make this section punchier", etc.), cite specific scenes from the reference reel ("RevealScene in graphify uses three layered SonarRings + a ParticleBurst at frame 28 — let's mirror that").
+
+7. Offer to launch Remotion Studio: ask "Open Remotion Studio now? (Y/n)" — if yes, run `npm run dev` in the user's CWD.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-icons.md

@@ -0,0 +1,22 @@
+---
+allowed-tools: Bash, Read, Write
+argument-hint: "<brand> [<brand2> …]"
+description: Pull real brand SVGs from Iconify via the better-icons CLI into public/icons/. Use when a reel references a real product (logos:react, logos:next-js, logos:google, etc.) — never hand-draw brand marks.
+---
+
+You are invoking the **ReelStack** skill in **icons** mode.
+
+Real brand assets are a non-negotiable house rule. Never hand-draw a logo when the actual SVG exists in Iconify.
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`.
+2. If `<brand>` is missing, ask the user which brands they need.
+3. Shell to: `node ~/.reelstack/cli/index.js icons <brand> [<brand2> …]`. The CLI:
+   - For each brand, run `better-icons get logos:<brand> > public/icons/<brand>.svg`.
+   - If `logos:<brand>` doesn't exist on Iconify, fall back to `better-icons search <brand>` and ask the user to pick.
+4. Print the staticFile() wiring snippet for each saved icon:
+   ```tsx
+   <Img src={staticFile("icons/react.svg")} style={{width: 96, height: 96}} />
+   ```
+5. Common brand IDs to know: `logos:react`, `logos:next-js`, `logos:google`, `logos:openai`, `logos:anthropic-icon`, `logos:github-icon`, `logos:remotion`, `logos:vercel-icon`, `logos:typescript-icon`.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-init.md

@@ -0,0 +1,17 @@
+---
+allowed-tools: Bash, Read, Write, AskUserQuestion
+argument-hint: ""
+description: First-time ReelStack setup. Verifies the license, checks Node 20+ / ffmpeg / whisper-cpp dependencies, scaffolds ~/.reelstack/, installs the skill at ~/.claude/skills/reelstack/, and creates a Demo.tsx so the buyer sees a working reel within 5 minutes.
+---
+
+You are invoking the **ReelStack** skill in **init** mode.
+
+This is the buyer's first contact. Be welcoming, polished, and guided.
+
+1. Run `node ~/.reelstack/cli/index.js init` — the CLI handles the actual flow: ASCII banner, license prompt, devini.io validate API call (with machine_id activation tracking), dependency check, scaffold of `~/.reelstack/{families,templates,utils,docs}`, install of the skill at `~/.claude/skills/reelstack/`, install of the 13 command stubs at `~/.claude/commands/`.
+2. If the CLI exits non-zero on license validation, surface its message verbatim. Do not retry silently.
+3. If the CLI reports missing `ffmpeg` or `whisper-cpp`, print the brew install commands and offer to run them — but **ask first** before any `brew install` (system modification).
+4. After successful init, the CLI auto-runs a smoke `scaffold --family=glass --preset=graphify --name=Demo`. Confirm `src/DemoReel.tsx` exists and was registered in `src/Root.tsx`.
+5. Tell the user: *"ReelStack is ready. Run `npm run dev` to see your demo reel, or type `/reelstack-glass` (or `/reelstack-paper`, `/reelstack-dark`, `/reelstack-warm`, `/reelstack-forbidden`) to make your next one."*
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-lint.md

@@ -0,0 +1,22 @@
+---
+allowed-tools: Bash, Read
+argument-hint: "<src/MyReel.tsx>"
+description: Validate a reel against ReelStack house rules — motion floors (≥4 layers in opener, ≥3 in anchor scenes), IG safe zones (top 280px, bottom 422px), hero-text fit (5-digit counter ≤ 256px), audio lock (BEAT constants present and sourced from whisper SRT). The killer feature most worth paying for.
+---
+
+You are invoking the **ReelStack** skill in **lint** mode.
+
+This is the discipline layer. Most AI-generated reels violate at least three of these rules silently.
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`.
+2. If `<file>` is missing, ask the user which file to lint.
+3. Shell to: `node ~/.reelstack/cli/index.js lint <file>`. The CLI statically analyzes the source and reports:
+   - **Safe zones.** Any `<Img>`, `<Sequence>`, or text element whose bounding box overlaps the reserved bands (top 0–280, bottom 1498–1920) without `data-reelstack-safe-override`.
+   - **Motion floors.** Scenes (Sequences) with fewer than 3 simultaneous animation layers. Opener (frames 0–180) flagged at < 4.
+   - **Hero text fit.** `<Counter>` or `<HeroText>` elements whose computed width exceeds the canvas width minus 64 px gutter.
+   - **Audio lock.** If the file imports `<Audio>` but defines no `BEAT` const block, flag as "audio present, motion not locked".
+   - **Brand assets.** Inline `<svg>` paths > 200 chars in a logo-shaped element flagged as "likely hand-drawn — use /reelstack-icons instead".
+4. Surface the violation list with line numbers.
+5. Offer: *"Want me to fix these? I can scaffold the missing motion layers, move overflowing text below the safe zone, and run /reelstack-beats if no audio lock exists."* — wait for explicit user confirmation before making any edits.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-paper.md

@@ -0,0 +1,36 @@
+---
+allowed-tools: Bash, Read, Write, Edit, AskUserQuestion
+argument-hint: "[--preset=justdrop|opus|designreel|devini3d] [--name=<MyReel>] [--vo=<path.wav>]"
+description: Scaffold a Cream Paper 9:16 reel — warm cream paper, dark-green cards, Claude terracotta accent, editorial print mood. Presets carry exact palette and BEAT structure of JustDropReel, OpusReel, DesignReel, or Devini3DReel.
+---
+
+You are invoking the **ReelStack** skill in **Cream Paper** mode.
+
+Follow the slash-command flow described in `~/.claude/skills/reelstack/SKILL.md`:
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`. If non-zero, refuse and direct the user to `npx @devinilabs/reelstack init`.
+
+2. **If `--preset` is missing from `$ARGUMENTS`**, print the menu below verbatim and wait for the user's reply. Map their reply (number or preset key) to the canonical preset key. If they're unsure, recommend `justdrop`.
+
+   ```
+   You're scaffolding a Cream Paper reel. Pick the preset that fits:
+
+     1. justdrop (default)   — Skill ecosystem launch. "Missing the point" reframe narrative.
+     2. opus                 — Long-form thesis-driven essay reel. Model launch (100s+).
+     3. designreel           — 10-second tagline-driven design tool teaser.
+     4. devini3d             — Clip-driven case study with motion-graphics close.
+
+   Reply with the number (1–4) or the preset key.
+   ```
+
+3. **If `--name` or `--vo` is missing**, ask via `AskUserQuestion`.
+
+4. Shell to: `node ~/.reelstack/cli/index.js scaffold --family=paper --preset=<preset> --name=<Name> [--vo=<path>]`.
+
+5. Print the family reference doc from `~/.reelstack/docs/family-galleries/paper.md`: palette tokens (cream `#f0ede8`, dark-green cards `#1e3a27`, Claude terracotta `#D4663A`), primitives (CardSpring, ScaleBlurText, CreamGrid, GreenAccentCard, PaperShadow), and the spring configs (damping 20, stiffness 200).
+
+6. **Read the reference reel.** After scaffolding, check whether `~/.reelstack/reference/paper/<preset>.tsx` exists. If yes, READ it. Internalize the JSX scene composition, BEAT timing, and motion choreography. When the buyer asks for iteration help ("add a reveal scene like…", "make this section punchier", etc.), cite specific scenes from the reference reel ("the GreenCard stack in justdrop springs in at frame 60 — let's mirror that").
+
+7. Offer to launch Remotion Studio.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-render.md

@@ -0,0 +1,20 @@
+---
+allowed-tools: Bash, Read
+argument-hint: "<comp-id> [--platform=ig|tiktok|shorts] [--out=<path>] [--force]"
+description: Render a reel composition with platform-optimal flags (1080×1920 H.264, 8 Mbps for IG/TikTok, 9 Mbps for Shorts). Runs reelstack lint first; aborts on safe-zone or motion-floor violations unless --force is passed.
+---
+
+You are invoking the **ReelStack** skill in **render** mode.
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`.
+2. If `<comp-id>` is missing, ask the user. Default `--platform` is `ig`.
+3. Pre-render lint: shell to `node ~/.reelstack/cli/index.js lint src/<MatchingFile>.tsx` (the CLI infers the file from the comp ID via `Root.tsx`). If lint reports violations:
+   - Surface the violations to the user.
+   - Ask: *"Lint failed. Render anyway with `--force`? (y/N)"*
+   - If user declines, stop here.
+4. Shell to: `node ~/.reelstack/cli/index.js render <comp-id> [--platform=...] [--out=...] [--force]`. The CLI runs `npx remotion render` with the right flags from `render-presets.json`:
+   - **ig / tiktok:** 1080×1920, H.264, CRF 18, 8 Mbps target, audio AAC 192k.
+   - **shorts:** 1080×1920, H.264, CRF 17, 9 Mbps target, audio AAC 192k.
+5. On success, print the output path and the file size. Suggest the user preview the rendered MP4 before posting.
+
+User input: $ARGUMENTS

package/skill/commands/reelstack-warm.md

@@ -0,0 +1,36 @@
+---
+allowed-tools: Bash, Read, Write, Edit, AskUserQuestion
+argument-hint: "[--preset=huashu|mempalace] [--name=<MyReel>] [--vo=<path.wav>]"
+description: Scaffold a Warm Signature 9:16 reel — warm zinc + amber signature + emerald payoff + bento grids. Strict single-accent rule (one primary, one payoff, one negative — no other hues). Presets carry exact palette and BEAT structure of HuashuReel or MemPalaceReel (warm parchment variant).
+---
+
+You are invoking the **ReelStack** skill in **Warm Signature** mode.
+
+Follow the slash-command flow described in `~/.claude/skills/reelstack/SKILL.md`:
+
+1. Verify the license via `node ~/.reelstack/cli/index.js --verify`. If non-zero, refuse and direct the user to `npx @devinilabs/reelstack init`.
+
+2. **If `--preset` is missing from `$ARGUMENTS`**, print the menu below verbatim and wait for the user's reply. Map their reply (number or preset key) to the canonical preset key. If they're unsure, recommend `huashu`.
+
+   ```
+   You're scaffolding a Warm Signature reel. Pick the preset that fits:
+
+     1. huashu (default)   — Confident product/skill drop. Single-accent (amber) discipline.
+     2. mempalace          — Memory/learning narrative with parchment-gold variant.
+
+   Reply with the number (1–2) or the preset key.
+   ```
+
+3. **If `--name` or `--vo` is missing**, ask via `AskUserQuestion`.
+
+4. Shell to: `node ~/.reelstack/cli/index.js scaffold --family=warm --preset=<preset> --name=<Name> [--vo=<path>]`.
+
+5. Print the family reference doc from `~/.reelstack/docs/family-galleries/warm.md`: palette (warm zinc `#1a1610`, amber `#f99c00` signature, emerald `#00d294` payoff, red `#ef4444` wall), primitives (BentoGrid, AccentGlow, ScaleBlurCounter, FilmGrain, WarmSurface), and the **single-accent rule** (no other hues — enforce on lint).
+
+6. **Read the reference reel.** After scaffolding, check whether `~/.reelstack/reference/warm/<preset>.tsx` exists. If yes, READ it. Internalize the JSX scene composition, BEAT timing, and motion choreography. When the buyer asks for iteration help ("add a reveal scene like…", "make this section punchier", etc.), cite specific scenes from the reference reel ("the BentoGrid reveal in huashu staggers cells at 6-frame offsets with AccentGlow underneath — let's mirror that").
+
+7. Warn the user explicitly: *"Warm Signature uses ONE accent (amber). Do not introduce blues, purples, or pinks — they break the family contract."*
+
+8. Offer to launch Remotion Studio.
+
+User input: $ARGUMENTS