SkillHub

Skills

emilkowalski

15 skills in one repo.

emilkowalski on GitHub

skills Skill collection

Skills for Designers and Engineers.

54,934 stars on GitHub, Nov 9, 2026 · 15 skills

  1. emil-design-eng

    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.
    type:guidelineseffect:noneneeds:nonedesignanimation
    Age
    7 months
    Stars
    54.9K
    #39
    Total Downloads
    430K
    #46
    Weekly Downloads
    20.8K
    #34

  2. review-animations

    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.
    type:workfloweffect:noneneeds:noneanimationcode-review
    Age
    4 months
    Stars
    54.9K
    #39
    Total Downloads
    292K
    #67
    Weekly Downloads
    18K
    #47

  3. apple-design

    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.
    type:guidelineseffect:noneneeds:nonedesignanimation
    Age
    4 months
    Stars
    54.9K
    #39
    Total Downloads
    283K
    #68
    Weekly Downloads
    19K
    #46

  4. animation-vocabulary

    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.
    type:guidelineseffect:noneneeds:noneanimationlearning
    Age
    4 months
    Stars
    54.9K
    #39
    Total Downloads
    272K
    #72
    Weekly Downloads
    16.1K
    #52

  5. improve-animations

    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.
    type:workfloweffect:localneeds:subagentsanimationplanninghandoff
    Age
    3 months
    Stars
    54.9K
    #39
    Total Downloads
    258K
    #74
    Weekly Downloads
    17.2K
    #49

  6. find-animation-opportunities

    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.
    type:workfloweffect:noneneeds:noneanimationdesign
    Age
    3 months
    Stars
    54.9K
    #39
    Total Downloads
    242K
    #80
    Weekly Downloads
    16.3K
    #51

  7. pick-ui-library

    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.
    type:commandeffect:noneneeds:nonedesignimplementationstack:react
    Age
    3 months
    Stars
    54.9K
    #39
    Total Downloads
    216K
    #88
    Weekly Downloads
    15.5K
    #56

  8. animate

    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.
    type:workfloweffect:localneeds:noneanimationimplementation
    Age
    3 months
    Stars
    54.9K
    #39
    Total Downloads
    208K
    #91
    Weekly Downloads
    17.6K
    #48

  9. prototype

    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.
    type:workfloweffect:localneeds:noneprototypingdesign
    Age
    3 months
    Stars
    54.9K
    #39
    Total Downloads
    205K
    #92
    Weekly Downloads
    15.3K
    #57

  10. animate-expo

    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.
    type:workfloweffect:localneeds:noneanimationmobileimplementationperformancestack:expostack:react-nativestack:reanimated
    Age
    2 months
    Stars
    54.9K
    #39
    Total Downloads
    168K
    #98
    Weekly Downloads
    15K
    #59

  11. mobile-native

    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.
    type:workfloweffect:localneeds:nonemobiledesign
    Age
    7 weeks
    Stars
    54.9K
    #39
    Total Downloads
    119K
    top 11%
    Weekly Downloads
    15.9K
    #54

  12. break-ui

    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.
    type:workfloweffect:localneeds:nonetestingdesign
    Age
    5 weeks
    Stars
    54.9K
    #39
    Total Downloads
    97.7K
    top 12%
    Weekly Downloads
    16K
    #53

  13. animation-performance

    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.
    type:workfloweffect:noneneeds:noneanimationperformancedebugging
    Age
    4 weeks
    Stars
    54.9K
    #39
    Total Downloads
    69.8K
    top 16%
    Weekly Downloads
    16.5K
    #50

  14. remove-animations

    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.
    type:workfloweffect:localneeds:noneanimationdesign
    Age
    12 days
    Stars
    54.9K
    #39
    Total Downloads
    24.8K
    top 25%
    Weekly Downloads
    15.2K
    #58

  15. choreograph

    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.
    type:workfloweffect:localneeds:noneanimationdesignimplementation
    Age
    5 days
    Stars
    54.9K
    #39
    Total Downloads
    9.8K
    top 50%
    Weekly Downloads
    9.6K
    #64