Skip to content
Get packs

Guide · Open source

How to use skills: install and run interface agent skills

Updated · written with AI from the project's own documentation and checked against our catalogue data

jakubkrehel/skills is an MIT-licensed collection 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. This guide shows you how to install the skills, which ones to start with, and how to use them for building and reviewing screens.

skillsjakubkrehel/skills · ★ 10.2k · MIT

Quick start

  1. 1Check prerequisites. Confirm Node.js is installed so npx works, and have an AI coding agent such as Claude Code ready.
  2. 2Install the skills. Run npx skills add jakubkrehel/skills in your terminal.
  3. 3Or install the Claude Code plugin. Inside Claude Code, add the marketplace with /plugin marketplace add jakubkrehel/skills, then run /plugin install interfaces@interfaces.
  4. 4Pick a skill for your task. Use better-interface for a full review, a specific skill like better-accessibility for one area, or build-design for a Figma file or design image.
  5. 5Review your work. Run better-interface on a screen or flow, or interface-review on a branch, pull request or uncommitted change.
  6. 6Act on the findings. Work through the report, fix the issues, and rerun the relevant skill to confirm the changes.

What you need before you install

The skills are built to run inside an AI coding agent, so you need one. The README names Claude Code as an example. You also need Node.js, because the install command uses npx. The README does not state a required Node.js version.

  • Node.js (needed for npx; the README does not state a version)
  • An AI coding agent such as Claude Code

Install the skills with npx

Run the install command from the README. It adds the skills collection from the jakubkrehel/skills repository to your setup.

npx skills add jakubkrehel/skills

Install the Claude Code plugin instead

If you use Claude Code, the README also lists a plugin route. Run both commands inside Claude Code. The first adds the marketplace and the second installs the interfaces plugin.

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

Choose the right skill for your task

Each skill has one job. Pick by the task in front of you rather than running everything at once.

  • better-interface: reviews a screen, flow or whole interface across accessibility, layout, writing, typography, color and UI polish, and returns one ranked report.
  • better-accessibility: reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom against WCAG 2.2.
  • better-colors: builds and checks color systems, including generating palettes, naming semantic tokens and measuring contrast.
  • better-typography: sets and reviews type scale, spacing, font features, wrapping, truncation and punctuation.
  • better-layout: sets grouping, alignment, reading order and responsive structure, including room for translated text.
  • better-writing: writes and reviews interface copy such as labels, errors, empty states and confirmations.
  • better-ui: polishes surfaces, icons and motion with exact values for border radius, optical alignment, shadows, icon states and animation.
  • interface-review: reviews a branch, pull request or uncommitted change for interface problems it introduced or regressed. User-invoked.

Review an existing screen or a pull request

For a checklist-style review of a screen or flow, use better-interface. To check only what a change touched, use interface-review, which the README describes as user-invoked. It looks at a branch, a pull request or uncommitted changes for regressions across the same areas.

  • Run better-interface on a screen or flow to get one ranked report.
  • Run interface-review on a branch or pull request to find interface problems the change introduced.

Use the build and variant skills while you work

The build-design skill builds UI from a Figma file or a design image so it matches the design, using the project's existing tokens and components. The variant skill builds multiple variants of a component you are working on so you can compare and pick one. The state-machine skill renders every state of a chosen component on a throwaway page, with mock data and a switcher.

What people use it for

  • Get a ranked report on a checkout screen covering accessibility, layout, writing and typography with better-interface.
  • Check a pull request for interface regressions with interface-review before merging.
  • Generate and check a color palette and measure contrast with better-colors.
  • Rewrite error messages and empty states with better-writing so they say what to do next.
  • Stress test a component across the scenarios that can reach it using the break skill.

Frequently asked questions

Is jakubkrehel/skills free to use?

The repository is licensed under the MIT licence, as listed in the project details. Check the LICENSE file in the repository for the full terms.

What do I need to run these skills?

You need an AI coding agent, since the skills are built to run inside one, and Node.js for the npx install command. The README names Claude Code as an example agent and does not state a Node.js version.

Can I use these skills without an AI coding agent?

The skills are designed to run inside AI coding agents. Without one, they are not a fit, because the project is a set of instruction packages for those agents.

Does this replace an accessibility audit?

The README does not say the skills replace expert review. The better-accessibility skill checks against WCAG 2.2, but teams that need a guaranteed audit should still use expert review.

What is the difference between better-interface and interface-review?

better-interface reviews a screen, flow or whole interface and returns one ranked report. interface-review is user-invoked and checks a branch, pull request or uncommitted change for interface problems it introduced or regressed.

Are there alternatives to these skills?

The project's analysis lists no comparable projects, so this guide does not compare it to others.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this collection if you already work with an AI coding agent and want it to review or build polished interfaces with accessibility, color and layout checks built in. Skip it if you do not use an AI coding agent, or if you need backend or data work, since the skills cover interface topics only.

Install options & downloads