motion-designer · ncklrs — скилл для Claude Code: что делает и как установить
Продумывает покадровый сценарий видеоролика для Remotion с таймингами, переходами и звуковой дорожкой. Пригодится, когда нужно составить подробное ТЗ для анимированной графики.
npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-codeЧто делает motion-designer
Скилл превращает общую идею видео в пошаговую раскадровку. Он разбивает таймлайн на сцены, задаёт точные интервалы в кадрах и расписывает визуальные акценты. При формировании анимации агент опирается на принципы Диснея и классическую дугу удержания внимания — от хука в первые 5 секунд до финального призыва к действию.
Помимо визуала спецификация включает звуковую архитектуру. Для каждого фрагмента скилл определяет громкость фоновой музыки, тайминги звуковых эффектов и голосовые реплики. Отдельно генерируются параметры для Remotion: размеры композиции, шрифты, цветовая палитра и настройки пружин для вызовов spring() и interpolate().
Сам скилл код не пишет. Он формирует структурированное техническое задание со сценами и таймингами. Для непосредственной сборки проекта автор рекомендует передавать готовую спецификацию скиллу /remotion-best-practices.
Какие задачи решает
- составить покадровую раскадровку видеоролика для Remotion
- рассчитать тайминги анимаций и смены планов в кадрах
- расписать звуковую дорожку с точными метками шумовых эффектов
- подготовить параметры пружин и интерполяции для вёрстки сцен
Примеры запросов агенту
- Спланируй 30-секундное демо для нового веб-сервиса и распиши раскадровку по сценам
- Составь спецификацию для 5-секундной интро-анимации логотипа с таймингами звука
- Подготовь ТЗ для обучающего ролика с разбором переходов и параметров Remotion
Как установить motion-designer
1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-code2Вручную: положить файлы
~/.claude/skills/motion-designer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/motion-designer/
1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill motion-designer -a codex2Вручную: положить файлы
.agents/skills/motion-designer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill motion-designer -a cursor2Вручную: положить файлы
.cursor/skills/motion-designer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ncklrs/startup-os-skills motion-designer2Вручную: положить файлы
.github/skills/motion-designer/SKILL.md1Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill motion-designer -a gemini-cli2Командой платформы
gemini skills install https://github.com/ncklrs/startup-os-skills --path skills/motion-designerВручную: положить файлы
.devin/skills/motion-designer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ncklrs/startup-os-skills --skill motion-designer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о motion-designer
Как установить motion-designer в Claude Code?
Выполните команду npx skills add ncklrs/startup-os-skills --skill motion-designer -a claude-code. Также файл скилла можно сохранить вручную по пути ~/.claude/skills/motion-designer/SKILL.md.
Что делает скилл motion-designer?
Он помогает спланировать видеоролик, создавая подробный сценарий со сценами, длительностью каждого кадра, звуковым оформлением и визуальными акцентами. Готовая спецификация оптимизирована под последующую реализацию в Remotion.
Генерирует ли motion-designer готовый код для Remotion?
Нет, скилл выдаёт техническое задание и параметры анимаций вроде spring() и interpolate(). Для генерации компонентов React и рендеринга автор советует использовать скилл /remotion-best-practices.
Похожие скиллы
Всё по теме «Дизайн» →Сначала — motion-designer от других авторов.
