motion-budget
"Use when adding or changing UI animation or transitions - duration table, under-300ms rule, frequency rule."
Instal·la
npx skillscat add yotamleo-org/himmel/motion-budget Instal·la des del registre de SkillsCat.
SKILL.md
Motion budget
Durations:
| Kind | Duration |
|---|---|
| Micro-interactions | 100-150ms |
| Standard UI (tooltips, dropdowns) | 150-250ms |
| Modals, drawers | 200-300ms |
| Page transitions | 300-400ms |
Keep UI animation under 300ms; page transitions (300-400ms) are the only exception.
Frequency: 100+ uses a day means no animation; occasional use gets standard animation; rare or first-time use may add delight.
Source: Emil Kowalski, https://x.com/emilkowalski/status/2110429909160264027. For the full skills launch with --profile design,design-motion.
Instal·la
npx skillscat add yotamleo-org/himmel/motion-budget Instal·la des del registre de SkillsCat.