Source: emilkowalski/skills · Maintainer: community: Emil Kowalski · License: MIT · Checked: 24 October 2026
What is the review-animations skill?
The review-animations skill turns your coding agent into a strict reviewer for animation and motion code: it checks every transition against ten fixed standards, lists each problem in a Before, After and Why table, and ends with a Block or Approve decision. It is for frontend developers who want motion problems caught before merge, not after users feel them.
It comes from Emil Kowalski's emilkowalski/skills repo, where the README describes it as "Review your animations in a strict way, based on my rules." The skill's description reads: "Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned."
As of 24 October 2026, its skills.sh page listed about 252,000 installs (snapshot, 24 October 2026), second in the repo after emil-design-eng.
What does it do?
The skill does one thing. The SKILL.md says it reviews motion code only: "It does not write features, fix unrelated bugs, or review non-motion code." Asked to review general code, the agent declines and points you to a general review skill.
Invoked without a question, it replies with one fixed line ("I'm ready to review your animations against a high craft bar, my standards come from Emil Kowalski's animation philosophy.") and waits.
It is user-invoked. The frontmatter sets disable-model-invocation: true. Per the Claude Code skills docs, that prevents Claude from loading the skill automatically and is meant for workflows "you want to trigger manually with /name." Type /review-animations to run it.
The folder holds two files:
SKILL.md: the ten standards, escalation triggers, fix priority order and required output format.STANDARDS.md: the reference values the agent must cite instead of approximating: easing curves, a duration table, spring settings, gesture thresholds, clip-path patterns, performance and accessibility rules.
The ten standards every animation in the diff is measured against:
| Standard | What gets flagged |
|---|---|
| Justified motion | Animation with no purpose on a frequently seen element |
| Frequency-appropriate | Any animation on keyboard-initiated or 100+ times a day actions |
| Responsive easing | ease-in on UI, or weak built-in easing where a custom curve belongs |
| Sub-300ms UI | UI animations over 300ms with no stated reason |
| Origin and physical correctness | Popovers scaling from center, entrances from scale(0) |
| Interruptibility | Keyframes on toasts, toggles or drags that should retarget |
| GPU-only properties | Animating width, height, margin, padding, top or left |
| Accessibility | Missing prefers-reduced-motion handling, ungated hover motion |
| Asymmetric enter and exit | Same timing on press and release of a deliberate action |
| Cohesion | Motion that doesn't match the component's personality |
Beyond those, it flags transition: all on sight, and treats Framer Motion x, y and scale shorthands as a performance risk under load. STANDARDS.md explains why: those shorthands run on the main thread, so it recommends a full transform string instead.
When proposing fixes, the agent works down a preference order that starts with "Delete the animation," then reduce it, fix the easing, fix the origin, make it interruptible, move it to the GPU, make the timing asymmetric, polish, and last, accessibility and cohesion.
How do you install it?
The skills.sh page gives this command for the skills CLI:
npx skills add https://github.com/emilkowalski/skills --skill review-animations
The repo README's install command adds the whole collection, and the CLI lets you choose which of the 15 skills to keep:
npx skills@latest add emilkowalski/skills
Add -g to install for every project. The folder lands in .claude/skills/review-animations/ in your project, or ~/.claude/skills/review-animations/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.
On claude.ai, you can zip the folder and upload it under Customize > Skills, as the Claude help article on skills describes. Code execution must be turned on.
How do you use it?
Point it at specific files or a diff, because the output format asks for file:line citations. Example prompts (suggestions, not quotes from the repo):
/review-animations Review the motion in components/Dropdown.tsx and components/Toast.tsx./review-animations Check the animations in my staged changes before I open the PR./review-animations Our command palette feels slow. Review its open and close transitions./review-animations Review the drawer drag gesture and its dismiss animation.
Expect two parts back. Part 1 is a findings table with Before, After and Why columns, one row per issue. Part 2 groups the rest by impact, from "Feel-breaking regressions" down to accessibility, and closes with Block or Approve. The SKILL.md blocks on any feel-breaking regression, animation on a keyboard or high-frequency action, scale(0) or ease-in on UI, or a layout-property animation with an easy GPU fix.
There are no dependencies or API keys. It reviews any CSS, Framer Motion or Motion, or Web Animations API code your agent can read.
Tips and limits
- Default posture is "flag". The SKILL.md tells the agent to act as "a senior design engineer with a brutal eye for craft." Expect strict reviews; a working animation can still get blocked.
- Opinions, stated as rules. Values such as the 300ms ceiling and the 100+ times a day cut-off are Emil Kowalski's craft rules, not a web standard. Disagree where your product needs it.
- It won't fix code itself. It proposes changes in the table. Ask the agent to apply them afterwards, or use the repo's
improve-animationsskill, which the README says audits a codebase and produces prioritized plans. - When feel is uncertain, the skill recommends slow motion, frame-by-frame review in DevTools, and fresh eyes the next day rather than guessing.
- Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk. The skill runs no scripts.
The repo's MIT License (copyright 2026 Emil Kowalski) lets you copy and change the skill as long as you keep the notice.
Save it in your Kipt library
In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads SKILL.md and STANDARDS.md; for a repo with many skills, like this one, it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:
npx skills add https://github.com/<you>/<repo>.git --all -g
Kipt is not affiliated with Emil Kowalski or emilkowalski/skills.
Similar skills
- Emil Kowalski skill (emil-design-eng): the same rules as a building guide, not a reviewer.
- Apple design skill: Apple's fluid motion principles from the same repo, with spring values and gesture math.
- Web design guidelines skill: Vercel's broader UI audit, including motion and reduced-motion rules.
- Impeccable skill: design commands including
auditandcritique.