prototype

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

Updated Jul 30, 2026
One-click install
npx skills add https://github.com/mrestrepoj10/re-hear --skill prototype-mrestrepoj10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/mrestrepoj10/re-hear/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/mrestrepoj10/re-hear --skill prototype-mrestrepoj10

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 real, interactive variants and promote the one that feels right. ## Core Features & Use Cases - Divergent Variant Generation: Creates 3-5 variants that each explore a distinct named axis (layout, density, personality, motion, interaction model), all using your project's tokens so every option looks shippable. - Isolated Picker Harness: Renders variants full-size in realistic context behind a fixed spec-defined picker with keyboard shortcuts (1-N, arrows, R to replay) and URL-persisted selection, either as an isolated route in your app or a standalone HTML file. - Promote and Clean Up: On your choice, integrates the winning variant into the codebase following project conventions and deletes the prototype surface. - Use Case: Describe "a hold-to-delete button" and get three working directions — Quiet, Editorial, Playful — to flip through live, then promote the winner into your app. ## Quick Start Ask the AI to prototype three variants of the UI piece you describe, for example: prototype a toast notification for my app.

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 to one?▼

Describe the UI piece and this Skill builds 3-5 genuinely different working variants behind a floating picker. Flip through them with number keys or arrows, then promote the winner into your codebase while the rest are deleted.

How do I prototype a UI component without touching production code?▼

All variants live on an isolated surface — a dedicated route like /prototypes/<slug> in your app, or a single self-contained HTML file. Nothing imports from the prototype into production code until you explicitly promote a chosen variant.

Can I use this in a project with Tailwind 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 native to your product. Without a project, it falls back to a restrained standalone HTML file.

What keyboard shortcuts does the variant picker support?▼

Number keys 1-N switch directly to a variant, left and right arrows cycle through them, and R replays the current variant's entrance animation. Selection persists across reloads via a ?v= URL parameter.

When should I not use a multi-variant prototype picker?▼

Skip it when reviewing or fixing existing UI — that is a review task, not divergence. It also only runs when explicitly invoked, and it scopes to one component per run rather than whole pages or dashboards.