Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →wshobson/interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns.
Passed 22 of 22 test cases with the skill, and 20 of 22 without it.
2 fixed20 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are implementing a select dropdown menu transition in a custom UI component. The current implementation uses a 700ms transition for opening and closing the menu panel. What timing scale duration range should be applied to small component transitions like dropdowns?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends a duration between 200ms and 300ms for small component transitions. | Missed | Passed |
The instructions your model reads when the skill loads.
Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.
Motion should communicate, not decorate:
| Duration | Use Case |
|---|---|
| 100-150ms | Micro-feedback (hovers, clicks) |
| 200-300ms | Small transitions (toggles, dropdowns) |
| 300-500ms | Medium transitions (modals, page changes) |
| 500ms+ | Complex choreographed animations |
/* Common easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
test cases passed, vs 20 / 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.