Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When adding polish to UI interactions, implementing loading states, page transitions, microinteractions, gesture or feedback patterns in a frontend project.
prefers-reduced-motion and performance best practicesDevelopers get copy-paste interaction components and design guidance that create delightful, accessible, 60fps user experiences with consistent motion language.
Use Cases
A frontend developer is building a SaaS dashboard and wants polished loading states and toggles. Using this skill, they copy skeleton screen and spring-toggle code, apply the timing scale, and respect reduced-motion. Result: professional, accessible UI that reduces perceived latency and improves user trust without reinventing patterns.
A mobile web app team needs swipe-to-dismiss cards and page transitions. They use the gesture and AnimatePresence patterns from the skill, keeping 60fps via transform/opacity and cleaning listeners on unmount. Value: faster delivery of delightful mobile UX with consistent motion and no jank or memory leaks.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File