prototype

Build throwaway HTML demos and UI variants to answer design questions.

1|Updated Oct 29, 2025
One-click install
npx skills add https://github.com/jwh3times/holland-vip --skill prototype-jwh3times
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/jwh3times/holland-vip/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/jwh3times/holland-vip --skill prototype-jwh3times

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layout are hard to settle on paper. This Skill produces throwaway prototypes that let you press buttons, watch state change, or flip between radically different UI variants before committing to a real implementation. ## Core Features & Use Cases - Logic Prototypes: Generate a single self-contained HTML file with free-play action buttons and tabbed guided walkthroughs that drive a pure reducer, state machine, or function set through edge cases. - UI Prototypes: Render 3-5 structurally different variants of a page on one route, switchable via a ?variant= URL parameter and a floating bottom bar with arrow-key navigation. - Capture Workflow: Fold validated decisions into real code while preserving the prototype on a throwaway branch as a primary source. - Use Case: A product manager is unsure whether a checkout state machine handles a cancel-after-payment edge case. The Skill builds a shareable HTML demo the PM can click through to find the flaw before any backend code is written. ## Quick Start Ask the AI to build a prototype that answers whether your state model handles a specific edge case, or to generate three UI variants of an existing page.

Frequently Asked Questions about prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prototype a state machine before writing production code?▼

Build a single self-contained HTML file with a pure reducer or state machine in one script block, free-play buttons for each action, and tabbed guided walkthroughs for edge cases. Anyone can open the file by double-clicking and drive the model without installing anything.

How to generate multiple UI variants of a page for comparison?▼

Render 3 to 5 structurally different variants on the same route, gated by a ?variant= URL search parameter. Add a floating bottom bar with left and right arrows that cycles variants via the framework router so each variant is shareable and reload-stable.

Should a prototype use a real database or persistence layer?▼

No. Prototypes keep state in memory by default because persistence is usually the thing being checked, not a dependency. Only use a scratch database or clearly marked throwaway file when the question explicitly involves persistence.

When should I use a logic prototype versus a UI prototype?▼

Use a logic prototype when the question is whether a state model, data shape, or business rule feels right. Use a UI prototype when the question is what a page or component should look like. Ambiguous cases default to whichever branch matches the surrounding code.

What happens to prototype code after the question is answered?▼

The validated decision is folded into the real codebase, and the prototype itself is committed to a throwaway branch as a primary source with a pointer left on the implementation issue. Prototype code is never promoted directly to production.