jakubkrehel/skills

A collection of agent skills that help you build great interfaces

Summary

jakubkrehel/skills is a Markdown-based collection of agent skills for building and reviewing software interfaces. The skills cover accessibility, layout, writing, typography, color, and UI polish, plus focused workflows for turning designs into UI, reviewing changes, exploring component states, and explaining visual implementations.

What it is useful for

Use better-interface for a broad review of a screen, flow, or entire interface. It combines findings across accessibility, layout, copy, typography, color, and polish into one ranked report, rather than requiring separate passes.

More focused skills cover concrete engineering concerns:

• better-accessibility checks and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion, and zoom against WCAG 2.2.
• better-colors can generate palettes, name semantic tokens, convert color formats, and measure contrast.
• better-typography handles type scale, spacing, font features, wrapping, truncation, and punctuation.
• better-layout considers grouping, alignment, reading order, responsive structure, and translated text.
• better-writing reviews labels, errors, empty states, and confirmations.
• better-ui specifies details such as border radius, optical alignment, shadows, icon states, and animation.

There are also task-shaped workflows. build-design builds UI from a Figma file or design image using the project's existing tokens and components. interface-review examines a branch, pull request, or uncommitted change for interface problems introduced or regressed. state-machine displays a component’s states with mock data and a switcher; break stress-tests a component across scenarios on a temporary page. For visual investigation, explain-interface explains a website, effect, or animation from a live URL or screenshot, while teardown produces a configurable technical illustration that can be downloaded as SVG, PNG, or PDF. variant supports producing multiple component options for comparison.

How engineers can use it

The README documents installation with:

npx skills add jakubkrehel/skills

For Claude Code, it also lists:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

After installation, choose the skill that matches the task and follow its SKILL.md instructions. For example, review a checkout flow with better-interface, audit its interactive behavior with better-accessibility, or inspect a feature branch with interface-review before opening a pull request.

The README explicitly marks interface-review, explain-interface, break, state-machine, and variant as user-invoked. It also does not provide detailed prerequisites, task-specific command syntax, or compatibility information beyond the two installation methods, so consult the README and the relevant skills/<name>/SKILL.md files before starting.