skills-showcaselisted

# Skills Showcase 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. ## Quick Start ```bash 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 ``` ## Output Artifacts - `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 copy ## Architecture ``` src/ ├── 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 ``` ## Data Model Edit `src/data/skills.ts` to add or remove skills. The video re-renders deterministically from this dataset. - **Category**: `{ id, label, color, order }` - **Skill**: `{ slug, categoryId, shortDescription }` - **Derived**: `totalS