Guide · Agent skill
How to use the Variant Builder agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Variant Builder skill (skill name: variant) lets an AI coding agent build three genuinely different versions of one piece of interface, such as a card, form or metric tile, and show them on the real page behind a picker. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what to check before you trust the result. By the end you will be able to run a variant session and promote the version you choose into your codebase.
Variant Builderjakubkrehel/skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the ZIP for the variant skill from the page where you found this guide.
- 2Install the skill. Unzip it into ~/.claude/skills/ for personal use, into a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 3Describe one piece of UI. Name a single component, where it renders and what it has to do. Ask for variants by name, such as using the variant skill.
- 4Let the agent build three variants. The agent builds three versions that differ on one primary axis and places them on the real page behind a picker.
- 5Flip through the variants. Select each one with the __variant URL parameter or the picker and check it at full size and at more than one width.
- 6Choose one. Read the tradeoffs the agent lists and pick the version that fits how the piece is used.
- 7Promote and clean up. Ask the agent to promote your choice and remove the other variants, the picker and the imports, then search for leftovers.
What the variant skill makes the agent do
Agent skills are instruction folders that an agent loads when a task matches them. This one covers a single job: when you are working on one piece of UI, the agent builds three versions that answer the same brief in different ways. Each version differs on one deliberate axis, such as layout structure, density, emphasis, type or voice.
The variants are placed on the real page behind a simple picker. The picker sets a URL parameter (for example ?__variant=quiet), so you can flip between versions at full size. The skill tells the agent not to rank the variants. Once you pick one, the agent promotes that version into the codebase and removes the temporary picker.
Install the variant skill
Download the ZIP for skills/variant from the page where you found this guide. Then choose one of the following routes.
For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
The download contains three files: SKILL.md, picker.md and agents/openai.yaml. Keep them together in the same folder so that SKILL.md can find picker.md.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Check what the skill needs
The skill needs an agent that can read and edit a project and run a browser to check the page. For real results it also needs access to the project's codebase, styling system and component library. Without a project to read, the skill falls back to neutral grays, one accent colour and the system font stack, and it says that it did so.
The skill runs no scripts and uses no network access, according to its listing. Its work happens through the agent's own file editing and browser checks.
- An agent that can read and edit files in your project
- A browser the agent can use to load the page
- Access to your codebase, styling system and component library for production-like output
Trigger the skill with a natural request
Describe one piece of UI and ask for several directions. Name the piece, say where it appears and say what it must do. The skill expects one piece per run, so a whole-page redesign should be split up first.
The skill's frontmatter sets disable-model-invocation to true, so the agent may not load it on its own. If it does not start, name the skill in your request, for example: use the variant skill to build three versions of the usage metric card on the billing page.
- Good: Use the variant skill to explore three directions for the invoice summary card on the billing page.
- Good: Build variants of the empty-state panel in the projects list, varying density.
- Too broad: Redesign the whole dashboard. Ask for one component instead.
Review the variants and pick one
Open the page and select variants with the URL parameter, or with the picker beside the piece. Render one variant at a time and check it at the widths where it will really appear. The skill notes that the answer can change between 375px and 1440px, so judge at more than one width.
The skill presents a table of tradeoffs for each variant. It does not mark a favourite. Choose based on how often people will see the piece and on the product's personality.
- Flip through all three variants and check that each one renders and responds to interaction
- Judge at both a phone-width and a desktop-width viewport
- Read the cost column for each variant before deciding
?__variant=quietPromote the chosen variant and remove the harness
When you choose a variant, ask the agent to promote it. The agent builds that version properly in the codebase, following the project's conventions. It then deletes the other variants, the picker and the hosting page's import of the variants.
Check the result yourself. Ask the agent to search for the variant names and the __variant parameter, and review the diff to confirm no harness code remains. If you want another round instead, ask for new directions around the one you leaned toward and keep the harness in place.
- Search the project for the variant names and the __variant parameter
- Review the diff for leftover picker code or imports
What people use it for
- Exploring a dense versus a spacious layout for a data table card before committing to one
- Comparing three type treatments for a pricing panel on the real marketing page
- Testing alternative labels and copy length for a settings form, varying voice
- Choosing between a quiet and an emphatic call-to-action block at full size on the product page
Frequently asked questions
How do I install the variant agent skill?
Download the ZIP for skills/variant from the page you are reading. Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder, or upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What does the variant skill require?
It requires an agent that can read and edit a project and run a browser to check the page. For real results it also needs access to the project's codebase, styling system and component library.
Is the variant skill free, and what licence is it under?
The skill is listed under the MIT licence. This guide does not state any price, so check the listing page for current terms.
Does the variant skill run scripts or access the network?
According to its listing, the skill runs no scripts and uses no network access. It works through the agent's file editing and browser checks.
Why does the skill build three variants instead of one?
It is designed to compare genuinely different answers to the same brief on one axis, so you can see real-page options at full size. It builds three by default, and it can build five only when asked. This adds work and review time compared with a single fixed design.
What should I do if the variant skill does not start?
The skill is marked disable-model-invocation: true, so name it explicitly in your request, for example: use the variant skill to build three versions of this component. Also confirm the folder is in ~/.claude/skills/ or .claude/skills/ and that SKILL.md and picker.md are together.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill when you are working on one piece of interface and want to compare real-page directions at full size before committing. Skip it for auditing existing UI, whole-page redesigns, or cases where you need one fixed design quickly, since it builds candidates rather than final work.
Download the skill