# Motion Design (agent skill)

> Motion Design is an agent skill (a SKILL.md file) from LottieFiles/motion-design-skill. Applies motion design principles to create emotionally-driven, technically sound animations and transitions. It works with Claude Code, Codex, Cursor and GitHub Copilot and has 1,943 GitHub stars. Install it by copying the skill folder into your agent's skills directory.

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/LottieFiles/motion-design-skill |
| Skill path | skills/motion-design/SKILL.md |
| Skill name | motion-design |
| GitHub stars | 1,943 |
| Installs on skills.sh | not listed |
| License | MIT |
| Skills in repo | 1 |
| Plugin marketplace | no |
| Official | yes |
| Works with | Claude Code, Codex, Cursor, GitHub Copilot |
| Category | Design & frontend |
| Last commit | May 18, 2026 |

## When it triggers

- Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work.

## Add this skill

### Claude Code

```sh
git clone --depth 1 https://github.com/LottieFiles/motion-design-skill.git
cp -r motion-design-skill/skills/motion-design ~/.claude/skills/motion-design   # personal, or .claude/skills in a project
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/LottieFiles/motion-design-skill.git
cp -r motion-design-skill/skills/motion-design .agents/skills/motion-design   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/LottieFiles/motion-design-skill.git
cp -r motion-design-skill/skills/motion-design .cursor/skills/motion-design   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

---

Canonical page: https://appsgit.com/skills/lottiefiles-motion-design
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.