Motion design fundamentals, engines, and brand elements as installable skills for AI coding agents — timing, typography, color, composition, After Effects, Remotion, logos, and backgrounds.
npx skills add iart-ai/motion-design-skillsOr add it as a Claude Code plugin marketplace:
/plugin marketplace add iart-ai/motion-design-skillsthen /plugin install motion-design-skills.
The skills run in Claude Code, Cursor, Codex, and 40+ agents. The full agent runs at iart.ai.
| Skill | What it does |
|---|---|
| animation-principles | Tech-agnostic timing, easing, and the 12 principles for natural-feeling motion. |
| color-motion | Palettes, gradients, perceptual interpolation (OKLCH/Lab), grading, and render color management. |
| shot-composition | Grids, safe areas, focal hierarchy, and 2D/3D camera framing across aspect ratios. |
| motion-art-direction | Senior creative direction — motion language, tone, pacing, hierarchy, and restraint. |
| after-effects | AE expressions, rigging, export recipes, performance triage, and project hygiene. |
| beat-sync-editing | Cut to the beat — editing rhythm, transitions, retiming, and speed ramps. |
| remotion-video | Programmatic, data-driven video in React rendered to MP4/GIF via CLI or renderer. |
| logo-animation | Logo reveals, stingers, splash screens, and loaders for web, video, and app. |
| motion-background | Mesh gradients, shader auroras, particle constellations, and subtle looping backgrounds. |
- You ask to fix, time, or polish how something moves (stiff, floaty, robotic, snappy).
- You're animating text, logos, or backgrounds for the web, video, or an app.
- You're building or rendering video programmatically with Remotion or working in After Effects.
- You're directing the overall look — pacing, color, composition, and consistency.
- You're editing a sequence to music or planning shot rhythm.
- "Make this animation feel natural — it looks robotic and stiff."
- "Build a kinetic typography video with a staggered split-text reveal."
- "Animate our logo into a 3-second brand intro with a sound-logo sync."
- "Create a data-driven video in Remotion that renders one MP4 per CSV row."
- "Add a subtle looping mesh-gradient background behind the hero."
- animation-principles
- color-motion
- shot-composition
- motion-art-direction
- after-effects
- beat-sync-editing
- remotion-video
- logo-animation
- motion-background
motion-design motion-graphics after-effects remotion animation-principles logo-animation motion-background claude-skill
Part of a 14-pack open-source collection — install only what you need. Full hub: github.com/iart-ai
tiktok-video-skills (TikTok / Reels / Shorts) · text-message-video-skills (Text-message stories) · youtube-video-skills (Podcasters & YouTubers) · ecommerce-video-skills (E-commerce sellers) · ad-video-skills (Brand advertisers) · data-animation-skills (Analysts & PMs) · explainer-video-skills (Educators) · map-animation-skills (Vox-style maps) · web-animation-skills (Frontend devs) · kinetic-typography-skills (Kinetic type / text) · freelance-motion-skills (Freelancers & studios) · webgl-animation-skills (3D / WebGL) · manim-skills (Math / educational)
Install any of them:
npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/text-message-video-skills
npx skills add iart-ai/youtube-video-skills
npx skills add iart-ai/ecommerce-video-skills
npx skills add iart-ai/ad-video-skills
npx skills add iart-ai/data-animation-skills
npx skills add iart-ai/explainer-video-skills
npx skills add iart-ai/map-animation-skills
npx skills add iart-ai/web-animation-skills
npx skills add iart-ai/kinetic-typography-skills
npx skills add iart-ai/freelance-motion-skills
npx skills add iart-ai/webgl-animation-skills
npx skills add iart-ai/manim-skillsMIT
Built by iart.ai — the AI motion agent: describe it in a prompt — or point it at a CSV or brand kit — and get editable, on-brand motion graphics with exact text and numbers, one-click edits, and batch export.