prototype

Builds multiple divergent UI variants rendered behind a keyboard-driven visual picker for live comparison.

Updated Sep 5, 2023
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill prototype-eyenalxai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill prototype-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction from a single static mockup or verbal description is guesswork; this Skill builds several genuinely different working versions of a described UI piece and renders them behind a floating picker so you can flip through them live and promote the winner. ## Core Features & Use Cases - Divergent Variant Generation: Creates 3-5 variants of one UI piece, each exploring a distinct named axis (layout, density, personality, motion, interaction model) with real interactions and realistic content. - Fixed Picker Harness: Renders variants full-size in realistic context behind a spec-locked dark pill picker with keyboard shortcuts (1-N, arrows, R to replay) and URL-persisted selection. - Isolated Exploration with Clean Promotion: Prototypes live on an isolated route or standalone HTML file, never touching production code, and only the chosen variant is integrated before the harness is deleted. - Use Case: Describe "a hold-to-delete button" and receive three fully working directions — Quiet, Editorial, Playful — flip through them in the browser, then promote the one that fits your product. ## Quick Start Ask the agent to prototype three different versions of your pricing card so you can compare them live in a picker.

Frequently Asked Questions about prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare multiple UI design directions before committing?

Describe one UI piece and the Skill builds 3-5 fully working variants, each on a distinct axis like layout, density, or motion. They render full-size behind a floating picker so you flip through them with number keys and arrows, then promote the winner.

How do I prototype UI variants without touching production code?

All variants live on an isolated route such as /prototypes/<slug> or in a single self-contained HTML file, with nothing imported into production code. Only after you pick a winner is that variant integrated following project conventions, and the prototype surface is deleted.

Can I use this with Tailwind, CSS modules, or a motion library?

Yes. During recon the Skill maps your framework, styling system, tokens, and motion library, and every variant uses those tokens so each direction looks like it could ship in your product. Without a project it falls back to a restrained standalone HTML default.

How many UI variants should I generate for one component?

The default is 3 variants, up to 5 when the design space is genuinely wide. More than 5 dilutes the comparison, and any two directions differing only in accent color or copy are merged into one real alternative.

What are the limitations of picker-based UI prototyping?

It explores one UI piece per run, so multi-component requests like a whole dashboard are narrowed to the highest-leverage piece. It also does not review existing UI, plan animation fixes, or choose component libraries — those belong to other skills.