# Variant

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

- Repository: https://github.com/jakubkrehel/skills (10031 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jakubkrehel/skills --skill variant -g -a claude-code -y`
Codex: `npx skills add jakubkrehel/skills --skill variant -g -a codex -y`
Cursor: `npx skills add jakubkrehel/skills --skill variant -g -a cursor -y`
Gemini CLI: `npx skills add jakubkrehel/skills --skill variant -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jakubkrehel/skills`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

## The floor every variant clears

Before a variant enters the picker it clears `better-interface`'s escalation triggers, which are:

The rest: https://github.com/jakubkrehel/skills/blob/HEAD/skills/variant/SKILL.md