home / skills / danielmiessler / personal_ai_infrastructure / media
This skill helps you create professional videos programmatically with Remotion using React compositions, animations, and render automation.
npx playbooks add skill danielmiessler/personal_ai_infrastructure --skill mediaReview the files below or copy the command above to add this skill to your agents.
---
name: Remotion
description: Programmatic video creation with React via Remotion — compositions, animations, motion graphics, rendered to MP4. USE WHEN video, animation, motion graphics, video rendering, React video, intro video, YouTube video, TikTok video, video production, render video, content to animation, animate content, video overlay.
---
## 🚨 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/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
This skill automates programmatic video creation using Remotion and React, producing MP4s for intros, social clips, and motion graphics. It enforces project conventions, theme integration, and a required voice notification before any rendering or workflow actions. Use it to convert content into animated compositions and render polished videos reproducibly.
Before any operation it requires sending a voice notification (curl POST) and an on-screen text notice describing the workflow run. It loads user customizations and the PAI theme, applies art integration, generates React-based Remotion compositions, and then renders output to ~/Downloads using the npx remotion render command. It validates critical rules (no CSS animations) and routes common triggers to predefined workflows.
What exactly must I do before the skill performs any action?
You must execute the required voice notification curl POST to http://localhost:8888/notify and output the matching text notification indicating the workflow and action.
Where should rendered files go first?
Render always to ~/Downloads/{name}.mp4 first, then archive or distribute from a separate storage location.