Individual skill

motion-design

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.

skills/motion-design/SKILL.md

Read pinned source

Source commit f9a8a041b85185ee4881b3471d3415e939aac772

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: Yes
Skill scan complete: Yes
Observed behavior: Instructions only
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

Claude Code

Destination .claude/skills/motion-design

(
  set -euo pipefail
  destination='./.claude/skills/motion-design'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/LottieFiles/motion-design-skill.git' "$work/repo"
  git -C "$work/repo" checkout --detach f9a8a041b85185ee4881b3471d3415e939aac772
  git -C "$work/repo" archive --format=tar 'f9a8a041b85185ee4881b3471d3415e939aac772:skills/motion-design' > "$work/skill.tar"
  mkdir -p -- './.claude/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Codex

Destination .agents/skills/motion-design

(
  set -euo pipefail
  destination='./.agents/skills/motion-design'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/LottieFiles/motion-design-skill.git' "$work/repo"
  git -C "$work/repo" checkout --detach f9a8a041b85185ee4881b3471d3415e939aac772
  git -C "$work/repo" archive --format=tar 'f9a8a041b85185ee4881b3471d3415e939aac772:skills/motion-design' > "$work/skill.tar"
  mkdir -p -- './.agents/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Cursor

Destination .cursor/skills/motion-design

(
  set -euo pipefail
  destination='./.cursor/skills/motion-design'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/LottieFiles/motion-design-skill.git' "$work/repo"
  git -C "$work/repo" checkout --detach f9a8a041b85185ee4881b3471d3415e939aac772
  git -C "$work/repo" archive --format=tar 'f9a8a041b85185ee4881b3471d3415e939aac772:skills/motion-design' > "$work/skill.tar"
  mkdir -p -- './.cursor/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Gemini CLI

Destination .gemini/skills/motion-design

(
  set -euo pipefail
  destination='./.gemini/skills/motion-design'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/LottieFiles/motion-design-skill.git' "$work/repo"
  git -C "$work/repo" checkout --detach f9a8a041b85185ee4881b3471d3415e939aac772
  git -C "$work/repo" archive --format=tar 'f9a8a041b85185ee4881b3471d3415e939aac772:skills/motion-design' > "$work/skill.tar"
  mkdir -p -- './.gemini/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

GitHub Copilot

Destination .github/skills/motion-design

(
  set -euo pipefail
  destination='./.github/skills/motion-design'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/LottieFiles/motion-design-skill.git' "$work/repo"
  git -C "$work/repo" checkout --detach f9a8a041b85185ee4881b3471d3415e939aac772
  git -C "$work/repo" archive --format=tar 'f9a8a041b85185ee4881b3471d3415e939aac772:skills/motion-design' > "$work/skill.tar"
  mkdir -p -- './.github/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

OpenCode

Destination .opencode/skills/motion-design

(
  set -euo pipefail
  destination='./.opencode/skills/motion-design'
  if [ -e "$destination" ] || [ -L "$destination" ]; then printf '%s\n' 'Destination already exists; nothing overwritten.' >&2; exit 1; fi
  work=$(mktemp -d)
  trap 'rm -rf -- "$work"' EXIT
  git clone --filter=blob:none --no-checkout -- 'https://github.com/LottieFiles/motion-design-skill.git' "$work/repo"
  git -C "$work/repo" checkout --detach f9a8a041b85185ee4881b3471d3415e939aac772
  git -C "$work/repo" archive --format=tar 'f9a8a041b85185ee4881b3471d3415e939aac772:skills/motion-design' > "$work/skill.tar"
  mkdir -p -- './.opencode/skills'
  mkdir -- "$destination"
  tar -xf "$work/skill.tar" -C "$destination"
)

Repository context

Repository stars (not skill ratings): 2,892
Repository last updated: May 18, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

agent-skills Repository topic
animation Repository topic
lottie Repository topic
motion-design Repository topic
ui Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 12,580 bytes
director/choreography.mddoc · 3,035 bytes
director/context-adaptation.mddoc · 3,066 bytes
director/core-philosophy.mddoc · 1,864 bytes
director/decision-framework.mddoc · 2,866 bytes
director/disney-principles.mddoc · 3,197 bytes
director/emotion-mapping.mddoc · 2,877 bytes
director/motion-personality.mddoc · 2,998 bytes
director/narrative-structure.mddoc · 2,407 bytes
patterns/ambient-continuous.mddoc · 2,823 bytes
patterns/entrance-exit.mddoc · 2,822 bytes
patterns/multi-element.mddoc · 2,362 bytes
patterns/state-feedback.mddoc · 3,062 bytes
reference/property-selection.mddoc · 2,922 bytes
reference/quality-checklist.mddoc · 2,080 bytes
reference/timing-easing-tables.mddoc · 2,900 bytes
reference/troubleshooting.mddoc · 2,709 bytes

Read excerpt


# Motion Design Skill

## When to Apply

Use this skill when:
- Creating UI animations (buttons, cards, modals, page transitions)
- Designing micro-interactions and feedback animations
- Building loading, success, or error states
- Animating illustrations or decorative elements
- Planning scroll-triggered or progress-based animations
- Establishing brand motion identity
- Choreographing multi-element sequences

**Decision tree:**