# create-remotion-geist

Скилл для создания роликов на Remotion в тёмной эстетике Geist: шрифты, палитра и пружинные анимации Vercel.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 484 установки · ★ 23
- Автор: vercel-labs
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/vercel-labs/skill-remotion-geist/tree/HEAD/skills/create-remotion-geist/SKILL.md
- Обновлён: 2026-01-29
- HTML: https://affpapa.org/nevibecode/skills/create-remotion-geist

## Что делает

Скилл задаёт агенту рамки, в которых он собирает видео на Remotion по визуальному стилю Geist. Внутри — правила по тёмной теме, типографике, десятиступенчатой цветовой шкале и пружинным анимациям, плюс справочники: шаблоны файлов проекта, иконки и брендовые ассеты, блоки кода, сцены и раскадровка.

Проект разворачивается вручную: создаются каталоги `src/scenes`, `src/components`, `src/utils` и `out`, ставятся `remotion`, `@remotion/cli`, `@remotion/tailwind`, `react`, `react-dom`, а для иконок — `@geist-ui/icons`. Точка входа обязана быть `src/index.tsx` с `registerRoot()`, подсветку кода делают через `prism-react-renderer`, а не регулярками. Шрифты Geist подгружаются с jsDelivr CDN.

Просмотр идёт через `npx remotion studio` на localhost:3000, рендер — `npx remotion render MyComp out/video.mp4`. Эмодзи в кадре запрещены: только иконки из пакета и официальные логотипы. Если в проекте уже есть свой слой стилей или другая система иконок, этот скилл будет тянуть всё к палитре Geist — это повод проверить, насколько такой стиль вообще уместен в вашей задаче.

## Установка

### Claude Code (родная платформа)

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

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/create-remotion-geist/SKILL.md` — Папка скилла целиком; для одного проекта — .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. **Вручную: положить файлы**
- Файл: `.agents/skills/create-remotion-geist/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

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

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/create-remotion-geist/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

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

2. **Вручную: положить файлы**
- Файл: `.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. **Командой платформы**
```bash
gemini skills install https://github.com/vercel-labs/skill-remotion-geist --path skills/create-remotion-geist
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/create-remotion-geist/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

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

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/vercel-labs/skill-remotion-geist/tree/HEAD/skills/create-remotion-geist/SKILL.md

## Когда брать
- собрать промо-ролик на Remotion в тёмной теме Geist
- подключить пружинные анимации вместо линейных переходов
- настроить типографику и цветовую шкалу Geist в Tailwind
- добавить подсветку кода в видео через prism-react-renderer
- заменить эмодзи на иконки из @geist-ui/icons

## Примеры запросов агенту
- сделай видео на Remotion в стиле Geist: тёмный фон, пружинный вход заголовка
- собери сцену с блоком кода и подсветкой через prism-react-renderer
- отрендери композицию MyComp в out/video.mp4

## Похожие
- [remotion-markup](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-markup.md) — скилл · 207700 установок
- [remotion-video-creation](https://affpapa.org/nevibecode/skills/remotion-video-creation.md) — скилл · 4900 установок
- [remotion-video](https://affpapa.org/nevibecode/skills/remotion-video.md) — скилл · 2600 установок
- [remotion-best-practices](https://affpapa.org/nevibecode/skills/vercel-labs-remotion-best-practices.md) — скилл · 1500 установок
- [remotion-motion-graphics](https://affpapa.org/nevibecode/skills/remotion-motion-graphics.md) — скилл · 1100 установок
- [remotion-create](https://affpapa.org/nevibecode/skills/remotion-dev-remotion-create.md) — скилл · 214000 установок

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md