Command
/animate
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel smoother", fix janky transitions, or trim motion that's distracting.
One command from ui-craft.
shell
$ npx -y skills add educlopez/ui-craft --agent claude-codeShips with ui-craft. Installing the plugin gets this command.
How it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/animate
Context preview
What this command does when you run it.
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel smoother", fix janky transitions, or trim motion that's distracting.
Stats
Stars208
Forks9
LanguageGo
LicenseMIT
Ships with ui-craft
Command definition
animate.md
--- description: Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel smoother", fix janky transitions, or trim motion that's distracting. argument-hint: "[file or component path]" --- Add or fix animations in `$ARGUMENTS`. Load the `ui-craft` skill. **Step 1 — Decision Ladder**: run the Decision Ladder from `references/motion.md` first. Anything that fails it gets removed, not improved. **Step 2 — Pick the library**: - If user opted into a stack during Discovery → read `references/stack.md`. Use the matching section (Motion, GSAP, or Three.js). Never mix libraries on the same property. - Otherwise → CSS transitions / `@keyframes` / `animation-timeline: view()` only. **Step 3 — Apply motion budget**: | Element | Budget | |---|---| | Color/opacity | 100-150ms | | Small UI (tooltips, dropdowns) | 150-200ms | | Medium UI (modals, panels) | 200-300ms | | Large UI (page transitions, drawers) | 300-400ms | Exit ≈ 75% of entrance duration (shorter, same `ease-out` — or a flatter tail like `cubic-bezier(0.4, 0, 1, 1)` for a softer exit). Never `ease-in` on UI (see `references/motion.md`). `cubic-bezier(0.22, 1, 0.36, 1)` is a safe spring-like default. **Step 4 — Multi-stage sequences** → read `../examples/animation-storyboard.md`. Stagger 30-80ms, not 200ms.
