Pack · #315 trending skills repo · ↗ +14 stars this week
Motion Design Skills
iart-ai/motion-design-skills
Motion design fundamentals, engines, and brand elements as installable Claude Code skills — timing, typography, color, composition, After Effects, Remotion, logos, and backgrounds.
- Stars
- 229
- This week
- +14
- Forks
- 36
- Open issues
- 0
- Skills inside
- 9
Get started
Install the skills
npx skills add iart-ai/motion-design-skillsInstalls into Claude Code, Codex, Cursor, OpenCode and the other agents it finds on your machine.
/plugin marketplace add iart-ai/motion-design-skillsRun inside Claude Code, then pick what to install from /plugin.
git clone --depth 1 https://github.com/iart-ai/motion-design-skills.git /tmp/motion-design-skills
cp -r /tmp/motion-design-skills ~/.claude/skills/motion-design-skillsClaude Code reads ~/.claude/skills/ (or .claude/skills/ in a project). Other agents read the same SKILL.md format from their own skills folder.
Inside this repo
9 skills
skills/after-effectsanimation-principlesThis skill should be used when the user asks to "make this animation feel natural", "fix motion that feels stiff/floaty/cheap", "my animation looks robotic", "choose an easing curve", "how do I use the Graph Editor", "add overshoot or bounce", "Easy Ease isn't enough", "make snappy motion", "pick a skills/animation-principlesbeat-sync-editingThis skill should be used when the user asks to "cut to the beat", "fix the pacing", "edit this sequence", "sync cuts to music/BPM", "add a match cut / J-cut / L-cut", "build a speed ramp", or "plan a shot sequence / edit timeline". Covers editing rhythm, transitions, retiming, and translating an edskills/beat-sync-editingcolor-motionThis skill should be used when the user asks to "build a color palette for a motion piece", "make a gradient background", "animate a color transition", "interpolate colors smoothly", "fix muddy/gray gradients", "convert colors to OKLCH", "color-grade a video for mood", "fix washed-out After Effects skills/color-motionlogo-animationThis skill should be used when the user asks to "animate our logo", "make a logo intro/stinger", "build a brand reveal", "create an app splash animation", "loop a loader logo", "draw on our SVG mark", "morph an icon into the wordmark", or "sync the logo to a sound-logo". Covers web (SVG/Lottie), vidskills/logo-animationmotion-art-directionThis skill should be used when the user asks to "direct a motion graphics video", "do creative/art direction for a video", "define a motion language", "set the tone and pacing", "make the animation feel consistent", "decide what to animate (and what not to)", "turn a brief/brand into motion choices"skills/motion-art-directionmotion-backgroundThis skill should be used when the user asks to "add an animated background", "build a mesh/gradient background", "make an aurora/shader background", "add constellation/particle background", "animated hero background", or "a subtle looping background behind content". Covers CSS mesh gradients, GLSL skills/motion-backgroundremotion-videoThis skill should be used when the user asks to "make a video with Remotion", "create a programmatic/data-driven video in React", "render an MP4/GIF from code", "animate with useCurrentFrame/interpolate/spring", "sync video to audio/beats", or "render a templated video per record headlessly". Coversskills/remotion-videoshot-compositionThis skill should be used when the user asks to "compose a frame", "set up a grid", "plan shot composition", "place the focal point", "decide where elements enter and exit", "add a parallax/camera move", "adapt a layout for 16:9 / 9:16 / 1:1", or "keep content inside safe areas". Covers grids, safe skills/shot-compositionDocumentation
README
Motion Design Skills
Motion design fundamentals, engines, and brand elements as installable skills for AI coding agents — timing, typography, color, composition, After Effects, Remotion, logos, and backgrounds.
Install
npx skills add iart-ai/motion-design-skills
Or add it as a Claude Code plugin marketplace:
/plugin marketplace add iart-ai/motion-design-skills
then /plugin install motion-design-skills.
The skills run in Claude Code, Cursor, Codex, and 40+ agents. The full agent runs at iart.ai.
What's included
| 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. |
When it activates
- 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.
Example prompts
- "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."
Skills
- animation-principles
- color-motion
- shot-composition
- motion-art-direction
- after-effects
- beat-sync-editing
- remotion-video
- logo-animation
- motion-background
Topics
motion-design motion-graphics after-effects remotion animation-principles logo-animation motion-background claude-skill
More packs
Part of a 19-pack open-source collection: install only what you need. Browse every pack and skill at iart.ai/skills, or the hub at github.com/iart-ai/motion-skills.
tiktok-video-skills (TikTok / Reels / Shorts creators) · text-message-video-skills (Text-message story creators) · youtube-video-skills (Podcasters & YouTubers) · ecommerce-video-skills (E-commerce sellers) · ad-video-skills (Brand advertisers & marketers) · data-animation-skills (Analysts & PMs) · explainer-video-skills (Educators & content creators) · map-animation-skills (Vox-style editorial maps) · web-animation-skills (Frontend developers) · motion-design-skills (Motion designers) · kinetic-typography-skills (Kinetic type / text animation) · freelance-motion-skills (Freelancers & studios) · webgl-animation-skills (3D / WebGL / technical) · manim-skills (Math / educational animators) · generative-illustration-skills (Generative-illustration & creative coders) · javascript-animation-skills (Every frame drawn in JavaScript) · lower-thirds-skills (Streamers, podcasters & editors) · b-roll-skills (YouTubers, course creators & editors) · talking-head-skills (Creators & educators)
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/motion-design-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-skills
npx skills add iart-ai/generative-illustration-skills
npx skills add iart-ai/javascript-animation-skills
npx skills add iart-ai/lower-thirds-skills
npx skills add iart-ai/b-roll-skills
npx skills add iart-ai/talking-head-skills
License
MIT
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.