[](https://skills.sh/jakubkrehel/skills) A collection of agent skills that cover UI, typography, colors, accessibility, layout, product writing and help you build a great interface. These skills cover topics that I write about on [my personal website](https://jakub.kr/) and my design engineering magazine, [Interfaces](https://interfaces.dev/). ## Skills that help build great interfaces - [**better-interface**](skills/better-interface/SKILL.md): Reviews a screen, flow or whole interface across **accessibility**, **layout**, **writing**, **typography**, **color** and **UI polish**, and returns one ranked report. - [**better-ui**](skills/better-ui/SKILL.md): Polishes surfaces, icons and motion with exact values for **border radius**, **optical alignment**, **shadows**, **icon states** and **animation**. - [**better-typography**](skills/better-typography/SKILL.md): Sets and reviews how text renders, from the **type scale** and **spacing** to **font features**, **wrapping**, **truncation** and **punctuation**. - [**better-colors**](skills/better-colors/SKILL.md): Builds and checks color systems by **generating palettes**, **naming semantic tokens**, **converting between formats** and **measuring contrast**. - [**better-accessibility**](skills/better-accessibility/SKILL.md): Reviews and fixes **keyboard and focus behavior**, **ARIA**, **accessible names**, **forms**, **screen-reader announcements**, **motion** and **zoom** against WCAG 2.2. - [**better-layout**](skills/better-layout/SKILL.md): Sets **grouping**, **alignment**, **reading order**, **responsive structure** and room for translated text, so a layout holds up when it is resized, translated or mirrored. - [**better-writing**](skills/better-writing/SKILL.md): Writes and reviews interface copy, from **labels** and **errors** to **empty states** and **confirmations**, so it matches the product's voice and tells people what to do next. - [**interface-review**](skills/interface-review/SKILL.md): Reviews a **branch**, **pull request** or **uncommitted change** for the interface problems it introduced or regressed, across accessibility, layout, writing, typography, color and UI. User-invoked. - [**explain-interface**](skills/explain-interface/SKILL.md): Explains how a website, a visual effect or an animation was built, from a **live URL** or a **screenshot**. User-invoked. - [**break**](skills/break/SKILL.md): Renders a component you choose under **every scenario** that can reach it on a temporary page and stress tests it. User-invoked. - [**build-design**](skills/build-design/SKILL.md): Builds UI from a Figma file or a design image so it matches the design, using the project's existing tokens and components. - [**teardown**](skills/teardown/SKILL.md): Creates a technical illustration of an object and lets you configure it, color it and download as an SVG, PNG or PDF. - [**state-machine**](skills/state-machine/SKILL.md): Renders every state of a component you choose on a throwaway page, with mock data and a switcher, so you can work on each state. User-invoked. - [**variant**](skills/variant/SKILL.md): Builds multiple **variants** of a component you're working on and helps you iterate and pick one. User-invoked. ## Install ```bash npx skills add jakubkrehel/skills ``` ## Claude Code plugin ```text /plugin marketplace add jakubkrehel/skills /plugin install interfaces@interfaces ```