Skip to content
Get packs

skills

A collection of agent skills for building better user interfaces.

GitHub Download source
Stars
10.2k
Forks
395
Licence
MIT
Language
Markdown
Last update
4 days ago
Type
AI model / agent

What it is

This is a set of reusable instruction packages, called skills, for AI coding agents. Each skill covers one part of interface work, such as accessibility, typography, colors, layout, or UI copy. The README says the topics come from the author's website and design engineering magazine.

  • Run better-interface on a screen to get one ranked report across accessibility, layout, writing, typography, color, and UI polish
  • Use better-colors to generate a palette, name semantic tokens, and measure contrast
  • Use better-accessibility to review keyboard focus, ARIA, and forms against WCAG 2.2
  • Use build-design to build UI from a Figma file or design image using the project's existing components

Great for

  • Developers who use an AI coding agent and want it to produce polished interfaces
  • Designers or engineers who want a checklist-style review of an existing screen or flow
  • Teams who want accessibility and contrast checks built into their agent workflow
  • Developers reviewing a branch or pull request for interface regressions

Not ideal for

  • People who do not use AI coding agents, since the skills are built to run inside them
  • Teams needing a guaranteed accessibility audit, because the README does not say the skills replace expert review
  • Projects that need skills outside the interface domain, such as backend or data work
Step-by-step guide: how to use skillsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js (needed for npx; version not stated in README) · An AI coding agent such as Claude Code

    Install the skills

    npx skills add jakubkrehel/skills

    Claude Code plugin: add marketplace (run inside Claude Code)

    /plugin marketplace add jakubkrehel/skills

    Claude Code plugin: install (run inside Claude Code)

    /plugin install interfaces@interfaces
  2. 2

    Run it

    • Install the skills with the npx command or the Claude Code plugin commands
    • Open your project in your AI coding agent
    • Ask the agent to use a skill, such as better-interface, on a screen or component
    • For skills marked user-invoked, start them directly as the README describes
  3. 3

    Get the most out of it

    • Use better-interface for a broad review and the specialized skills (better-colors, better-typography) for focused fixes
    • Use interface-review on a branch or pull request to catch problems your change introduced
    • Use state-machine or break to check how a component behaves across its states and scenarios
    • Use build-design with your project's existing tokens and components so output matches your codebase

Downloads

Source code (.zip)main branch · straight from GitHubOfficial website & docsjakub.kr/skills

Strengths

  • Covers many interface topics in one collection, from typography to UI copy
  • Each skill has a focused scope described in the README
  • Installs with a single npx command or as a Claude Code plugin

Trade-offs

  • The README does not describe how the skills perform on real projects or how results are verified
  • Several skills are marked user-invoked, so they need a person to start them
  • The README is short on details about which agents are supported beyond Claude Code

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-11-02 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.