skills Skill collection
Skills for Designers and Engineers.
Source on GitHubSort and filter them in the skills list
54,934 stars on GitHub, Nov 9, 2026 · 15 skills
Its skills, most installed first
-
- Use it when:
- You're building or reviewing UI and want its animations, buttons and popovers to feel polished, not just work.
- It does:
- Applies design engineer Emil Kowalski's rules on whether to animate, which easing to use and how fast, plus component and gesture details.
- Age
- 7 months
- Stars
- 54.9K
- #39
- Total Downloads
- 430K
- #46
- Weekly Downloads
- 20.8K
- #34
-
- Use it when:
- You want animation or motion code checked against a strict bar before it ships.
- It does:
- Measures every animation in the change against ten standards, defaulting to flagging problems rather than approving.
- Age
- 4 months
- Stars
- 54.9K
- #39
- Total Downloads
- 292K
- #67
- Weekly Downloads
- 18K
- #47
-
- Use it when:
- You're building drags, swipes, sheets or spring animations on the web that should feel as fluid as iOS.
- It does:
- Applies Apple's WWDC developer-conference talks, mainly on fluid interfaces, translated to CSS, Pointer Events and spring animation libraries.
- Age
- 4 months
- Stars
- 54.9K
- #39
- Total Downloads
- 283K
- #68
- Weekly Downloads
- 19K
- #46
-
- Use it when:
- You can picture a motion effect but don't know its name, and want the right word to ask a designer or an AI for it.
- It does:
- Matches your loose description to the skill's own glossary of about 90 animation terms.
- Age
- 4 months
- Stars
- 54.9K
- #39
- Total Downloads
- 272K
- #72
- Weekly Downloads
- 16.1K
- #52
-
- Use it when:
- You want a roadmap of animation fixes across a whole app, not a review of one change.
- It does:
- Maps where motion lives, audits it in eight areas such as easing, interruptibility, performance and accessibility, then ranks confirmed findings by impact for the effort.
- Age
- 3 months
- Stars
- 54.9K
- #39
- Total Downloads
- 258K
- #74
- Weekly Downloads
- 17.2K
- #49
-
- Use it when:
- You want to know what in your interface could animate, or want it to feel more alive.
- It does:
- Sweeps the code for moments with no motion and puts each through four checks: how often it's seen, its purpose, a time budget, and whether motion helps.
- Age
- 3 months
- Stars
- 54.9K
- #39
- Total Downloads
- 242K
- #80
- Weekly Downloads
- 16.3K
- #51
-
- Use it when:
- You need toasts, a command menu, OTP inputs, charts, drag and drop or long lists, and want a trusted library instead of hand-rolled code.
- It does:
- Matches your task to a curated table of about 20 mostly React libraries, checking package.json first so it keeps what you already use.
- Age
- 3 months
- Stars
- 54.9K
- #39
- Total Downloads
- 216K
- #88
- Weekly Downloads
- 15.5K
- #56
-
- Use it when:
- You want to add motion to a web interface, such as a dropdown, modal, toast or drag, and want it right the first time.
- It does:
- Runs a fixed sequence: whether to animate, its purpose, the cheapest tool, properties, easing or spring, interruption and exit, then reduced-motion handling.
- Age
- 3 months
- Stars
- 54.9K
- #39
- Total Downloads
- 208K
- #91
- Weekly Downloads
- 17.6K
- #48
-
- Use it when:
- You know which UI piece you need, such as a toast or pricing card, but not which direction it should take.
- It does:
- Builds three to five working variants, each differing on a named axis such as layout, density, personality or motion, on a separate prototype page or in one HTML file.
- Age
- 3 months
- Stars
- 54.9K
- #39
- Total Downloads
- 205K
- #92
- Weekly Downloads
- 15.3K
- #57
-
- Use it when:
- You're adding motion, gestures, sheets, screen transitions, press feedback or haptics to an Expo app, or fixing motion that stutters on a phone.
- It does:
- Works through animate's decision sequence adapted to phones, building with Reanimated, Gesture Handler, Expo Router's native screens and expo-haptics, and keeping motion off the JavaScript thread.
- Age
- 2 months
- Stars
- 54.9K
- #39
- Total Downloads
- 168K
- #98
- Weekly Downloads
- 15K
- #59
-
- Use it when:
- A web app or PWA looks fine in desktop Chrome but feels like a website, not an app, on a phone.
- It does:
- Matches what you see to a symptom table and applies the fix, usually a single CSS declaration or meta tag.
- Age
- 7 weeks
- Stars
- 54.9K
- #39
- Total Downloads
- 119K
- top 11%
- Weekly Downloads
- 15.9K
- #54
-
- Use it when:
- A component or screen looks right with demo data and you want to see what real users' data does to it.
- It does:
- Builds a realistic worst-case dataset behind a dev-only Demo data / Worst case toggle, then checks it at several widths, 200% zoom, and dark mode or right-to-left if supported.
- Age
- 5 weeks
- Stars
- 54.9K
- #39
- Total Downloads
- 97.7K
- top 12%
- Weekly Downloads
- 16K
- #53
-
- Use it when:
- An animation stutters or drops frames, or you're choosing which property to animate, or CSS versus JavaScript, on performance grounds.
- It does:
- Lists every animation with what drives it and what it animates, then works down seven causes ordered by how often each is to blame.
- Age
- 4 weeks
- Stars
- 54.9K
- #39
- Total Downloads
- 69.8K
- top 16%
- Weekly Downloads
- 16.5K
- #50
-
- Use it when:
- An app feels slow or over-animated and you want motion taken out, not added or tuned.
- It does:
- Puts every animation through a decision tree: keyboard-triggered, seen 100+ times a day or on data you read means delete; frequent or over 300ms means reduce.
- Age
- 12 days
- Stars
- 54.9K
- #39
- Total Downloads
- 24.8K
- top 25%
- Weekly Downloads
- 15.2K
- #58
-
- Use it when:
- You're building several things that move at once, such as a staggered list, hero entrance, view swap or multi-step flow, or fixing one that feels mechanical or slow.
- It does:
- Gives each moving element a role (lead, support, decoration or static) and keeps only lead and support moving, then decides whether each pair moves together, overlaps or runs in sequence.
- Age
- 5 days
- Stars
- 54.9K
- #39
- Total Downloads
- 9.8K
- top 50%
- Weekly Downloads
- 9.6K
- #64