variant

Installation
SKILL.md

Variants

This skill takes one described piece of UI and builds three versions that differ on purpose. They go behind a picker in the real page, so you can flip between them and choose.

It produces candidates and never ranks them. Reviewing existing UI is interface-review and better-interface, stress testing one component is break and working through a component's states is state-machine.

Different answers, not different tints

Each variant is a different answer to the same brief, on an axis this collection owns:

Axis Owner What varies
Structure better-layout Grouping, order, column count, what collapses
Density better-layout Spacing scale, how much fits
Emphasis better-colors Where filled color goes, what recedes
Type better-typography Scale steps, weight contrast, measure
Voice better-writing Labels, tone, how much copy

Pick one primary axis and give each variant a different position on it. The axis names the picker's group heading. Secondary choices follow from it rather than varying on their own. A dense variant may need a smaller type step, and that is coherence, not a second axis.

Installs
14.7K
GitHub Stars
8.4K
First Seen
Aug 19, 2026