my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

Bundled skill resources:

themes/       # color / typography systems
templates/    # copyable Remotion TSX starting points
references/   # craft, theme, and template guidance

Execution Strength

Decide before writing files:

Strength	Use When	Behavior
Quick	<= 450 Chinese chars, <= 60s, theme test, draft demo	1 chapter, few beats, direct implementation
Standard	1-4 min, normal publishable explainer	script + outline, first chapter anchor, then continue
Strict	> 4 min, brand/commercial/high-risk content	fuller planning, more still checks, slower chapter review

Report in one line:

I will use <Quick/Standard/Strict> because <length / risk / target>.

Workflow

Input Gate
- Proceed only if the user gives source text, a script, notes, or a clear outline.
- If they only give a topic, ask for material. Do not invent a full video.
Content Files
- Save source material to article.md when provided.
- Save final spoken text to script.md.
- Save development plan to outline.md.
- outline.md plans chapters, beats, screen content, information pool, assets.
- outline.md does not prescribe exact animation implementation.
Theme Choice
- Use only themes bundled in this skill: themes/command-film, themes/studio-white, themes/research-desk.
- Do not reuse or import themes from web-video-presentation.
Template Choice
- If the user asks for a known layout or animation mechanism, read references/TEMPLATES.md.
- Use templates/luxury-perspective-gallery for luxury dark portfolio, 3D perspective horizontal carousel, or premium agency gallery requests.
Remotion Project
- Reuse existing remotion/ if present.
- Create only if missing:
```
npx create-video@latest --yes --blank --no-tailwind remotion
```
- If a selected template requires Tailwind, create the project with Tailwind support or add Tailwind before copying template files.
- Install dependencies only if remotion/node_modules is missing or Remotion commands fail because dependencies are absent.
Timing
- Do not synthesize audio.
- Estimate durations from narration and visual complexity.
- Default fps = 30, width = 1920, height = 1080.
- Store text in narrations.ts; store estimated durationFrames in timing.ts.
Implementation
- Read references/REMOTION-CRAFT.md before each chapter.
- Animate with useCurrentFrame(), interpolate(), Easing, and Sequence.
- Do not use CSS transition / CSS animation / GSAP for primary animation.
- Tailwind may style static layout, but Tailwind animation utilities are not allowed.

Verification

Run:
```
cd remotion
npm run lint
```

Render at least one still per chapter, or 2-4 stills for a short full video:

npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png

Render mp4 when the stills look correct:

npx remotion render <composition-id> out/<name>.mp4

Notes
- Update notes.md with fps, resolution, total frames, estimated duration, checked stills, rendered mp4 path, and that audio/subtitles are post-production.

Theme Selection

Theme	Best For	Feel
`command-film`	agents, terminal, automation, developer tools	dark cinematic command room
`studio-white`	SaaS demos, launches, courses, product tutorials	clean white product studio
`research-desk`	essays, reports, papers, business analysis	calm analytical desk

For full theme notes, read references/THEMES.md.

Template Selection

Template	Best For	Feel
`luxury-perspective-gallery`	premium portfolio, product showcase, 3D horizontal carousel	dark cyber-minimal agency slider
`charity-doodle-poster`	nonprofit posters, hand-drawn animal heroes, line-boil editorial web effects	retro ink-brush stop-motion poster

For full template notes, read references/TEMPLATES.md.

Remotion Rules

Use Composition in Root.tsx.
Use Sequence to place beats on the timeline.
Use useCurrentFrame() + interpolate() for motion.
Place static assets in remotion/public/assets/; reference with staticFile().
Still checks are required before final render.
The final mp4 is silent unless the user later supplies audio in post-production.

yyl-remotion-video

YYL Remotion Video

Core Output