# yyl-remotion-video

Turns an article, script or notes into a Remotion project and renders mp4. Useful when you need a video file, not a web presentation.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 503 installs · ★ 312
- Author: ttfake92-lab
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/ttfake92-lab/skills/tree/HEAD/skills/yyl-remotion-video/SKILL.md
- Updated: 2026-10-12
- HTML: https://affpapa.org/en/nevibecode/skills/yyl-remotion-video

## What it does

The skill takes your source text and builds a Remotion project around it: `article.md` for the material, `script.md` for spoken lines, `outline.md` for the chapter and beat plan. Inside `remotion/` you get `Root.tsx`, `Composition.tsx` and per-chapter folders holding `narrations.ts` and `timing.ts`. Motion comes from `useCurrentFrame()`, `interpolate()`, `Easing` and `Sequence`. CSS transitions and GSAP are off the table for primary animation, and Tailwind animation utilities are banned too — static layout styling is fine.

Before writing files the skill picks a strength: Quick for short drafts, Standard for a normal explainer, Strict for brand or high-risk content. Defaults are 30 fps at 1920×1080. No audio is synthesized; chapter durations are estimated from narration and visual complexity, so voiceover and subtitles stay in post-production. The rendered mp4 is silent until you supply audio yourself.

Give it only a topic and it will ask for material rather than invent a whole video. Themes come from the bundled set — `themes/command-film`, `themes/studio-white`, `themes/research-desk`. The `luxury-perspective-gallery` template needs Tailwind, so the project has to be created with Tailwind support before you copy template files. Still checks are required before the final render: `npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add ttfake92-lab/skills --skill yyl-remotion-video -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/yyl-remotion-video/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/yyl-remotion-video/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add ttfake92-lab/skills --skill yyl-remotion-video -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/yyl-remotion-video/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add ttfake92-lab/skills --skill yyl-remotion-video -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/yyl-remotion-video/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install ttfake92-lab/skills yyl-remotion-video
```

2. **Manually: put the files in place**
- File: `.github/skills/yyl-remotion-video/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add ttfake92-lab/skills --skill yyl-remotion-video -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/ttfake92-lab/skills --path skills/yyl-remotion-video
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/yyl-remotion-video/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add ttfake92-lab/skills --skill yyl-remotion-video -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/ttfake92-lab/skills/tree/HEAD/skills/yyl-remotion-video/SKILL.md

## When to use it
- render an mp4 from an article or script without hand-building a timeline
- split a long text into chapters with estimated durations
- get frame-accurate React animation instead of CSS transitions
- check stills for every chapter before the final render
- pick a theme for an explainer or product walkthrough

## Example prompts
- Turn this article into a Remotion video, research-desk theme, one chapter per section
- Build the Remotion project from script.md and render mp4 into out/
- Check the stills for chapter two and fix the timing in timing.ts

## Similar
- [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · 2600 installs
- [remotion-video-toolkit](https://affpapa.org/en/nevibecode/skills/remotion-video-toolkit.md) — skill · 779 installs
- [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · 4900 installs
- [remotion-interactivity](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-interactivity.md) — skill · 202900 installs
- [remotion](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion.md) — skill · 1700 installs
- [remotion-motion-graphics](https://affpapa.org/en/nevibecode/skills/remotion-motion-graphics.md) — skill · 1100 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md