| name | creating-video |
| description | Idea → storyboard → Remotion overlays/animation → short renders + stills for fast visual iteration. |
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/<project-id>/.
- 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/<id>/project.json / scripts/*project*.mjs workflows. Don’t reintroduce them unless the user explicitly asks.
- Wrap major overlays in named
<Sequence> blocks so effects are visible in Studio’s timeline.
- Keep transcript timing data as a JSON file committed with the project (prefer
src/projects/<id>/transcript_words.json so the project is self-contained).
- For stable recordings, hardcode key effect timestamps in
src/projects/<id>/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/<id>/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/<project-id>/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.
- If the user already has a storyboard:
- implement overlays/animations from it, then verify with short renders.
- 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:
<repo-root>/src/projects/<project-id>/
- Shared effect blocks:
<repo-root>/src/effects/
- Artifact folder:
<repo-root>/projects/<project-id>/
- Composition registry:
<repo-root>/src/projects/registry.js
- Transcript timing data (recommended):
<repo-root>/src/projects/<project-id>/transcript_words.json (keep it “thin”: words + timestamps)
- Active execution state:
<repo-root>/docs/projects/<project-id>/tasks.md
Golden Path (Code-First)
- Scaffold the project:
npm run new:project -- --id <project-id> --title "My Video".
- Fill
src/projects/<project-id>/assets.js, refine <Project>Comp.js, and keep editable source notes in projects/<project-id>/.
- If the work is likely to continue across sessions, create
docs/projects/<project-id>/tasks.md and keep the resume state there.
- Preview:
npm start and select the composition in Studio.
- 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
- 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:
<repo-root>/src/projects/<project-id>/ (composition + assets/constants + transcript data)<repo-root>/projects/<project-id>/ (storyboard, notes, scratch artifacts)<repo-root>/src/projects/registry.js registration- Remotion code changes (new overlay primitives or a per-project composition wiring), as needed
<repo-root>/docs/projects/<project-id>/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/<project-id>/ is for project-specific assembly, copy, timing, and assets.projects/<project-id>/ 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 <Sequence> patterns, src/overlay_kit/ primitives, and src/effects/ blocks once the pattern has repeated across scenes.
