skills.rest
KlyrhonMiko
KlyrhonMikoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

prototype

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

Updated Aug 25, 2026
Search Tags:#html#frontend#animation#UI prototyping#picker#design exploration#design variants
One-click install
npx skills add https://github.com/KlyrhonMiko/kly-skills --skill prototype-klyrhonmiko
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/KlyrhonMiko/kly-skills/tree/main/data/skills/prototype
Command: npx skills add https://github.com/KlyrhonMiko/kly-skills --skill prototype-klyrhonmiko

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 lets you flip through them live in a browser before committing to one. ## Core Features & Use Cases - Divergent Variant Generation: Creates 3-5 fully functional variants of a component, each exploring a named axis such as layout, density, personality, motion, or interaction model. - Fixed Picker Harness: Renders variants full-size behind a standardized floating picker with keyboard shortcuts (1-N, arrows, R to replay) and URL-persisted selection, per the verbatim spec in PICKER.md. - Isolated Prototyping with Promotion: Keeps all exploration on an isolated route or standalone HTML file, then integrates only the chosen variant into production code and cleans up the rest. - Use Case: Describe "a hold-to-delete button" and receive three working directions (Quiet, Editorial, Playful) in a live picker, compare their tradeoffs in a summary table, then promote the winner into your codebase. ## Quick Start Ask the AI 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 one UI piece, such as a toast or pricing card, and the Skill builds 3-5 working variants on different design axes. It renders them full-size behind a picker you flip through with number keys, arrows, and R to replay animations.

How to compare UI design directions before writing production code?▼

Build each direction on an isolated prototype route or standalone HTML file so production code stays untouched. After comparing variants live, only the selected winner is integrated following the project's conventions, and the prototype surface is deleted.

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

Yes, the picker spec keeps the same class names, structure, and behavior contract in any framework. Only the rendering syntax changes, using state instead of innerHTML and refs with a layout effect for highlight measurement.

Can I use the prototype skill without an existing project?▼

Yes, when no project or dev server exists, it produces a single self-contained HTML file with inline CSS and JS that opens directly in a browser. It applies a restrained default look with neutral grays, one accent, and a system font stack.

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

It scopes to one component per run, so multi-component screens must be narrowed to a single piece. Variant count caps at five, and it does not review existing UI or choose libraries, which are handled by separate skills.

Related Skills

Explore More Design & Creative Skills→
huangzidahuangzida

normalize

Audit UI elements and realign them with design system tokens.

Community
Advanced
taxmaxitaxmaxi
1

animation-accessibility

Implements reduced-motion variants for web animations using CSS, Tailwind, and Framer Motion.

Official
Intermediate
Festo-WampambaFesto-Wampamba

review-animations

Reviews animation and motion code for craft regressions.

Community
Advanced
TwuanMinnTwuanMinn

design-orchestration

Coordinate design routing and enforce required artifacts before implementation.

Community
Advanced