SkillHub

Skills

jakubkrehel

14 skills in 2 repos, most starred first.

jakubkrehel on GitHub

skills Skill collection

A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface.

11,765 stars on GitHub, Nov 9, 2026 · 13 skills · 1 bundle

  1. Better Interface

    Bundle of 8 skills
    Use it when:
    You want a screen or flow built or reviewed for accessibility, layout, copy, typography, color and visual polish, one domain at a time or all at once.
    It does:
    Six skills each own one domain; better-interface loads all six in a fixed order, accessibility first, and merges their findings into one table ranked by user impact.

    interface-review, better-interface, better-accessibility, better-layout, better-writing, better-typography, better-colors, better-ui

    Age
    4 months
    Stars
    11.8K
    #80
    Total Downloads
    45.4K
    top 19%
    Weekly Downloads
    3K
    top 18%

  2. better-ui

    Part of Better Interface
    Use it when:
    Your UI works but its surfaces, icons or motion feel slightly off.
    It does:
    Applies exact values, such as an outer radius equal to the inner radius plus padding, buttons pressing to 0.96 over 150ms, and 100ms staggers.
    type:guidelineseffect:noneneeds:nonedesignanimation
    Age
    4 months
    Stars
    11.8K
    #80
    Total Downloads
    45.4K
    top 19%
    Weekly Downloads
    2.9K
    top 18%

  3. better-typography

    Part of Better Interface
    Use it when:
    You're setting up or reviewing the type in an interface: sizes, spacing, wrapping and fonts.
    It does:
    Applies measured rules, such as unitless line-height, weight 400 or heavier below 18px, a 60–75 character line and 16px inputs on iOS.
    type:guidelineseffect:noneneeds:nonedesign
    Age
    4 months
    Stars
    11.8K
    #80
    Total Downloads
    40.1K
    top 19%
    Weekly Downloads
    3K
    top 18%

  4. better-colors

    Part of Better Interface
    Use it when:
    You're building a palette and color tokens, or checking existing ones for broken roles and failing contrast.
    It does:
    Builds one-hue ramps with a color library, gives every step a role, and names tokens in two tiers: by hue, then by job.
    type:guidelineseffect:noneneeds:nonedesigndesign-systemaccessibility
    Age
    4 months
    Stars
    11.8K
    #80
    Total Downloads
    38.1K
    top 20%
    Weekly Downloads
    2.6K
    top 19%

  5. better-layout

    Part of Better Interface
    Use it when:
    A layout has to hold up at narrow widths, at 200% zoom, in longer languages or mirrored for right-to-left.
    It does:
    Groups with space before lines, aligns to shared edges, keeps visual order equal to source order and writes direction-dependent CSS as start and end.
    type:guidelineseffect:noneneeds:nonedesign
    Age
    3 months
    Stars
    11.8K
    #80
    Total Downloads
    36.2K
    top 20%
    Weekly Downloads
    2.6K
    top 19%

  6. better-interface

    Only works as part of Better Interface
    Use it when:
    You want a screen, flow or whole interface reviewed for accessibility, layout, copy, type, color and polish at once.
    It does:
    Loads each better-* skill in a fixed order, from accessibility to polish, and merges their findings into one table ranked by user impact.
    type:workfloweffect:noneneeds:nonedesignaccessibilitycode-review
    Age
    3 months
    Stars
    11.8K
    #80
    Total Downloads
    35.2K
    top 20%
    Weekly Downloads
    2.5K
    top 19%

  7. better-accessibility

    Part of Better Interface
    Use it when:
    You're building or reviewing UI and want it to work by keyboard and screen reader and meet WCAG 2.2 AA.
    It does:
    Walks each flow keyboard-only, then as a screen-reader user, checking names, roles, states, focus, forms, announcements, motion and zoom.
    type:guidelineseffect:noneneeds:noneaccessibility
    Age
    3 months
    Stars
    11.8K
    #80
    Total Downloads
    34.9K
    top 20%
    Weekly Downloads
    2.5K
    top 19%

  8. better-writing

    Part of Better Interface
    Use it when:
    You're writing or reviewing the words in an interface: labels, buttons, errors, empty states and confirmations.
    It does:
    First lists the nouns, verbs and capitalization the product already uses, then writes or checks copy against them and its rules.
    type:guidelineseffect:noneneeds:nonewritingdesign
    Age
    3 months
    Stars
    11.8K
    #80
    Total Downloads
    34K
    top 21%
    Weekly Downloads
    2.4K
    top 19%

  9. interface-review

    Only works as part of Better Interface
    Use it when:
    You want to know whether a branch, pull request or uncommitted change made your interface worse.
    It does:
    Finds the change's scope, reviews the screens its files render in, reads removed lines for regressions and marks each finding Introduced, Regression or Pre-existing.
    type:workfloweffect:noneneeds:nonecode-reviewdesignaccessibility
    Age
    3 months
    Stars
    11.8K
    #80
    Total Downloads
    23K
    top 27%
    Weekly Downloads
    2.2K
    top 20%

  10. variant

    Use it when:
    You're designing one piece of UI, such as a metric card, and want to compare real alternatives before committing.
    It does:
    Picks one axis, such as structure, density, emphasis, type or voice, and builds three variants at different positions on it.
    type:workfloweffect:localneeds:nonedesignprototyping
    Age
    2 months
    Stars
    11.8K
    #80
    Total Downloads
    18.7K
    top 29%
    Weekly Downloads
    2.1K
    top 20%

  11. explain-interface

    Use it when:
    You see a site, visual effect or animation and want to know how it was built.
    It does:
    Reads the page in a scriptable browser or from its fetched HTML and CSS, and finds the layers behind the effect in paint order.
    type:workfloweffect:noneneeds:nonedesignanimationlearning
    Age
    2 months
    Stars
    11.8K
    #80
    Total Downloads
    18.1K
    top 30%
    Weekly Downloads
    2K
    top 20%

  12. break

    Use it when:
    You want to know whether one component holds up under worst-case content, sizes and states.
    It does:
    Reads the component's props, slots and states, keeps only the stress scenarios that can reach it, and renders each on a scratch page in your app.
    type:workfloweffect:localneeds:nonetestingdesign
    Age
    2 months
    Stars
    11.8K
    #80
    Total Downloads
    17.7K
    top 30%
    Weekly Downloads
    2K
    top 20%

  13. state-machine

    Use it when:
    You're working on how one component looks and want each of its states, such as loading, empty, error or a locked feature, one keypress away.
    It does:
    Finds the states the component's code can reach and feeds each mock data from the page, through props or the app's own data seam.
    type:workfloweffect:localneeds:nonedesignprototyping
    Age
    4 weeks
    Stars
    11.8K
    #80
    Total Downloads
    7.8K
    bottom 40%
    Weekly Downloads
    2.1K
    top 20%

  14. build-design

    Use it when:
    You have a Figma frame or a screenshot of a design and want it built in your app as drawn.
    It does:
    Reads exact values through the Figma MCP server, maps each to an existing token or component, builds only what the design shows, then compares element by element.
    type:workfloweffect:localneeds:mcpneeds:accountdesignimplementationdesign-systemstack:figma
    Age
    4 weeks
    Stars
    11.8K
    #80
    Total Downloads
    7.6K
    bottom 39%
    Weekly Downloads
    2K
    top 20%

make-interfaces-feel-better Skill collection

An agent skill that helps make your interface feel better.

3,956 stars on GitHub, Nov 9, 2026 · 1 skill

  1. make-interfaces-feel-better

    Use it when:
    You're building or reviewing UI that works but feels slightly off.
    It does:
    Applies 19 small rules, such as matching corner curves on nested boxes, centering icons by eye, shadows over borders, and subtle press animations.
    type:guidelineseffect:noneneeds:nonedesignanimation
    Age
    7 months
    Stars
    4K
    bottom 39%
    Total Downloads
    75.8K
    top 15%
    Weekly Downloads
    1.1K
    top 28%