Generate a polished Remotion video and X thread showcasing the full agent skills inventory. Use when creating social media content about skills, rendering category-based skill visualizations, or producing animated showcases of agent capabilities. Triggers on "skills video", "showcase skills", "skills thread", "render skills", "social content for skills", or requests to visualize the skills inventory.
Render a category-by-category animated skills showcase video (1080x1080, 30fps, ~48s) and produce a 7-post X thread that maps skill clusters to concrete value.
cd skills-showcase
npm install
npx remotion studio # Preview in browser
npx remotion render SkillsShowcase out/skills-showcase.mp4
npx remotion render SkillsShowcase out/skills-showcase.gif --every-nth-frame=3
out/skills-showcase.mp4 — Primary X upload (H.264, ~4.7 MB)out/skills-showcase.gif — Fallback/preview (~7 MB)thread.md — 7-post X thread copysrc/
├── index.ts # registerRoot entry point
├── Root.tsx # Composition registry (1080x1080, 30fps, 1440 frames)
├── SkillsShowcase.tsx # Master timeline using <Series>
├── data/skills.ts # Typed dataset: categories, skills, derived aggregates
├── scenes/
│ ├── Intro.tsx # Title + subtitle + stats pills (4s)
│ ├── CategorySection.tsx # Category label + staggered skill chips (2.67s each)
│ └── Outro.tsx # Summary metric + tagline + CTA (4s)
└── components/
└── SkillChip.tsx # Reusable animated badge with spring entrance
Edit src/data/skills.ts to add or remove skills. The video re-renders deterministically from this dataset.
{ id, label, color, order }{ slug, categoryId, shortDescription }totalSkills, totalCategories, skillsByCategoryAll animations use Remotion frame-driven patterns only:
useCurrentFrame() + useVideoConfig() for frame/fpsspring() for entrances (damping: 200 for smooth, damping: 20 + stiffness: 200 for snappy)interpolate() with clamp for opacity and translation| Scene | Frames | Duration |
|---|---|---|
| Intro | 120 | 4.0s |
| 15 categories × 80 | 1200 | 40.0s |
| Outro | 120 | 4.0s |
| Total | 1440 | 48.0s |
categories array in src/data/skills.ts, update Root.tsx durationcolor hex in the datasetCATEGORY_DURATION in SkillsShowcase.tsxthread.md directlySee thread.md for the full 7-post thread. Structure: