Variant Skill by jakubkrehel: Build Three Versions of a UI Piece

Builds three deliberately different versions of one UI component behind a picker in your real page, so a designer or developer can compare and pick.

Installs: 16.5K; on skills.sh
Stars: 10K; on GitHub
Files: 2; besides SKILL.md
Updated: Oct 2026; last repo commit

Variant makes Claude build three different versions of one piece of your interface, such as a metric card, and put them behind a picker on the real page. You flip between them with a link or the arrow keys and choose one. It never ranks them for you.

It does not start by itself, so ask for it by name and describe the one component. Claude reads your styling system and tokens, writes down the three directions, builds them with realistic data, then stops and shows a table of what each one costs. When you pick one, it builds that one properly and deletes the picker and the rest.

Good for

Front-end developers choosing between layouts for one component
Designers who want options in the real page, not mockups
Claude Code users who already run a dev server for the project

Install variant

Claude Code

Copy this prompt.

Install the variant skill in Claude Code. Run this command:

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

variant is one of 14 skills in jakubkrehel/skills. SKILL.md names other skills in the collection (better-layout, better-colors and others) as owners of its axes, but writes the accessibility floor out itself, so variant works alone. The plugin route installs all 14 skills. Pick one route, not both. The plugin is called interfaces; Claude Code may prefix plugin skills with the plugin name.

From the project README. Source.

What's in the skill

When it loads

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

Sections in SKILL.md

Different answers, not different tints
The floor every variant clears
1. Scope one piece
2. Learn the ground
3. Name the axis before writing code
4. Build it into the real page
5. Present the tradeoffs and stop
6. Promote one, delete the rest
Before you finish

Key facts

Author: jakubkrehel
License: MIT
Installs on skills.sh: 16,509 (Nov 2, 2026)
GitHub stars: 10,003 for the whole jakubkrehel/skills repo (Nov 2, 2026)
Last commit: Oct 25, 2026
What is inside: 3 files including SKILL.md: picker.md (the picker spec) and agents/openai.yaml
Starts: Only when you ask for it (disable-model-invocation is set; the README labels it user-invoked)

What it includes

Takes one component, not a whole page, and restates the brief
Claude works on one piece of UI per run. If you ask for "the dashboard", it lists candidate pieces and asks which one to explore.
Read · 1. Scope one piece
Reads your styling system, tokens, density and background
Claude reads your styling system, component library, tokens, and where the piece renders, so variants look shippable. With no project it uses neutral grays, one accent and the system font.
Files · 2. Learn the ground
Picks one axis and writes three variants down before coding
Structure, density, emphasis, type or voice. Each variant takes a different position on one axis and gets a name like Quiet or Dense, never Option A. Five variants only when you ask.
Read · 3. Name the axis
Hosts variants on the page with real chrome and data
Variants are selected with a ?__variant= URL parameter, so each is a link. A grouped list beside the piece switches them. If no page can host it, Claude builds one self-contained HTML file.
Write · 4. Build into the real page
Flips through every variant in a browser, then hands you a table
Claude loads the page in a browser it has at hand, checks each variant renders and the console is clean, then shows when each is right and what it costs. It never marks a favourite.
Runs code · 5. Present the tradeoffs
Builds your pick properly and removes the picker and other variants
After your choice Claude builds that variant in your project style, deletes the others, the picker and the hosting page import, and searches for leftovers of the __variant param.
Delete · 6. Promote one, delete the rest
The picker spec: dark, outside your design system, arrow keys, H to hide
A grouped list that sets the __variant search param. Arrow keys step through variants and H hides the picker for screenshots. A select replaces the list when there is no room.
Read · picker.md

From the official docs

Permissions

Low risk

Variant edits files in your project to add a temporary picker page and variant files, and it deletes them again when you choose. Work on a clean git branch so you can review the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It adds files to your real page and deletes them later
The variants and picker live in your project until you choose. Commit or stash first and check the final diff for leftover __variant code. github.com
It opens your page in a browser
SKILL.md has Claude load the page in a browser it already has to flip through the variants. With no browser it hands you the URL to check. github.com

Technical details

Scopes	Reads your styling system, tokens and components Adds variant files, a picker and a hosting-page import to your project Deletes the other variants, the picker and the import after you choose

Questions

What does the variant skill do?

It makes Claude build three versions of one UI component that differ on purpose, put them behind a picker in your real page, and help you pick one. It produces candidates and never ranks them.

How do I install variant?

Use the install box at the top of this page. For Claude Code the README documents a plugin, /plugin marketplace add jakubkrehel/skills then /plugin install interfaces@interfaces, which adds all 14 skills in the collection. To take only this one, run npx skills add jakubkrehel/skills --skill variant.

How do I start it?

Ask for it by name and describe one component. SKILL.md sets disable-model-invocation and the README marks it user-invoked, so Claude does not start it on its own.

Does it need the other skills in the collection?

SKILL.md names better-layout, better-colors, better-typography, better-writing and better-interface as owners of the axes and the accessibility floor. It writes the floor out in full, so nothing says they are required; they are optional companions in the same repo.

Is variant safe to run?

It edits your project: it adds variant files and a picker, then deletes them after you choose. Use a clean branch and read the final diff. It does not bundle scripts.

How is variant different from interface-review, break and state-machine?

SKILL.md says 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. Variant is for generating alternatives before you commit to one.

Information

updated Nov 2, 2026

Repository: jakubkrehel/skills
Folder: skills/variant

jakubkrehel/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

github.com · github.com
skills CLI commands · github.com
plugin.json · github.com
github.com · github.com
github.com · github.com