skills.rest
rithm84
rithm84COMMUNITY
Explore all skills by this author →
GitHub

prototype

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

Updated Aug 19, 2026
Search Tags:#html#frontend#interaction design#motion design#design variants#ui prototyping#visual picker
One-click install
npx skills add https://github.com/rithm84/Manor --skill prototype-rithm84
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/rithm84/Manor/tree/main/.agents/skills/emilkowalski-design/prototype
Command: npx skills add https://github.com/rithm84/Manor --skill prototype-rithm84

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: Produces 3-5 variants that differ on a named axis (layout, density, personality, motion, interaction model), each fully functional with realistic content and correct motion craft. - Fixed Picker Harness: Renders variants full-size in realistic context behind a verbatim-specified dark glass picker with keyboard switching (1-N, arrows, R to replay) and URL-persisted selection. - Isolated Exploration, Clean Promotion: All work happens on an isolated prototype route or standalone HTML file; only the chosen variant is integrated into production code, then the harness is deleted. - Use Case: Ask for three directions for a hold-to-delete button; flip through Quiet, Editorial, and Playful implementations live in the browser, then promote the winner into your codebase. ## Quick Start Ask the agent 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 compare multiple UI design directions before committing to one?▼

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

How do I prototype UI variants without touching production code?▼

All exploration happens 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. Nothing imports from the prototype into production, and only the chosen variant gets integrated.

Does the prototype picker work with React or other frameworks?▼

Yes. The picker's class names, structure, and behavior contract stay fixed, but the wiring is expressed idiomatically: state instead of innerHTML, keyed re-mounts instead of requestAnimationFrame, and refs with layout effects for highlight measurement.

Can I run another round of variants after seeing the first set?▼

Yes. Use the riff invocation with a variant name to keep the harness and generate a fresh set diverging around that direction. The keep invocation instead promotes a variant into the codebase and deletes the prototype surface.

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

Skip it when reviewing or fixing existing UI, since this Skill only builds new divergent versions of a described piece. It also narrows multi-component requests to a single highest-leverage piece per run, so full-page redesigns need multiple runs.

Related Skills

Explore More Design & Creative Skills→
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
leboncoinleboncoin
92

create-storybook-docs

Generate and update Storybook stories and MDX docs for Spark UI components.

Official
Basic
Javeria-JavaidJaveria-Javaid

emil-design-eng

Reviews and guides UI animation, easing, and interaction design for React and CSS interfaces.

Community
Intermediate
Uxcel-LabUxcel-Lab
12

ux-design-from-scratch

Orchestrates foundations, components, screens, and flows into a complete from-scratch UX design build.

Official
Advanced