motion-skills

Motion Graphics Skills for AI Coding Agents

> 55 open-source skills that teach your AI coding agent to make motion graphics, animation, and video — kinetic typography, data-driven charts, explainers, TikTok / Reels, 3D & WebGL, math animation, generative illustration, code-drawn canvas animation, transparent lower thirds, b-roll for talking-head videos, and web motion. Eighteen installable packs. Install one, and your agent just knows how.

Motion is the hardest thing to get right from a prompt: timing and easing, safe areas, frame-accurate rendering, on-brand type and color, a loop that actually loops. These skills encode that craft as agent-native workflows — each one teaches the agent *how a professional would build it*, with a deliver-and-verify loop (render a frame → screenshot → check) so it inspects its own output instead of hoping.

They're the open-source craft behind iart.ai, the AI motion agent. Bring them into the agent you already use — or let iart.ai run the whole pipeline for you.

The 18 packs

Each pack is its own repo, aimed at one audience. Install only what you need.

| Pack | For | Skills |
| tiktok-video-skills | TikTok / Reels / Shorts creators | 4 |
| text-message-video-skills | Text-message story creators | 1 |
| youtube-video-skills | Podcasters & YouTubers | 2 |
| ecommerce-video-skills | E-commerce sellers | 3 |
| ad-video-skills | Brand advertisers & marketers | 3 |
| data-animation-skills | Analysts & PMs | 3 |
| explainer-video-skills | Educators & content creators | 5 |
| map-animation-skills | Vox-style editorial maps | 1 |
| web-animation-skills | Frontend developers | 9 |
| motion-design-skills | Motion designers | 9 |
| kinetic-typography-skills | Kinetic type / text animation | 1 |
| freelance-motion-skills | Freelancers & studios | 5 |
| webgl-animation-skills | 3D / WebGL / technical | 3 |
| manim-skills | Math / educational animators | 1 |
| generative-illustration-skills | Generative-illustration & creative coders | 1 |
| javascript-animation-skills | Every frame drawn in JavaScript: zero-asset canvas films + code-made music | 2 |
| lower-thirds-skills | Streamers, podcasters & editors: transparent lower thirds for OBS, Premiere, Resolve | 1 |
| b-roll-skills | YouTubers, course creators & editors: b-roll motion graphics for talking-head videos, drawn from what is said | 1 |

Install

Each pack installs on its own:

bash
npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/data-animation-skills
…or any pack above

Or add one as a Claude Code plugin:

bash
/plugin marketplace add iart-ai/web-animation-skills

Once installed, skills are auto-discovered by Claude Code, Cursor, Codex, and 40+ agents — and activate on their own when your prompt matches the work.

What's a skill?

A skill is a self-contained folder (SKILL.md + references/) that teaches an agent one motion-graphics workflow — kinetic typography, beat-synced cuts, frame-accurate data charts, accessible web animation, and so on. No model fine-tuning, no plugin runtime: just the know-how, in a format every major agent already reads.

Skills that produce a visual artifact ship a deliver-and-verify loop plus a small scripts/ toolkit

……（后略，见原文）