# Creating Video > Idea → storyboard → Remotion overlays/animation → short renders + stills for fast visual iteration. - Skill: `wisdom-in-a-nutshell/creating-video` (Agent Skill, multi-file: 14 files) - Install (CLI): `npx skillmds@latest add wisdom-in-a-nutshell/creating-video` - Raw SKILL.md: https://api.skillmd.com/api/skills/wisdom-in-a-nutshell/creating-video/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: wisdom-in-a-nutshell (https://skillmd.com/u/wisdom-in-a-nutshell) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/wisdom-in-a-nutshell/creating-video --- # Creating Video ## Overview Use this skill to collaborate from idea -> storyboard -> Remotion implementation with a tight verification loop. ## Default Workflow Use code-first by default: - Put per-video code under `src/projects//`. - Prefer descriptive project ids such as `object-segmentation`, not opaque ticket-style ids, unless the repo already has a legacy id you are intentionally preserving. - Register the composition through `src/projects/registry.js`; `src/Root.js` should continue rendering `PROJECT_COMPOSITIONS`. - Keep URLs, cut length, and per-video constants in code (e.g. `assets.js`). - Prefer remote-first runtime media in `assets.js` for compositions that may need cloud render; keep local files as editable source material until they are promoted into the runtime path. - For media-processing steps, first check `$media-toolkit` for a suitable command surface (for example transcription, transform, matting, or job status). If it fits the task, prefer it over lower-level backend-specific paths. - We removed `projects//project.json` / `scripts/*project*.mjs` workflows. Don’t reintroduce them unless the user explicitly asks. - Wrap major overlays in named `` blocks so effects are visible in Studio’s timeline. - Keep transcript timing data as a JSON file committed with the project (prefer `src/projects//transcript_words.json` so the project is self-contained). - For stable recordings, hardcode key effect timestamps in `src/projects//assets.js` (don’t re-find phrases at runtime). See `references/timeline-patterns.md`. - Don’t depend on “manifest” files at runtime (e.g. `projects//matting.json`). If they exist, treat them as scratch notes only. - For work that may span multiple sessions, keep active execution state in `docs/projects//tasks.md`. - Prefer shared house-style blocks from `src/effects/` once a visual pattern has repeated. Keep one-off scene wiring inside the project until the abstraction is proven. 1. If the user already has a storyboard: - implement overlays/animations from it, then verify with short renders. 2. If the user does not have a storyboard: - draft a 3–7 beat storyboard, confirm it, then implement + verify. References: - New prompt -> project flow: `references/new-project-flow.md` - Intake questions: `references/intake.md` - Storyboard format: `references/storyboard.md` - Verification loop (render/stills): `references/verification.md` - Overlay component catalog: `references/overlay-components.md` - Effect extraction rule: `references/effect-extraction.md` - Shared effect blocks: `~/GitHub/adithyan-ai-videos/docs/references/effect-library.md` - Shared block preview surface: `src/projects/effects-lab/` - Style tokens + readability rules: `references/style-tokens.md` - Lessons learned (condensed do/don't): `references/lessons-learned.md` - Asset caching (default-on): `references/asset-caching.md` - Quick checklist: `references/checklist.md` - Commands: `references/commands.md` - Also use `$remotion-best-practices` whenever you touch Remotion code. ## Where Things Live - Per-video code: `/src/projects//` - Shared effect blocks: `/src/effects/` - Artifact folder: `/projects//` - Composition registry: `/src/projects/registry.js` - Transcript timing data (recommended): `/src/projects//transcript_words.json` (keep it “thin”: words + timestamps) - Active execution state: `/docs/projects//tasks.md` ## Golden Path (Code-First) 1. Scaffold the project: `npm run new:project -- --id --title "My Video"`. 2. Fill `src/projects//assets.js`, refine `Comp.js`, and keep editable source notes in `projects//`. 3. If the work is likely to continue across sessions, create `docs/projects//tasks.md` and keep the resume state there. 4. Preview: `npm start` and select the composition in Studio. 5. Render locally first: `npm run render`. - Render a time slice in seconds (recommended for iteration): `npm run render -- --from 0 --to 6` - Full quality: `npm run render -- --hq` 6. When the project reaches a stable checkpoint, use `npm run render:cloud` so the repo-owned client handles submission, waiting, status, and the final URL. ## Expected Outputs (What To Produce) For a new video project, the “done” state is: - `/src/projects//` (composition + assets/constants + transcript data) - `/projects//` (storyboard, notes, scratch artifacts) - `/src/projects/registry.js` registration - Remotion code changes (new overlay primitives or a per-project composition wiring), as needed - `/docs/projects//tasks.md` when the work needs a durable resume point - A verification render + stills under repo-local `tmp/` (see `references/verification.md`) ## Workflow (Close The Loop) Use short renders + a few stills to validate quickly while iterating (don’t trust Studio playback alone). See `references/verification.md` for the recommended commands and what to look for. ## Practical Boundaries - `src/overlay_kit/` is for low-level primitives. - `src/effects/` is for repeated repo-specific beats and compositing blocks. - `src/projects//` is for project-specific assembly, copy, timing, and assets. - `projects//` is for source notes, receipts, sketches, and scratch artifacts. ## Self-Improvement (Document Learnings) When you learn something that is likely to repeat (a reliable workflow, a recurring pitfall, or a reusable contract): - Update this skill (prefer a short addition to `references/*` rather than bloating this file). - Update the nearest `AGENTS.md` if it is a repo-local operational rule for agents returning cold. - Prefer turning learnings into reusable artifacts: `storyboard.md` conventions, named `` patterns, `src/overlay_kit/` primitives, and `src/effects/` blocks once the pattern has repeated across scenes.