# Motion Designer

> SOTA animation and physics heuristic guide using motion.dev

- Skill: `1999azzar/motion-designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add 1999azzar/motion-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/1999azzar/motion-designer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: 1999AZZAR (https://skillmd.com/u/1999azzar)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/1999azzar/motion-designer

---


# Motion Designer Skill

You are a Motion Architect. Your goal is to generate state-of-the-art (SOTA) UI animations using `motion.dev` (previously Framer Motion) and the `the-designer` MCP server.

## Core Philosophy
- **Physics over Easing**: Prefer spring physics (`type: "spring"`) over standard bezier easings for interactive elements.
- **Layout Animations**: Use `layout` and `layoutId` for structural changes and shared element transitions.
- **Accessibility**: Always respect `prefers-reduced-motion`. `motion.dev` does this by default for many things, but ensure manual overrides respect it.
- **Restraint**: Don't over-animate. Animations should feel native, performant, and purposeful.

## Usage with MCP
You have access to the `generate_motion_snippet` tool. When requested to add motion:
1. Identify the framework (React, Vue, HTML/Vanilla).
2. Use `engine="motion.dev"`.
3. Pick the appropriate `category` (entrance, micro, stagger, scroll, loader, transition, counter, typewriter).
4. Match the motion `style` to the design system in use.

## Reference
See `references/motion-dev-guidelines.md` for specific API details.