generative-illustration — Claude Code skill: what it does, install
Guides coding agents to build motion graphics from isolated AI vector assets and render deterministic Canvas animations to MP4.
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-codeWhat generative-illustration does
The skill establishes a practical motion design workflow. AI image models output flat, ungrouped vector paths without distinct layers, making it impractical to rig a finished illustration. The agent solves this by prompting for isolated elements on solid white backgrounds, deleting background paths with a script, and treating each item as an independent sprite.
All visual properties on the <canvas> derive strictly from time parameter t. The harness avoids requestAnimationFrame loops and CSS transitions because they fall out of sync during frame capture. Playwright advances the clock in discrete increments, captures screenshots, and passes them to FFmpeg to create the video.
Local animation rendering needs no API keys. The entire capture process runs on your machine using Node with Playwright and FFmpeg. An OpenRouter or Replicate key is required only if you want the agent to call Recraft for vector art or Lyria for backing music.
What it helps with
- split an illustration concept into distinct AI-generated sprites
- strip solid background paths from generated vector files
- build deterministic canvas motion keyed to exact time values
- render video frames via headless browser into an MP4 file
- generate background audio and combine it with the video
Example prompts for the agent
- Create an animated motion piece featuring an opening flower and export it to MP4
- Build a deterministic canvas timeline for isolated vector sprites
- Strip the white background from these Recraft SVGs and animate their entrance
How to install generative-illustration
1Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-code2Manually: put the files in place
~/.claude/skills/generative-illustration/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/generative-illustration/
1Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a codex2Manually: put the files in place
.agents/skills/generative-illustration/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a cursor2Manually: put the files in place
.cursor/skills/generative-illustration/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install iart-ai/generative-illustration-skills generative-illustration2Manually: put the files in place
.github/skills/generative-illustration/SKILL.md1Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a gemini-cli2Platform CLI
gemini skills install https://github.com/iart-ai/generative-illustration-skills --path skills/generative-illustrationManually: put the files in place
.devin/skills/generative-illustration/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -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 generative-illustration
How do I install generative-illustration in Claude Code?
Run npx skills add iart-ai/generative-illustration-skills --skill generative-illustration -a claude-code in your terminal.
What is required to render animation output locally?
You need Node with Playwright for browser frame capture and FFmpeg to encode the video. No API key is required if you supply your own image assets.
When should this skill be avoided?
Avoid using it for data charts, pure kinetic typography, or WebGL particle setups. Those tasks belong in dedicated tools like chart-animation, kinetic-typography, or webgl-animation.
