ruler-progress-render — Claude Code skill: install and usage
Clones ruler-progress-animator and renders a ruler progress animation video using Remotion presets. Helps generate transparent motion assets directly from the terminal.
npx skills add vibe-motion/skills --skill ruler-progress-render -a claude-codeWhat ruler-progress-render does
The skill invokes scripts/render_ruler_progress.sh with workspace directory and output target arguments. If workspace_dir/ruler-progress-animator is not detected locally, it fetches the repository from GitHub and tracks origin/HEAD. Output defaults to out/scaffold-demo-defaults-transparent.mov.
Package dependencies are installed using npm. When bunx is installed, the runner triggers the scaffold flow, reusing the shared Chrome Headless Shell cache to prevent repeated downloads. In environments without bunx, it falls back directly to npx remotion render.
Network access, git, node, and npm are required environment prerequisites. If any of these command-line tools are missing, the execution fails during repository preparation.
What it helps with
- render a transparent ruler progress animation video
- clone or update the ruler-progress-animator repository
- export the default motion demo without manual Remotion setup
- reuse Chrome Headless Shell cache across video renders
Example prompts for the agent
- Render a ruler progress video to out/demo.mov
- Export the default ruler progress animation
- Clone ruler-progress-animator and generate the demo video
How to install ruler-progress-render
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a claude-code2Manually: put the files in place
~/.claude/skills/ruler-progress-render/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/ruler-progress-render/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a codex2Manually: put the files in place
.agents/skills/ruler-progress-render/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a cursor2Manually: put the files in place
.cursor/skills/ruler-progress-render/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills ruler-progress-render2Manually: put the files in place
.github/skills/ruler-progress-render/SKILL.md1Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a gemini-cli2Platform CLI
gemini skills install https://github.com/vibe-motion/skills --path ruler-progress-renderManually: put the files in place
.devin/skills/ruler-progress-render/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill ruler-progress-render -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about ruler-progress-render
How to install ruler-progress-render in Claude Code?
Run npx skills add vibe-motion/skills --skill ruler-progress-render -a claude-code. The skill file will be placed in ~/.claude/skills/ruler-progress-render/SKILL.md.
What does ruler-progress-render do?
It manages the ruler-progress-animator codebase and renders a ruler progress bar video file using Remotion.
What tools are required to run this skill?
You need git, node, npm, and active network access. Installing bunx is optional, though it speeds up renders through shared browser caching.
