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

Color comparison labels: oklch, oklch, oklch, oklch, hsl, hsl, hsl, hsl.

Color values: oklch(0.50 0.16 30), oklch(0.50 0.16 150), oklch(0.50 0.16 250), oklch(0.50 0.16 320), hsl(30 100% 50%), hsl(150 100% 50%), hsl(250 100% 50%), hsl(320 100% 50%).

Lightness: 50%.

/better-accessibility

Helps your project comply with accessibility standards and best practices.

Covers focus states, keyboard navigation, ARIA, forms, 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.

/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 gradient on interfere.com built?.

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

/variant

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