/skills

/teardown

Creates a technical illustration of an any object. Each drawing comes with a toolbar where you can switch between expanded and assembled views, change dimensions, recolor or fill parts and download it as an SVG or PNG.

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

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

/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?

 exit                       enter
┌───────────────────┐      ┌───────────────────┐
│ opacity 1 → 0     │      │ opacity 0 → 1     │
│ scale   1 → 0.25  │ ─── │ scale   0.25 → 1  │
│ blur    0px → 4px │      │ blur    4px → 0px │
└───────────────────┘      └───────────────────┘

AnimatePresence  mode="popLayout"
└─ m.span key={state}
   └│─ idle (copy)
   └─ active (checkmark)

/variant

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

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

/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       |

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

Message

DayWeekMonth

1,204

Follow

before

Message

DayWeekMonth

1,204

Follow

after

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

Guides

feat: add skill examples

Ready in 49s

JKjakubd32da51skills

BeforeAfter

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

/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