motion-design-skills

agent
Security Audit
Pass
Health Pass
  • License — License: MIT
  • Description — Repository has a description
  • Active repo — Last push 0 days ago
  • Community trust — 223 GitHub stars
Code Pass
  • Code scan — Scanned 8 files during light audit, no dangerous patterns found
Permissions Pass
  • Permissions — No dangerous permissions requested

No AI report is available for this listing yet.

SUMMARY

Motion design fundamentals, engines, and brand elements as installable Claude Code skills — timing, typography, color, composition, After Effects, Remotion, logos, and backgrounds.

README.md

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.

Motion Design Skills — animated showcase

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.

Reviews (0)

No results found