skills.rest
j172
j172COMMUNITY
Explore all skills by this author →
Website𝕏@j172GitHub

prototype

Builds multiple divergent UI variants behind a keyboard-driven picker for live comparison and selection.

Updated Jul 30, 2026
Search Tags:#html#frontend#css#picker#design exploration#design variants#ui prototyping
One-click install
npx skills add https://github.com/j172/bid --skill prototype-j172
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/j172/bid/tree/main/agent/skills/prototype
Command: npx skills add https://github.com/j172/bid --skill prototype-j172

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a UI direction from a single static mockup is guesswork; this Skill builds several genuinely different working versions of one 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 that each explore a named, distinct axis (layout, density, personality, motion, interaction model) rather than tints of the same idea. - Fixed Picker Harness: Renders variants full-size in realistic context behind a verbatim-specified dark pill picker with keyboard switching (1-N, arrows, R to replay) and URL-persisted selection. - Isolated Prototype Surface: Works in an isolated route or a single self-contained HTML file, never touching production code until a winner is promoted. - Use Case: Ask for three directions on a hold-to-delete button; flip through Quiet, Editorial, and Playful variants live, then promote the chosen one into your codebase following project conventions. ## Quick Start Ask the assistant to prototype three variants of your pricing card so you can flip through them and pick a winner.

Frequently Asked Questions about prototype

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

FAQPage Schema
How do I prototype multiple UI design variants at once?▼

Describe one UI piece, such as a toast or pricing card, and the Skill builds 3-5 fully working variants that diverge on named axes like layout, density, or motion. They render behind a floating picker so you can flip through them live with number keys and arrows.

How do I compare UI design directions in a real browser?▼

Each variant renders full-size in realistic surrounding context, not as thumbnails, behind a bottom-center picker. Switch variants with keys 1-N or arrow keys, press R to replay animations, and the selection persists across reloads via a URL parameter.

Can I use this without an existing project or dev server?▼

Yes. When no project exists, the Skill produces a single self-contained HTML file with inline CSS and JS that opens directly in a browser, using a restrained default look with neutral grays, one accent, and a system font stack.

Does prototyping touch my production code?▼

No. All variants live on an isolated prototype surface such as a dedicated route or standalone HTML file. Production integration happens only after you pick a winner, and the prototype surface is deleted afterward unless you ask to keep it.

What are the limitations of variant-based UI exploration?▼

It handles one UI piece per run, so multi-component requests get narrowed to the highest-leverage piece. Variant count caps at five, and it does not review existing UI, plan animation fixes, or choose component libraries.

Related Skills

Explore More Design & Creative Skills→
expoexpo
2.5k

expo-design-system

Build and audit design token themes and reusable components in Expo apps.

Official
Intermediate
danielbere1973danielbere1973

prototype

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

Community
Advanced
SeyamalamSeyamalam

review-animations

Reviews animation and motion code against easing, duration, origin, and performance standards.

Community
Intermediate
HemanthTennetiHemanthTenneti

normalize

Normalize frontend UI components to match design system standards and tokens.

Community
Intermediate