/skills

/better-ui

Polishes and improves the UI in your project. Covers concentric border radius, optical alignment, surface depth, contextual icons, hit areas and more. Based on the Details That Make Interfaces Feel Better article.

/better-typography

Focuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.

/better-colors

Helps convert your project to use OKLCH colors and answer anything about it. You can also convert colors, generate palettes, check contrast, clamp colors to a target gamut, set up fallbacks and more.

/better-accessibility

Helps your project comply with accessibility standards and best practices.

Covers focus states, keyboard navigation, ARIA, screen readers, hit areas and more.

/better-layout

Helps with grouping, alignment, reading order, progressive disclosure and other details that make layouts feel great in your project.

/better-writing

Focuses on improving product copy in your project.

Covers button labels, error messages, settings, onboarding and empty states while keeping voice and terminology consistent.

/better-interface

Combines all of the /better-* skills into a single review across accessibility, layout, writing, typography, color and UI polish.

## Findings

| Severity | Fix                   |
| -------- | --------------------- |
| HIGH     | Label the icon button |
| HIGH     | Let the button shrink |
| MEDIUM   | Wrap long names       |

## Findings

| Severity | Domain        | Location        | Fix                   |
| -------- | ------------- | --------------- | --------------------- |
| HIGH     | Accessibility | dialog.tsx:42   | Label the icon button |
| HIGH     | Layout        | checkout.tsx:86 | Let the button shrink |
| MEDIUM   | Typography    | summary.tsx:24  | Wrap long names       |

/interface-review

Reviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.

/explain-interface

Helps you figure out how something was built on the web. You can try something like /explain-interface how is the copy page animation on interfaces.dev built?

- outgoingopacity  1 → 0scale    1 → 0.25blur     0px → 4px- incomingopacity  0 → 1scale    0.25 → 1blur     4px → 0px- transitionspring, bounce 0, 300ms, both icons animate at the same time

/break

Renders a component you choose in every state and scenario on a temporary page and stress tests it. It’s a great way to find issues in your design system that you might not be aware of.

/state-machine

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 simultaneously.

/variant

Builds multiple variants of a component you’re working on and helps you iterate and pick one.

/make-interfaces-feel-better

A lightweight skill that I made before the /better collection. It helps with the small details that make interfaces feel better and is based on an article I wrote some time ago. It’s installed separately from the collection above.

/faq