Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Component variants with a picker v1.0.0

Use this resource to explore several directions for a UI element before choosing one

New

  • 517 downloads
  • 196 likes
  • 221 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install component-variant-picker

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent takes one element of your page, picks an axis of variation (structure, density, emphasis, type or voice) and builds three genuinely different variants. They render in the real page behind a link-addressable picker, all held to the same accessibility floor. You compare the tradeoffs, choose, and the agent removes the rest.

Mostly picked by

Updated November 2, 2026

A component shown in the page with a variant picker beside it.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: six-step method and accessibility floor
  • picker.md: picker specification (grouped list, URL parameter, arrow keys)

Good fit for

  • Hesitating between layouts for a card, a header or a pricing grid
  • Showing a client concrete options in the real page
  • Avoiding three variants that differ only by color

Not for

  • Auditing an existing interface
  • Designing a whole page in one go
  • Producing mockups without code

Tags

  • variants
  • component
  • ui
  • prototype
  • accessibility

About

You say

"Build three variants of the pricing card on my homepage and put them behind a picker."

A component shown in the page with a variant picker beside it.

Skill published by jakubkrehel under the MIT license.

Show more

Prerequisites

You bring
The UI element to explore and The page or project that hosts it

How to use it

  1. Name the exact element to explore and the page that holds it.
  2. The agent names the axis and builds three variants and the picker.
  3. Compare the tradeoffs and choose: the agent keeps one variant and cleans up the rest.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • picker.md7.1 KB
  • SKILL.md6.8 KB

Origin and licence

Modified by PalateKit

Author
jakubkrehel
Source
github.com/jakubkrehel/skills/tree/592aedc44d7d5b3e29740984252902f3e5402a1c/skills/variant
Licence
MIT

Notice

Version modifiée de « variant » (jakubkrehel, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I need the other skills it mentions?

No. They are named as owners of certain axes, but the method works with the files provided.

What if there is no existing project?

The agent uses neutral grays, one accent and the system fonts, then builds a self-contained HTML file with the same picker.