🎨 Design

animate

Name: animate
Author: emilkowalski

by emilkowalski7 days ago40.1k

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

Install

npx skills add https://github.com/emilkowalski/skills --skill animate

Show step-by-step

1
Open your terminal
- Mac: Press ⌘ Space, type "Terminal", press Enter
- Windows: Press Win R, type "cmd", press Enter
2
Paste the command above and press Enter
Use the Copy command button, then paste in your terminal (Mac: ⌘V, Windows: Ctrl V).
3
Restart Claude Code
Close and reopen Claude Code, or start a new session, so it picks up the new skill.

Where it lives

~/.claude/skills/emilkowalski--skills--skills--animate/
├── SKILL.md
└── ... (skill resource files)

View on GitHub

Comments

X@emilkowalski

"I reached a point where basically of my animations/interactions work is done without touching the code. The workflow looks roughly like this: - Start with..."