Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/anim
Tasteful, subtle web UI animation following Emil Kowalski / animations.dev principles.
Passed 22 of 22 test cases with the skill, and 11 of 22 without it.
and 12 more in the full report
11 fixed11 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are building a global search modal (Cmd+K command palette) in our React application. What animation curve and stagger duration should we apply to the modal overlay and action items when triggered via keyboard shortcuts?
| Checked | Without skill | With skill |
|---|---|---|
| The response states that command palette opening triggered by keyboard shortcuts should appear instantly without animation. | Missed | Passed |
| The response avoids applying slide, fade, or scale transitions to keyboard-triggered command palettes. | Missed | Passed |
The instructions your model reads when the skill loads.
Name: anim
Purpose: Tasteful, subtle web animations following Emil Kowalski's philosophy and animations.dev principles. Use this skill when adding motion to interfaces — hover states, page transitions, micro-interactions, loading states, or any UI animation — so motion stays refined and purposeful, not decorative noise.
Applies when: Adding or reviewing UI motion (CSS, Web APIs, or React); hover and press feedback; entrances/exits; modals, toasts, menus; loading and skeleton patterns; staggered reveals; page or view transitions.
Do not use when: Motion would hurt clarity or accessibility; the task is only motion/react plumbing — pair with the motion skill for API specifics. Skip motion for validation errors, critical errors, actively read content, and high-frequency live updates.
prefers-reduced-motion or useReducedMotion); avoid layout-affecting properties and animating on every re-render.Animation should be invisible. When done right, users don't notice animation — they notice that the interface feels good. The moment someone says "nice animation," you've probably overdone it.
"The best animations are the ones you don't notice." — Emil Kowalski
Micro-interactions: 150-250ms. Hovers, button presses, toggles. Anything faster feels instant (good); anything slower feels sluggish (bad).
Standard transitions: 200-350ms. Modals opening, panels sliding, content appearing. This is your bread and butter.
Complex orchestrations: 400-600ms total. Page transitions, multi-step reveals. Never longer unless you have a very good reason.
Exit animations should be faster than entrances. Users are waiting to do something next. Enter at 300ms, exit at 200ms.
Stagger delays: 30-60ms between items. Longer staggers (100ms+) feel like a slideshow. Keep it tight.
Never animate for more than 1 second total. If your animation takes longer, it's not an animation - it's a loading screen.
test cases passed, vs 11 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.