# create-remotion-geist

A skill that steers your agent to build Remotion videos in Vercel's Geist look: dark theme, Geist type, spring motion.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 484 installs · ★ 23
- Author: vercel-labs
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/vercel-labs/skill-remotion-geist/tree/HEAD/skills/create-remotion-geist/SKILL.md
- Updated: 2026-01-29
- HTML: https://affpapa.org/en/nevibecode/skills/create-remotion-geist

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/create-remotion-geist/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/create-remotion-geist/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/create-remotion-geist/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/create-remotion-geist/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vercel-labs/skill-remotion-geist create-remotion-geist
```

2. **Manually: put the files in place**
- File: `.github/skills/create-remotion-geist/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vercel-labs/skill-remotion-geist --path skills/create-remotion-geist
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/create-remotion-geist/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vercel-labs/skill-remotion-geist/tree/HEAD/skills/create-remotion-geist/SKILL.md

## When to use it
- 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
- 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

## Similar
- [remotion-markup](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-markup.md) — skill · 207700 installs
- [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · 4900 installs
- [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · 2600 installs
- [remotion-best-practices](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion-best-practices.md) — skill · 1500 installs
- [remotion-motion-graphics](https://affpapa.org/en/nevibecode/skills/remotion-motion-graphics.md) — skill · 1100 installs
- [remotion-create](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-create.md) — skill · 214000 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md