create-remotion-geist — Claude Code skill: Geist-style videos
A skill that steers your agent to build Remotion videos in Vercel's Geist look: dark theme, Geist type, spring motion.
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-codeWhat create-remotion-geist does
The skill gives the agent a fixed set of rules for building Remotion videos in the Geist visual style. It covers the dark theme, typography, the 10-step color scale and spring-based animation, and ships reference files: project setup templates, icons and brand assets, code blocks, scene patterns and a storyboard template.
Setup is manual. You create src/scenes, src/components, src/utils and out, then install remotion, @remotion/cli, @remotion/tailwind, react, react-dom and @geist-ui/icons for icons. The entry point has to be src/index.tsx with registerRoot(), and code highlighting goes through prism-react-renderer rather than regex. Geist fonts load from the jsDelivr CDN.
Preview runs with npx remotion studio on localhost:3000, rendering with npx remotion render MyComp out/video.mp4. Emojis are banned in frames — icons come from the package and logos from official sources. If your project already has its own style layer or icon set, this skill will pull everything toward the Geist palette, so it is worth checking whether that look fits the job at hand.
What it helps with
- build a Remotion promo clip in the dark Geist theme
- swap linear transitions for spring animations
- wire Geist type and color scale into Tailwind
- add syntax-highlighted code blocks with prism-react-renderer
- replace emojis with icons from @geist-ui/icons
Example prompts for the agent
- make a Remotion video in Geist style: dark background, spring-in title
- build a scene with a code block highlighted by prism-react-renderer
- render the MyComp composition to out/video.mp4
How to install create-remotion-geist
1Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-code2Manually: put the files in place
~/.claude/skills/create-remotion-geist/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/create-remotion-geist/
1Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a codex2Manually: put the files in place
.agents/skills/create-remotion-geist/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a cursor2Manually: put the files in place
.cursor/skills/create-remotion-geist/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vercel-labs/skill-remotion-geist create-remotion-geist2Manually: put the files in place
.github/skills/create-remotion-geist/SKILL.md1Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a gemini-cli2Platform CLI
gemini skills install https://github.com/vercel-labs/skill-remotion-geist --path skills/create-remotion-geistManually: put the files in place
.devin/skills/create-remotion-geist/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about create-remotion-geist
How do I install create-remotion-geist in Claude?
Run npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-code. The skill lands in ~/.claude/skills/create-remotion-geist/SKILL.md.
What does create-remotion-geist do?
It guides the agent to write Remotion videos in the Geist visual style: dark theme, Geist fonts, spring animations and the 10-step palette.
Which rules does the skill enforce?
No emojis in frames, the entry point must be src/index.tsx with registerRoot(), and code highlighting must use prism-react-renderer instead of regex.
