skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

prototype

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

1|Updated Aug 17, 2026
Search Tags:#frontend#animation#UI prototyping#design exploration#design variants#component comparison#visual picker
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill prototype-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/prototype
Command: npx skills add https://github.com/NalinDalal/skillset --skill prototype-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a design direction for a UI piece from a single static mockup is guesswork. This Skill builds several genuinely different working versions of a described component and puts them behind a floating picker so you can flip through them live in the browser and promote the winner. ## Core Features & Use Cases - Divergent Variant Generation: Creates 3-5 variants that differ on a named axis (layout, density, personality, motion, interaction model), each fully functional with realistic content and correct animation craft. - Fixed Picker Harness: Renders variants full-size behind a spec-defined dark pill picker with keyboard switching (1-N, arrows, R to replay) and URL-persisted selection, working either as an isolated route in a project or a standalone HTML file. - Promotion Workflow: Integrates only the chosen variant into production code following project conventions, then 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 say "keep Editorial" to merge it into your codebase. ## Quick Start Ask the agent to prototype three different versions of your pricing card 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 prototype multiple UI design variants quickly?▼

Describe the component you want explored and the skill builds 3-5 divergent variants, each differing on a named axis like layout or motion. They render behind a floating picker you flip through with number keys, then you promote the winner into your codebase.

How to compare UI design directions in a live browser?▼

Variants render full-size one at a time in realistic surrounding context, switched instantly via a bottom-center picker. Number keys 1-N and arrow keys switch variants, R replays animations, and the selection persists across reloads through a URL parameter.

Does the prototype skill work without an existing project?▼

Yes, in an empty directory or exploration context it generates a single self-contained HTML file with inline CSS and JS that opens directly in a browser. It uses a restrained default look with neutral grays, one accent, and a system font stack.

Can I use the prototype picker with React or other frameworks?▼

Yes, in a project with a dev server it creates an isolated route with one file per variant plus a harness file. The picker keeps the same class names and behavior contract, expressed idiomatically with state, keyed re-mounts, and refs.

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

It handles one component per run, caps variants at five, and never touches production code during exploration. It does not review existing UI, plan animation fixes, or choose dependencies — those belong to separate skills.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
yuridefrancayuridefranca

integration-test-generator

Generate integration and end-to-end tests for real database, API, and message-queue interactions.

Community
Advanced
KryptaMedina7KryptaMedina7

review-animations

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

Community
Intermediate
openaiopenai
488

ideate

Generate three distinct design concept directions from a brief and references.

Official
Intermediate