Skip to content
Development
Command

/feature-videos

Generate feature academy videos for a project using Remotion. Synthesizes agent memories into features doc, storyboard, voiceover, screenshots, and parallel video renders. Also generates academy + video gallery routes for the app.

From plugin
jat
24836 skills36 commands
Install
$ npx -y skills add joewinke/jat --agent claude-code

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/feature-videos

Context preview

What this command does when you run it.

Generate feature academy videos for a project using Remotion. Synthesizes agent memories into features doc, storyboard, voiceover, screenshots, and parallel video renders. Also generates academy + video gallery routes for the app.

Command definition

feature-videos.md
argument-hint: <projectId> [--dry-run] [--only <feature>] [--redo-storyboard] [--no-voice]

Generate feature academy videos for a project using Remotion. Synthesizes agent memories into features doc, storyboard, voiceover, screenshots, and parallel video renders. Also generates academy + video gallery routes for the app.

Feature Videos: Memories → Features → Storyboard → Screenshots → Voiceover → Videos → Routes

**Use this command when:**

  • A project is feature-complete and ready for client demo videos
  • You want to generate explainer/academy videos for each feature
  • You need a comprehensive features document synthesized from completed work

**What this does:** 1. Resolves the project and gathers context 2. **Features subagent** → reads all `.jat/memory/*.md` → writes `<projectId>-features.md` 3. **Storyboard subagent** → reads features doc → writes storyboard + remotion JSON configs + narration scripts 4. **Screenshot subagent** → starts dev server, captures real app UI for each feature 5. **Voiceover subagent** → sends narration scripts to ElevenLabs TTS → generates audio files 6. **Video subagents** (parallel) → one per feature → builds Remotion scenes with screenshots + audio → renders MP4 7. **Tour subagent** → combines best scenes into a master product tour video 8. **Routes subagent** → generates `/academy` articles + `/videos` gallery route from features doc 9. **Social cuts subagent** → generates 9:16 vertical + 15s short versions for each video

**Usage:**

/jat:feature-videos meadow              # Full pipeline
/jat:feature-videos meadow --dry-run    # Docs + configs only, no rendering
/jat:feature-videos meadow --only auth  # Re-render just one feature video
/jat:feature-videos meadow --redo-storyboard  # Regenerate storyboard from existing features.md
/jat:feature-videos meadow --no-voice   # Skip voiceover generation

**Output:**

docs/videos/
├── <projectId>-features.md               ← Feature curriculum (also used for academy)
├── <projectId>-storyboard.md             ← Video storyboard + narration scripts
├── <projectId>-remotion-<feature>.json   ← Remotion config per feature
└── screenshots/                          ← Captured app UI (one per feature)
    ├── <feature>.png                     ← Raw browser screenshot
    ├── <feature>-enhanced.png            ← Gemini-polished version (if enhanced)
    └── ...

static/videos/
├── <feature>.mp4                         ← Full 16:9 feature video
├── <feature>-poster.jpg                  ← Poster frame (Remotion still)
├── <feature>-thumbnail.png              ← Generated thumbnail (Gemini)
├── <feature>-vertical.mp4               ← 9:16 social cut
├── <feature>-short.mp4                  ← 15s highlight reel
├── <feature>-narration.mp3              ← Voiceover audio
└── tour.mp4                             ← Master product tour

docs/videos/
├── backgrounds/                          ← Generated scene backgrounds (Gemini)
│   ├── <feature>-bg.png
│   └── ...
├── screenshots/                          ← Captured app UI (browser)
│   ├── <feature>-1.png                  ← Raw captures
│   ├── <feature>-1-enhanced.png         ← Enhanced (Gemini edit)
│   └── ...

src/routes/(marketing)/academy/           ← Generated academy articles
src/routes/(marketing)/videos/            ← Video gallery route

---

Architecture: Subagent Pipeline

Each phase runs as a focused subagent with a **fresh context window**. Phases are sequential where outputs feed into the next phase, and parallel where independent.

Orchestrator (this skill)
  │
  ├─ Phase 1: Features Subagent (sonnet)
  │    Input:  CLAUDE.md + knowledge bases + .jat/memory/*.md
  │    Output: docs/videos/<projectId>-features.md
  │
  ├─ Phase 2: Storyboard Subagent (sonnet)
  │    Input:  features.md + shared/remotion-video.md
  │    Output: storyboard.md + remotion JSON configs (with narration scripts)
  │
  ├─ Phase 3: Assets (3 subagents, ALL parallel)
  │    ├─ Screenshot Subagent (sonnet)
  │    │    Input:  features.md routes + browser tools
  │    │    Output: docs/videos/screenshots/<feature>-*.png
  │    │
  │    ├─ Voiceover Subagent (sonnet)
  │    │    Input:  storyboard narration scripts + ElevenLabs API
  │    │    Output: static/videos/<feature>-narration.mp3
  │    │
  │    └─ Imagery Subagent (sonnet)
  │         Input:  storyboard + project brand + gemini-image/gemini-edit
  │         Output: docs/videos/backgrounds/<feature>-bg.png (scene backgrounds)
  │                 static/videos/<feature>-thumbnail.png (video thumbnails)
  │
  ├─ Phase 3B: Screenshot Enhancement (after 3, needs screenshots + gemini)
  │    Runs gemini-edit on raw screenshots to polish them
  │    Output: docs/videos/screenshots/<feature>-*-enhanced.png
  │
  ├─ Phase 4: Video Render Subagent (sonnet, single shared Remotion project)
  │    Input:  ALL remotion JSON configs + screenshots + backgrounds + audio
  │    Output: static/videos/<feature>.mp4 + poster (batch render, 3 at a time)
  │
  ├─ Phase 5: Post-processing (parallel)
  │    ├─ Tour Subagent → static/videos/tour.mp4
  │    ├─ Social Cuts Subagent → <feature>-vertical.mp4 + <feature>-short.mp4
  │    └─ Routes Subagent → academy articles + video gallery route (uses thumbnails)
  │
  └─ Report

---

STEP 1: Resolve Project + Parse Flags

Parse `$ARGUMENTS` for projectId and flags:

  • `--dry-run` — stop after phases 1-2 (docs + configs, no rendering)
  • `--only <slug>` — re-render just one feature (skip phases 1-2, use existing configs)
  • `--redo-storyboard` — regenerate storyboard from existing features.md (skip phase 1)
  • `--no-voice` — skip voiceover generation

**Project ID is required.** Resolve from JAT config:

cat ~/.config/jat/projects.json | python3 -c "
import json, sys
data = json.load(sys.stdin)
p = data.get('projects', {}).get('PROJECT_ID', {})
print(p.get('path', 'NOT_FOUND').replace('~', '$HOME'))"

If no project ID, list available projects and ask user to pick.

Ga

Read more
Ships withjat

Agents ship, suggest, repeat. You supervise — or they run on their own. JAT is the complete, self-contained environment for agentic development. Task management, agent orchestration, code editor, git integration, terminal access—all unified in a single IDE.

Get the whole plugin