Apply interface craft when building or reviewing UI - motion, easing, timing, springs, component feel, and visual foundations.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/13/2026
What it changes
Passed 20 of 21 test cases with the skill, and 12 of 21 without it.
Without skill59%
With skill95%
Checks it passed that the model alone missed
The command palette entry recommends no animation.
The side drawer timing duration is allowed up to 500ms.
The duration is categorized under occasional UI elements.
and 6 more in the full report
8 fixed13 passed either way1 still failing0 broke
Pass-rate lift
+36 pp
Tokens
+22%
Agent turns
0%
Response time
-34%
Model gemini-3.6-flashMeasured 8/13/2026v121 of 22 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 7 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 7
Prompt
What duration should be used for hover tooltips appearing over icon buttons in a crowded workspace toolbar? Provide the recommended duration range in milliseconds.
What was checked, without and with the skill
Checked
Without skill
With skill
The recommended tooltip duration falls within 125ms to 200ms.
Missed
Passed
case-10 · gemini-3.6-flash · 8/13/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md101 linessingle file
design-engineering
In a world where most software works well enough, feel is the differentiator.
Most of what makes an interface feel right is detail the user never
consciously notices - the aggregate of small correct choices. Build for that
aggregate.
Motion decision framework
Answer these in order before writing any animation.
1. Should it animate at all?
The deciding factor is frequency. The more often a user sees it, the less it
should move.
How often the user sees it
Decision
100+ times/day (shortcuts, command palette)
No animation, ever
Tens of times/day (hover, list nav)
Remove or drastically reduce
Occasional (modals, drawers, toasts)
Standard animation
Rare or first-time (onboarding, celebration)
Room for delight
Never animate a keyboard-initiated action. It repeats all day; animation makes
it feel slow and disconnected from the keypress.
2. What is the purpose?
Every animation needs an answer to "why does this move?" Valid ones: spatial
consistency (enters and exits the same edge), state change, feedback (a press
that confirms the interface heard you), or preventing a jarring appear/disappear.
"It looks cool" is not a purpose for anything the user sees often.
3. What easing?
Entering or exiting -> ease-out (fast start, feels responsive).