prototype Skill (Emil Kowalski) for Claude Code: Compare UI Variants in a Picker

Makes Claude build several genuinely different versions of one UI piece behind a live picker, so you can flip through them and keep one.

Installs: 189.6K; on skills.sh
Stars: 52.7K; on GitHub
Files: 1; besides SKILL.md
Updated: Oct 2026; last repo commit

This prototype skill, from Emil Kowalski, makes Claude build 3 variants of a UI piece you describe, or up to 5 if you ask. Each one takes a different direction on a named axis such as layout, density, personality, motion or interaction. They sit behind a picker so you can flip between them full size and live.

It only runs when you call it, and it does not trigger on its own. Claude builds them in an isolated route or a single HTML file, never in production code, and stops for your choice. When you pick one it moves that variant into your code and deletes the prototype. It is a different skill from the prototype skill by Matt Pocock.

Good for

Front-end developers choosing between layouts or interaction ideas for one component
Design engineers who want options that differ in layout, density or motion, not just color
Claude Code users who follow Emil Kowalski's craft rules for motion

Install prototype

Claude Code

Copy this prompt.

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

npx skills add https://github.com/emilkowalski/skills --skill prototype

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.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.

Sections in SKILL.md

Initial Response
Operating Posture
Hard Rules
Workflow
Phase 1 — Scope
Phase 2 — Recon
Phase 3 — Choose directions
Phase 4 — Build the picker harness
Phase 5 — Verify and hand off
Phase 6 — Promote on selection
Invocation Variants
Tone

Key facts

Author: Emil Kowalski
License: MIT
Installs on skills.sh: 189,550 (Nov 2, 2026)
GitHub stars: 52,705 (Nov 2, 2026)
skills.sh audits: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
Last commit: 2026-10-28
Files: SKILL.md plus PICKER.md (the picker's exact markup and keys)
Phases: 6: scope, recon, choose directions, build the picker, verify, promote
Variants: 3 by default, up to 5
Starts: Only when you invoke it (disable-model-invocation is set)

What it includes

Full run: scope, recon, 3 variants, picker, then waits for your choice
Describe the piece, such as a toast or a pricing card. Claude narrows it to one component, reads your stack and tokens, and builds the variants.
Write · <description>
Same run with more variants, capped at 5
Use it when the design space is wide. More than 5 would dilute the comparison.
Write · <description> x5
New round that diverges around the variant you liked
Claude keeps the picker and generates a fresh set around the direction you gravitated to.
Write · riff <variant>
Moves the chosen variant into your code and deletes the prototype
Claude follows your project's file layout and naming, then removes the prototype route or file.
Delete · keep <variant>
Same, but keeps the prototype surface around
Use it when you want to keep comparing after you promote a winner.
Write · keep <variant>, leave the picker
An isolated route per project, or one self-contained HTML file
The picker markup and keys are copied from PICKER.md. Claude then runs the page and flips through every variant to check it, and screenshots them if browser tools are available.
Runs code · Picker harness

From the official docs

Permissions

Medium risk

The skill writes prototype files into your project and deletes them after you choose. Use a git branch and review the diff before you commit.

What it can do

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

Watch out for

It creates and deletes files in your project
Claude adds a prototype route and files, then deletes them when you pick a winner. Work on a branch so you can review the diff.
It runs the page to test it
Claude runs the harness and flips through every variant before showing you. Approve the dev-server command it asks for.

Questions

What does Emil Kowalski's prototype skill do?

It builds several really different versions of one UI piece and puts them behind a live picker. You flip through them at full size, choose one, and Claude moves it into your code.

How is it different from the prototype skill by Matt Pocock?

They are separate skills with the same name in different repos. This one builds several different versions of one UI component behind a live picker. Matt Pocock's prototype skill describes itself as "Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like." Check its page before you install both, since the names clash.

How do I install it in Claude Code?

Use the install box above, which adds it from the emilkowalski/skills repo. Then call it by name, for example /prototype a hold-to-delete button. It does not run on its own.

Will it change my production code while exploring?

No. The SKILL.md says all variants live in an isolated route or a single HTML file. Production code is only touched after you pick a variant.

What if I have no project?

Claude builds one self-contained HTML file with inline CSS and JS that you open in a browser. It uses a plain default look: neutral grays, one accent and the system font.

Does it need an API key or other skills?

The SKILL.md names no API key and no required skill. It mentions review-animations, improve-animations and pick-ui-library only to say what they do instead.

Is it safe to install?

It creates files in your project, may run your dev server, and deletes the prototype files after you pick. Work on a branch and review the changes before you commit.

Information

updated Nov 2, 2026

Repository: emilkowalski/skills
Folder: skills/prototype

emilkowalski/skills skills.sh

Sources

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

Show all 4

SKILL.md · github.com
skills.sh listing · skills.sh
GitHub repo · github.com
prototype SKILL.md (Matt Pocock) · github.com