prototype

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

Updated Jul 16, 2026
One-click install
npx skills add https://github.com/optimaxin/Tredev_Gems --skill prototype-optimaxin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/optimaxin/Tredev_Gems/tree/main/agent/skills/prototype
Command: npx skills add https://github.com/optimaxin/Tredev_Gems --skill prototype-optimaxin

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 described UI piece and puts 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 fully working variants, each named and differentiated on a stated axis such as layout, density, personality, motion, or interaction model. - Fixed Picker Harness: Renders variants full-size in realistic context behind a verbatim-specified dark pill picker with keyboard shortcuts (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: Describe "a hold-to-delete button" and receive three distinct working implementations you can flip between in the browser, then promote your choice into the codebase. ## Quick Start Ask the agent to prototype three variants of a toast notification so you can flip through them and pick one.

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 in the browser?

Describe one UI piece and the Skill builds 3-5 fully working variants behind a floating picker. Flip between them with number keys or arrow keys, then promote the winner into your codebase.

How do I prototype UI variants without touching production code?

All variants live on an isolated surface: a dedicated route like /prototypes/<slug> in a project with a dev server, or a single self-contained HTML file otherwise. Integration happens only after you pick a winner.

Can I use the prototype picker in a React or Tailwind project?

Yes. In a framework, the picker keeps its exact class names and structure but uses idiomatic state and refs instead of innerHTML. Variants adopt the project's tokens, fonts, and styling system so they look native.

What keyboard shortcuts does the variant picker support?

Number keys 1-N switch directly to a variant, left and right arrows cycle, and R replays the current variant's entrance animation. Keys are ignored while typing in inputs or when modifier keys are held.

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

Skip it when reviewing or fixing existing UI, since this Skill only explores new directions for a described component. It also narrows multi-component requests to one piece per run, so full-page redesigns need multiple runs.