playbooks

home / skills / danielmiessler / personal_ai_infrastructure / remotion

Remotion skill

/Releases/v3.0/.claude/skills/Remotion

This skill helps you generate professional videos programmatically with React, streamlining animation workflows and automated rendering for rapid video

npx playbooks add skill danielmiessler/personal_ai_infrastructure --skill remotion

Review the files below or copy the command above to add this skill to your agents.

Files (37)
SKILL.md
2.1 KB
---
name: Remotion
description: Programmatic video creation with React. USE WHEN video, animation, motion graphics, video rendering, React video, intro video, YouTube video, TikTok video, video production, render video.
---

## 🚨 MANDATORY: Voice Notification (REQUIRED BEFORE ANY ACTION)

**You MUST send this notification BEFORE doing anything else when this skill is invoked.**

1. **Send voice notification**:
   ```bash
   curl -s -X POST http://localhost:8888/notify \
     -H "Content-Type: application/json" \
     -d '{"message": "Running the WORKFLOWNAME workflow in the Remotion skill to ACTION"}' \
     > /dev/null 2>&1 &
   ```

2. **Output text notification**:
   ```
   Running the **WorkflowName** workflow in the **Remotion** skill to ACTION...
   ```

**This is not optional. Execute this curl command immediately upon skill invocation.**

# Remotion

Create professional videos programmatically with React.

## Customization

**Before executing, check for user customizations at:**
`~/.claude/skills/PAI/USER/SKILLCUSTOMIZATIONS/Remotion/`

## Workflow Routing

| Trigger | Workflow |
|---------|----------|
| "animate this", "create animations for", "video overlay" | `Workflows/ContentToAnimation.md` |

## Quick Reference

- **Theme:** Always use PAI_THEME from `Tools/Theme.ts`
- **Art Integration:** Load Art preferences before creating content
- **Critical:** NO CSS animations - use `useCurrentFrame()` only
- **Output:** Always to `~/Downloads/` first

**Render command:**
```bash
npx remotion render {composition-id} ~/Downloads/{name}.mp4
```

## Full Documentation

- **Art integration:** `ArtIntegration.md` - theme constants, color mapping
- **Common patterns:** `Patterns.md` - code examples, presets
- **Critical rules:** `CriticalRules.md` - what NOT to do
- **Detailed reference:** `Tools/Ref-*.md` - 28 pattern files from Remotion

## Tools

| Tool | Purpose |
|------|---------|
| `Tools/Render.ts` | Render, list compositions, create projects |
| `Tools/Theme.ts` | PAI theme constants derived from Art |

## Links

- Remotion Docs: https://remotion.dev/docs
- GitHub: https://github.com/remotion-dev/remotion

Overview

This skill lets you create professional, programmatic videos using React and Remotion. It guides theme integration, art preferences, and safe rendering practices so outputs are consistent and production-ready. It enforces a required voice notification and other critical rules before any rendering occurs.

How this skill works

On invocation it requires an immediate voice notification and a text notice describing the workflow and action. It then checks for user customizations in a local path, loads theme and art preferences, and prepares Remotion compositions using useCurrentFrame() for motion (no CSS animations). Finally it renders output to the Downloads folder using the Remotion CLI.

When to use it

  • Generate animated intros, outros, or overlays for videos
  • Automate YouTube, TikTok, or social short video production
  • Create motion graphics and animated typography from code
  • Batch-render programmatic videos from templates
  • Integrate video generation into CI or content pipelines

Best practices

  • Send the required voice notification immediately upon invocation (see notification text requirement).
  • Check ~/.claude/skills/PAI/USER/SKILLCUSTOMIZATIONS/Remotion/ for user customizations before steps that modify assets or code.
  • Always import and apply PAI_THEME from Tools/Theme.ts for consistent color and typography.
  • Load Art preferences before generating compositions to respect branding and style mappings.
  • Use useCurrentFrame() and Remotion APIs for animation; do NOT use CSS animations.
  • Render first to ~/Downloads/ and use npx remotion render {composition-id} ~/Downloads/{name}.mp4 for final output.

Example use cases

  • Programmatically create a 15-second TikTok intro using a branded theme and animated text.
  • Batch-render episode trailers for a YouTube channel from a single React template.
  • Generate personalized video messages by populating a React composition with user data and rendering to MP4.
  • Produce motion graphics overlays for livestreams and export them as transparent videos or image sequences.

FAQ

Is the voice notification really mandatory?

Yes. The workflow requires sending the voice notification before any other actions; include the prescribed message so monitoring systems record the workflow run.

Where should I store custom theme or art settings?

Place user customizations in ~/.claude/skills/PAI/USER/SKILLCUSTOMIZATIONS/Remotion/ so the skill can detect and apply them automatically.

Can I use CSS animations inside Remotion compositions?

No. Follow the critical rule: use useCurrentFrame() and Remotion animation primitives. Do not rely on CSS animations for motion in compositions.