{
  "markdown": "<p align=\"center\">\n  <img\n    src=\"https://lottie.host/cdb5e749-f393-4333-ad23-8200f121e8d3/Z4sIS9xKDC.svg?v=1\"\n    alt=\"dotLottie Animation\"\n    width=\"550\"\n  />\n</p>\n\n\n# Motion Design Skill\n\nUniversal motion design principles for AI agents. Philosophy-first, implementation-agnostic.\n\nTeaches agents to think like motion directors — choosing the right timing, easing, choreography, and emotional intent before writing a single line of animation code. Works with any animation system (CSS, Framer Motion, GSAP, Lottie, Spring, etc.).\n\n## Install\n\n```bash\nnpx skills add LottieFiles/motion-design-skill\n```\n\nSupports [40+ agents](https://skills.sh) including Claude Code, Cursor, Codex, GitHub Copilot, and more.\n\n## What's included\n\n**Core** (`SKILL.md`) — Quick reference with the 8-step checklist, motion personality archetypes, duration/easing tables, property selection guide, common patterns, and quality rules.\n\n**Philosophy** (`director/`) — Deep dives into the three pillars, Disney's 12 principles adapted for UI, emotion-to-motion mapping, choreography, narrative structure, and context adaptation.\n\n**Patterns** (`patterns/`) — Ready-to-use recipes for entrance/exit animations, state feedback (success, error, loading, hover), ambient/continuous motion, and multi-element choreography.\n\n**Reference** (`reference/`) — Lookup tables for timing and easing, property selection guide, quality checklist, and troubleshooting common animation problems.\n\n## When it activates\n\nThe skill activates when you're working on:\n\n- UI animations (buttons, cards, modals, page transitions)\n- Micro-interactions and feedback animations\n- Loading, success, or error states\n- Scroll-triggered or progress-based animations\n- Establishing brand motion identity\n- Multi-element choreography and sequencing\n\n## Example prompts\n\n```\nAdd a playful entrance animation to these card components\n```\n\n```\nCreate a loading → success → error state transition for this form submit button\n```\n\n```\nChoreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar\n```\n\n```\nReview my animation code and suggest improvements based on motion design principles\n```\n\n## Skill structure\n\n```\nskills/motion-design/\n├── SKILL.md                          # Main skill instructions (< 500 lines)\n├── director/\n│   ├── core-philosophy.md            # Three Pillars deep dive\n│   ├── decision-framework.md         # Full decision pipeline\n│   ├── disney-principles.md          # 12 principles, UI-adapted\n│   ├── motion-personality.md         # 4 archetypes + brand identity\n│   ├── emotion-mapping.md            # Emotion → motion translation\n│   ├── choreography.md              # Multi-element coordination\n│   ├── narrative-structure.md        # Micro-story framework\n│   └── context-adaptation.md         # Platform, a11y, performance\n├── patterns/\n│   ├── entrance-exit.md              # Entrance/exit recipes\n│   ├── state-feedback.md             # Success, error, loading, hover\n│   ├── ambient-continuous.md         # Looping, breathing, parallax\n│   └── multi-element.md             # Stagger + choreography recipes\n└── reference/\n    ├── timing-easing-tables.md       # Duration + easing lookups\n    ├── property-selection.md         # Property communication guide\n    ├── quality-checklist.md          # Evaluation criteria\n    └── troubleshooting.md           # Animation smells + fixes\n```\n\n## License\n\nMIT\n",
  "bytes": 3427,
  "sha": "9d43476646e1d0ae0f082d40877e19ce14dbe0215dd32c3887e8aad731959b03",
  "repo_slug": "lottiefiles/motion-design-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_lottiefiles_motion_design_skill_motion_d_ee18a966/readme"
}