Skip to content
Get packs

Variant Builder

Builds three distinct UI variants of a component in a picker so you can compare and choose one.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
3 files

What it does

When you are working on a piece of interface, this skill makes the agent build three genuinely different versions of it, each answering the same brief 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, selected by a URL parameter, so you can flip between them at full size and choose. The agent is told not to rank them, and to keep each variant passing a shared set of accessibility checks; once you pick one, it promotes that version into the codebase and removes the temporary picker.

Great for

  • Designers or front-end developers exploring several directions for one component before committing
  • Teams who want to compare real-page options at full size rather than mockups or thumbnails
  • People who want a clean, deletable harness that leaves no trace once a choice is made

Skip it if

  • Reviewing or auditing existing UI, which the skill itself redirects to other skills, since it only generates candidates
  • Projects where you need one fixed design quickly; it builds three variants by default, which adds work and review time
  • Whole-page redesigns, because it expects one piece of UI per run

Try asking

  • “Build three variants of this pricing card on the real pricing page and let me flip between them”
  • “Explore layout and density options for our settings list component”
  • “Create a few tonal and type-scale directions for the metric card on the dashboard”
Step-by-step guide: how to use Variant BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    variant.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip variant.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip variant.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name one piece of UI specifically; if your request spans several components, the skill will ask which to explore
  • Point it at the page that will actually contain the component so variants are judged in real context
  • Review each variant at the width you care about, since the best choice can change between mobile and desktop

What's inside

  • agents/openai.yaml
  • picker.md
  • SKILL.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.