ruler-progress-render — скилл для Claude Code: установка
Загружает проект ruler-progress-animator и рендерит шкалу прогресса через Remotion. Пригодится для быстрой генерации анимации линейки с прозрачным фоном.
npx skills add vibe-motion/skills --skill ruler-progress-render -a claude-codeЧто делает ruler-progress-render
Скилл запускает скрипт scripts/render_ruler_progress.sh, принимающий путь к рабочей директории и файлу вывода. Если локальной копии ruler-progress-animator нет, он клонирует репозиторий с GitHub и отслеживает ветку origin/HEAD. По умолчанию готовый файл сохраняется в out/scaffold-demo-defaults-transparent.mov.
Зависимости устанавливаются через npm. При наличии bunx скилл выполняет сценарий с кешированием Chrome Headless Shell, что исключает повторную загрузку браузера. Без bunx активируется совместимый режим с прямым вызовом npx remotion render.
Для работы скрипта обязательно требуются git, node, npm и доступ в сеть. Отсутствие любой из этих утилит приведёт к остановке сборки.
Какие задачи решает
- собрать видеоролик со шкалой прогресса
- склонировать и обновить репозиторий ruler-progress-animator
- отрендерить анимацию линейки с прозрачным фоном
- настроить запуск Remotion с кешированием браузера
Примеры запросов агенту
- Отрендери ruler progress видео в папку out/demo.mov
- Сгенерируй анимацию ruler progress с настройками по умолчанию
- Экспортируй демонстрационный ролик со шкалой прогресса из ruler-progress-animator
Как установить ruler-progress-render
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a claude-code2Вручную: положить файлы
~/.claude/skills/ruler-progress-render/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ruler-progress-render/
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a codex2Вручную: положить файлы
.agents/skills/ruler-progress-render/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a cursor2Вручную: положить файлы
.cursor/skills/ruler-progress-render/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills ruler-progress-render2Вручную: положить файлы
.github/skills/ruler-progress-render/SKILL.md1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a gemini-cli2Командой платформы
gemini skills install https://github.com/vibe-motion/skills --path ruler-progress-renderВручную: положить файлы
.devin/skills/ruler-progress-render/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора3
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о ruler-progress-render
Как установить ruler-progress-render в Claude Code?
Выполните команду npx skills add vibe-motion/skills --skill ruler-progress-render -a claude-code. Конфигурация запишется в ~/.claude/skills/ruler-progress-render/SKILL.md.
Что делает ruler-progress-render?
Скилл скачивает или обновляет проект ruler-progress-animator, устанавливает пакеты через npm и запускает рендер видеофайла через Remotion.
Что нужно подготовить перед запуском?
В системе должны присутствовать git, node и npm, а также стабильное сетевое подключение. Утилита bunx опциональна, но она помогает избежать повторного скачивания браузерных бинарников.
