SkillHub

Skills ibelick

ui-skills Skill collection

Skills for Design Engineers.

Source on GitHubSort and filter them in the skills list

10,844 stars on GitHub, Nov 9, 2026 · 7 skills

Its skills, most installed first

  1. fixing-motion-performance

    Use it when:
    Animations stutter or transitions jank, or you're adding scroll-linked motion, blur or animated layout.
    It does:
    Applies nine groups of rules in priority order, from never interleaving layout reads and writes to staying inside your animation library.
    type:guidelineseffect:noneneeds:noneanimationperformancecode-review
    Age
    9 months
    Stars
    10.8K
    #83
    Total Downloads
    28.5K
    top 24%
    Weekly Downloads
    840
    top 30%

  2. baseline-ui

    Use it when:
    An agent's UI code looks generic and you want firm rules for it, or a file checked against them.
    It does:
    Applies MUST, SHOULD and NEVER rules on stack, components, interaction, animation, typography, layout, performance and visual design.
    type:guidelineseffect:noneneeds:nonedesignanti-slopanimationaccessibilitycode-reviewstack:tailwindstack:react
    Age
    9 months
    Stars
    10.8K
    #83
    Total Downloads
    26K
    top 25%
    Weekly Downloads
    894
    top 30%

  3. fixing-accessibility

    Use it when:
    You add buttons, links, forms, dialogs, menus or keyboard shortcuts, or want a file checked for accessibility.
    It does:
    Applies rules in priority order: accessible names, keyboard access, focus and dialogs, semantics, forms and errors, announcements, contrast, media.
    type:guidelineseffect:noneneeds:noneaccessibilitycode-review
    Age
    9 months
    Stars
    10.8K
    #83
    Total Downloads
    23.4K
    top 26%
    Weekly Downloads
    792
    top 30%

  4. fixing-metadata

    Use it when:
    You ship new pages, fix how links look when shared, or set up titles, canonical URLs or structured data.
    It does:
    Finds pages with missing or wrong metadata, checks them against ranked rules and fixes duplicates and indexing problems first.
    type:workfloweffect:localneeds:noneseo
    Age
    9 months
    Stars
    10.8K
    #83
    Total Downloads
    19.5K
    top 29%
    Weekly Downloads
    658
    top 31%

  5. improve-ui

    Use it when:
    You want an interface reviewed or cleaned up without losing its identity, or you suspect design-system drift.
    It does:
    Traces one surface's routes, components and tokens, and keeps a finding only with a cited rule, a proven runtime path and one correction.
    type:workfloweffect:localneeds:nonedesigndesign-systemcode-reviewhandoff
    Age
    3 months
    Stars
    10.8K
    #83
    Total Downloads
    9.3K
    bottom 48%
    Weekly Downloads
    751
    top 30%

  6. ui-skills-root

    Use it when:
    You start UI work and want the agent to pull in only the UI guidance the task needs.
    It does:
    Checks the task is UI work, picks a category, lists its skills with npx ui-skills and loads the narrowest ones.
    type:routereffect:noneneeds:cliby:officialskill-discoverydesign
    Age
    4 months
    Stars
    10.8K
    #83
    Total Downloads
    8.1K
    bottom 41%
    Weekly Downloads
    552
    top 32%

  7. create-design-md

    Use it when:
    You want coding agents to have lasting UI context for a product, or to reconstruct a live site's visual system.
    It does:
    Traces tokens, themes, shared components and guidance in your repo, or computed styles on up to three pages of a site, and keeps only what evidence supports.
    type:workfloweffect:localneeds:clineeds:browserdesign-systemdocs-writingdesignstack:design-md
    Age
    3 months
    Stars
    10.8K
    #83
    Total Downloads
    5.2K
    bottom 6%
    Weekly Downloads
    415
    top 46%