Skill rating

Helps with grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.

Reviews a branch, pull request or uncommitted change for the interface problems it introduced or regressed, across accessibility, layout, writing, typography, color and UI.

Writes and reviews your interface copy, from labels and errors to empty states and confirmations, so it matches your product's voice and tells people what to do next.

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

Sets and reviews how text renders in your product, from the type scale and spacing to font features, wrapping, truncation and punctuation.

Creates precise static technical drawings of physical objects, with coherent views and fine linework. Delivers a blank-page viewer with zoom, editable colors and SVG, PNG and PDF downloads.

Builds UI from a Figma file or a design image so it matches the design, using your project's existing tokens and components.

Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom in your project against WCAG 2.2.

Explains how a website, a visual effect or an animation was built, from a live URL or a screenshot.

Helps you build and check a color system for your project. It generates palettes, names semantic tokens, converts between formats and measures contrast.

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.

Polishes the surfaces, icons and motion in your project with exact values for border radius, optical alignment, shadows, icon states and animation.

Renders a component you choose under every scenario that can reach it on a temporary page and stress tests it.

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