prototype

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

Updated Jun 26, 2026
One-click install
npx skills add https://github.com/dulltackle/kangkang-skills --skill prototype-dulltackle
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/dulltackle/kangkang-skills/tree/main/prototype
Command: npx skills add https://github.com/dulltackle/kangkang-skills --skill prototype-dulltackle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layouts are hard to settle on paper. This Skill produces throwaway prototypes that let you and stakeholders press buttons, flip between variants, and discover flaws in the idea before committing to 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, runnable by double-click with no install. - UI Prototypes: Generate 3-5 structurally different variants of a page on one route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key navigation. - Capture Workflow: Fold validated decisions into real code and preserve the prototype on a throwaway branch as a primary source. - Use Case: A PM is unsure whether a state machine handles an edge case. You build a shareable HTML demo in domain language; they click through scenarios, spot the illegal transition, and you fix the model before writing production code. ## Quick Start Use the prototype skill to build a clickable demo that tests whether my order state machine handles cancellation after shipping.

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 without writing production code?

Build a single self-contained HTML file with a pure reducer or state machine module, free-play action buttons, and tabbed guided walkthroughs. Anyone can open it by double-clicking and push the model through edge cases without installing anything.

How to show multiple UI design options on one page?

Render several structurally different variants on the same route, gated by a ?variant= URL search param, with a floating bottom bar to cycle between them. Keep existing data fetching intact and only swap the rendered subtree per variant.

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

Use a logic prototype when the question is whether a state model or data shape behaves correctly under real cases. Use a UI prototype when the question is what a page should look like, comparing radically different layouts side by side.

Can a prototype be shared with non-developers?

Yes. The logic prototype is one HTML file with no framework, bundler, or server, written in domain language rather than code terms. A designer, PM, or domain expert can open it and drive the scenarios themselves.

What are the limitations of throwaway prototypes?

Prototypes skip tests, error handling, persistence, and polish by design, so they must never ship directly to production. Once a question is answered, fold the validated decision into real code and move the prototype to a throwaway branch.