Repolode
Submit
jakubkrehel

jakubkrehel/skills

A collection of agent skills for building better UI, covering accessibility, layout, typography, color, writing and UI polish.

View on GitHubWebsite
Stars
8,038
Forks
307
Open issues
5
Last commit
8 days ago

What is it?

This repository is a set of agent skills, reusable instruction packs that AI coding agents can load to improve interface work. The skills cover accessibility, layout, typography, color, interface copy and UI polish, and each one can be used on its own or combined through a single review skill.

The skills address specific parts of an interface. better-accessibility reviews keyboard and focus behavior, ARIA, forms and screen-reader announcements against WCAG 2.2. better-typography covers the type scale, font features, wrapping and truncation, while better-colors generates palettes, names semantic tokens and measures contrast. better-writing and better-layout handle labels, errors, empty states and responsive structure.

Beyond the review skills, there are workflow skills for building UI from a Figma file or design image, reviewing a branch or pull request for interface regressions, rendering a component across its states or edge scenarios on a temporary page, and generating multiple variants of a component to compare. Installation uses npx skills add or a Claude Code plugin.

Key features

  • 01Combines accessibility, layout, writing, typography, color and UI checks into one review.
  • 02Checks keyboard, focus, ARIA and forms against WCAG 2.2.
  • 03Generates color palettes, names semantic tokens and measures contrast.
  • 04Builds UI from a Figma file or design image using existing project tokens and components.
  • 05Renders a component under its states on a temporary page for stress testing.

Use cases

  • Reviewing a pull request for interface regressions before merging.
  • Auditing an existing app for keyboard navigation and screen-reader issues.
  • Setting up a color system with semantic tokens and contrast checks.
  • Turning a Figma design into code that matches the design system.

Quick start

  1. 1

    Install the skills collection

    npx skills add jakubkrehel/skills
  2. 2

    Or add the Claude Code plugin marketplace

    /plugin marketplace add jakubkrehel/skills
  3. 3

    Then install the plugin

    /plugin install interfaces@interfaces

Things to know

  • Consists of Markdown agent skills, so it needs a compatible AI coding agent to be useful.

Topics

#ai-agents#ui#accessibility#design-system#typography#css#frontend-review

FAQ

What is skills?
A collection of agent skills for building better UI, covering accessibility, layout, typography, color, writing and UI polish. This repository is a set of agent skills, reusable instruction packs that AI coding agents can load to improve interface work. The skills cover accessibility, layout, typography, color, interface copy and UI polish, and each one can be used on its own or combined through a single review skill.
Is skills free to use? What license does it have?
skills is open source under the MIT license. Check the license terms before using it in commercial products.
Is skills still maintained?
Actively maintained. The last commit to skills was on Oct 13, 2026.
What can I use skills for?
Reviewing a pull request for interface regressions before merging. Auditing an existing app for keyboard navigation and screen-reader issues. Setting up a color system with semantic tokens and contrast checks. Turning a Figma design into code that matches the design system.
How do I install skills?
Install the skills collection: npx skills add jakubkrehel/skills Or add the Claude Code plugin marketplace: /plugin marketplace add jakubkrehel/skills Then install the plugin: /plugin install interfaces@interfaces
Where can I get skills?
The source code and installation instructions are on GitHub: https://github.com/jakubkrehel/skills

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects