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 14-pack open-source collection — install only what you need. Full hub: github.com/iart-ai