create-remotion-geist — скилл для Claude Code: видео в стиле Geist
Скилл для создания роликов на Remotion в тёмной эстетике Geist: шрифты, палитра и пружинные анимации Vercel.
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-codeЧто делает 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 — это повод проверить, насколько такой стиль вообще уместен в вашей задаче.
Какие задачи решает
- собрать промо-ролик на Remotion в тёмной теме Geist
- подключить пружинные анимации вместо линейных переходов
- настроить типографику и цветовую шкалу Geist в Tailwind
- добавить подсветку кода в видео через prism-react-renderer
- заменить эмодзи на иконки из @geist-ui/icons
Примеры запросов агенту
- сделай видео на Remotion в стиле Geist: тёмный фон, пружинный вход заголовка
- собери сцену с блоком кода и подсветкой через prism-react-renderer
- отрендери композицию MyComp в out/video.mp4
Как установить create-remotion-geist
1Через Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-code2Вручную: положить файлы
~/.claude/skills/create-remotion-geist/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/create-remotion-geist/
1Через Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a codex2Вручную: положить файлы
.agents/skills/create-remotion-geist/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a cursor2Вручную: положить файлы
.cursor/skills/create-remotion-geist/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vercel-labs/skill-remotion-geist create-remotion-geist2Вручную: положить файлы
.github/skills/create-remotion-geist/SKILL.md1Через Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a gemini-cli2Командой платформы
gemini skills install https://github.com/vercel-labs/skill-remotion-geist --path skills/create-remotion-geistВручную: положить файлы
.devin/skills/create-remotion-geist/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о create-remotion-geist
Как установить create-remotion-geist в Claude?
Выполните npx skills add vercel-labs/skill-remotion-geist --skill create-remotion-geist -a claude-code. Скилл окажется в ~/.claude/skills/create-remotion-geist/SKILL.md.
Что делает create-remotion-geist?
Помогает агенту писать видео на Remotion в визуальном стиле Geist: тёмная тема, шрифты Geist, пружинные анимации и десятиступенчатая палитра.
Какие правила скилл задаёт жёстко?
Эмодзи в кадре запрещены, точка входа должна быть src/index.tsx с registerRoot(), а для подсветки кода нужен prism-react-renderer, а не регулярные выражения.
