What is the variant skill?
The variant skill is a folder in Jakub Krehel's skills collection. You name one piece of UI and the agent builds three versions that differ on one chosen axis, such as structure, density or emphasis. They sit behind a picker in your real page. It lists tradeoffs and never ranks them.
The variant skill lives in the skills/variant folder of the jakubkrehel/skills repository. Its description is short: it builds multiple variants of a component you are working on and helps you iterate and pick one.
It takes one described piece of UI and produces three versions that differ on purpose. They go behind a picker in the real page, so flipping between them takes one click instead of a screenshot thread.
What changes in your agent's output
- The agent restates your brief in one sentence, then names the set of variants before it writes any code.
- Names describe a direction, such as Quiet, Editorial or Dense, and never Option A.
- Each variant takes a different position on one primary axis. A variant that only changes the accent color or the copy is cut.
- Variants render one at a time at full size, with realistic content and the item count the page will really carry.
- The run ends with a table of tradeoffs and no favourite marked.
The axes a variant can vary on
- Structure: grouping, order, column count and what collapses.
- Density: the spacing scale and how much fits on screen.
- Emphasis: where filled color goes and what recedes.
- Type: scale steps, weight contrast and line measure.
- Voice: labels, tone and how much copy appears.
Who the variant skill is for
Best for
- Deciding between layouts for one card, form, pricing block or header before you commit to a build.
- Sharing a link per option so a teammate can open each variant directly and compare.
- Projects with real tokens and components, since variants are built to look shippable tomorrow.
Not for
- Whole screens. One piece of UI per run, so the metric card qualifies and the dashboard does not.
- Auditing existing UI. The README assigns reviews of existing UI to interface-review and better-interface.
- Getting a ranking. It produces candidates and leaves the choice to you.
Use it with UiChemy
Variant helps you settle one component's design in your own code. When the chosen design lives in Figma or a built page, bring it into WordPress with UiChemy as an editable build. Click Get Started on uichemy.com. Related: polish, layout and pick-ui-library.
How to install Variant Skill: Build Three UI Options and Pick One
/plugin marketplace add jakubkrehel/skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add jakubkrehel/skills. The README lists this under its Claude Code plugin section.Install the plugin
Run
/plugin install interfaces@interfaces. The variant skill ships in this collection alongside the other skills in the repository.Or copy the folder
For another agent, run
git clone https://github.com/jakubkrehel/skills.gitand copy the skills/variant folder to where your agent loads skills. The folder holds SKILL.md, picker.md and agents/openai.yaml.Invoke it by name
The frontmatter sets disable-model-invocation to true and the README marks the skill user-invoked, so ask for it explicitly and name one component.
Check that it loaded
Ask the agent to run the variant skill on one small component. It should restate the brief, list three named variants with their axis positions, and only then start building.
Key features
- Three variants by defaultThe skill defaults to three versions of the piece and goes to five only when you ask. Each one is a different answer to the same brief.
- One axis per runThe agent picks one primary axis, then gives every variant a different position on it. Secondary choices follow from that position instead of varying on their own.
- Named directions firstThe set is written down before any code, with a name and an axis position for each. Names say what the direction is, such as Quiet, Editorial or Dense.
- Reads the ground firstBefore building, the agent reads the styling system, component library, tokens, density and voice of the product. With no project to read, it uses neutral grays, one accent and the system font stack and says so.
- Hosted in the real pageVariants sit on the page that will contain the piece, with real chrome and neighbours. Where no page can host them, the agent builds one self-contained HTML file with the same picker.
- Shareable URL pickerA search parameter such as ?__variant=quiet selects the version, so every variant is a link. A floating control sets it, and the spec sits in picker.md inside the skill folder.
- A shared accessibility floorEvery variant must clear the same checks first: accessible names, visible focus, keyboard reach, reduced motion, 320px width, contrast and a recovery path for errors. A direction that needs to break them is dropped.
- Tradeoff table, no favouriteThe agent presents a table of axis position, when each is right and what it costs. Asked directly for a pick, it answers from how often the piece is seen and the product's personality.
- Promote one, delete the restOn a choice, the agent builds the winner properly following project conventions, then deletes the other variants, the picker and the guarded import, and checks the diff for leftovers.
Frequently asked questions
What is the variant skill?
It is a SKILL.md in the jakubkrehel/skills collection that builds three different versions of one UI component behind a picker in your real page. Each version takes a different position on one design axis. The agent then presents tradeoffs and leaves the choice to you.
How do I install the variant skill?
The README documents plugin commands: add the marketplace with /plugin marketplace add jakubkrehel/skills, then run /plugin install interfaces@interfaces. For another agent, clone the repository and copy the skills/variant folder to the place that agent loads skills from.
How many variants does it build?
Three by default. The skill goes to five only when you ask for it. Each variant takes a different position on a single primary axis, so five options need five clearly separate positions rather than five tints of one idea.
Does the variant skill pick a winner?
No. It produces candidates and never ranks them. The final table lists axis position, when each fits and what it costs. If you ask directly, it answers from how often the piece is seen and the product's personality, not from which version was fun to build.
Does the agent run the variant skill automatically?
No. The SKILL.md frontmatter sets disable-model-invocation to true, and the README labels it user-invoked. You trigger it yourself and name one piece of UI, such as a metric card, because a whole dashboard is too broad for one run.
What happens to the picker after I choose?
The agent builds the chosen variant properly where it belongs, following the project's conventions. It then deletes the other variants, the picker and the guarded import, and searches for the variant names and the __variant parameter so no harness code stays in the diff.
Does variant work with Claude Code and other agents?
The README gives a Claude Code plugin install and an agents/openai.yaml file sits in the skill folder. Any other agent that loads SKILL.md folders may work, but the repository does not say so. Test with one component first.
What license does the variant skill use?
The repository is MIT licensed according to the GitHub metadata. That covers the skills collection, including the variant folder. Keep the license file with the code if you redistribute the folder inside your own project or product.