motion-design-skill
General motion design principles for AI agents, including timing, easing, choreography, and Disney animation principles.
- Type
- Agent Skill
- Open source
- Yes
- GitHub Stars
- ★ 1.0k
- Source
- skill-github
Overview
This skill teaches AI agents to think like a motion director, selecting appropriate timing, easing, choreography, and emotional intent before writing any animation code. Compatible with any animation system (CSS, Framer Motion, GSAP, Lottie, Spring, etc.). Includes an 8-step checklist, motion personality prototypes, ease curves, property selection guide, common patterns, and quality rules to help AI agents better understand and apply motion design principles.
Capabilities
- ▪Timing control
- ▪Easing effects
- ▪Multi-element choreography
- ▪Emotional mapping
- ▪Narrative structure
- ▪Contextual adaptation
Use cases
Setup
npx skills add LottieFiles/motion-design-skill
This information was compiled by AI from public sources and may contain inaccuracies — please refer to the source.
FAQ
Which animation systems does this skill support?
Supports CSS, Framer Motion, GSAP, Lottie, Spring, and others.
How is this skill activated?
It automatically activates when designing UI animations, micro-interactions, loading states, and similar use cases.
Related skills
video-shotcraft
AI video skill for creating cinematic product promotional videos.
manim_skill
An Agent skill for creating 3Blue1Brown-style animations with Manim.
drawio-skill
Generate draw.io diagrams from natural language, supporting multiple presets and export formats.
ai-design-skills
Provides design capabilities for AI coding tools, supporting multiple AI assistants.
logo-generator-skill
Professional SVG logo generator with multiple design variants and presentation backgrounds.
claude-skill-aso-appstore-screenshots
Generate high-quality App Store screenshots to boost app download rates.