Create Remotion Geist

vercel-labs/skill-remotion-geistOfficial

If you're building Remotion videos that need to match Vercel's visual language, this gets you there without guessing at design tokens. It scaffolds projects with the full Geist design system baked in: the 10-step color scale, proper typography classes, spring animations with that signature smooth damping, and crucially, it enforces using actual Geist icons instead of emojis. The setup is opinionated in good ways, like requiring TSX entry points and using prism-react-renderer for code blocks rather than fragile regex highlighting. It's basically a guard rail system that keeps your motion graphics looking polished and on-brand instead of like a knockoff. Worth using if you're doing any video work in the Vercel ecosystem or just want that dark, clean aesthetic without reinventing spacing tokens.

skills.sh installs: 499
GitHub stars: 24
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist --agent claude-code

Installs into .claude/skills of the current project.

Files

Create Remotion Geist Video

Create Remotion videos styled with Vercel's Geist design system - dark backgrounds, spring animations, Geist fonts, and the 10-step color scale.

When to Use

Creating any Remotion video that should look like Vercel
Building motion graphics with Geist's dark theme aesthetic
Making animated content using Geist typography and colors
Producing videos that need the polished Vercel visual style

Critical Rules

NEVER use emojis - Use proper Geist icons from @geist-ui/icons package
Use official brand assets - Download from official sources, don't hand-craft SVGs
Entry point must be .tsx - Use src/index.tsx with registerRoot(), not .ts
Use prism-react-renderer for code - Do NOT use regex-based syntax highlighting

Quick Start

Scaffold the project:

mkdir -p src/{scenes,components,utils} out
npm init -y
npm install remotion @remotion/cli @remotion/tailwind react react-dom
npm install -D tailwindcss typescript @types/react
npm install @geist-ui/icons  # For proper icons

SKILL.md on GitHub