prototype

Build throwaway prototypes that answer logic or UI design questions.

2|Updated Jun 21, 2026
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill prototype-iskenkenya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/engineering/prototype
Command: npx skills add https://github.com/IsKenKenYa/skills --skill prototype-iskenkenya

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 disposable prototypes—either a shareable single-file HTML demo for logic questions or multiple switchable UI variants on a route—so decisions are validated by interaction before real code is written. ## Core Features & Use Cases - Logic Prototypes: Build a single self-contained HTML file with a pure reducer, state machine, or function module, free-play buttons, and tabbed guided walkthroughs that non-developers can drive by double-clicking. - UI Prototypes: Generate 3-5 structurally different variants of a page, switchable via a ?variant= URL param and a floating bottom bar with arrow-key navigation, mounted on an existing route or a throwaway one. - Capture Workflow: Fold validated decisions into real code, then commit the prototype to a throwaway branch as a primary source with a pointer on the implementation issue. - Use Case: Before implementing a checkout state machine, build a clickable HTML demo so a PM can press buttons through edge cases and confirm the model feels right. ## Quick Start Ask the agent to prototype the state model or page layout you are unsure about, stating the specific question the prototype should answer.

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 the state machine as a pure module, free-play buttons for each action, and tabbed guided walkthroughs for edge cases. Anyone can open it by double-clicking, with no framework, bundler, or server required.

How to compare multiple UI design variants in one app?▼

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.

Should a prototype use the real database or API?▼

No. Prototypes keep state in memory by default, since persistence is usually the thing being checked, not a dependency. If the question explicitly involves a database, use a scratch DB or local file clearly marked as disposable.

When is a UI prototype the wrong approach?▼

A UI prototype is wrong when the question is about logic or state transitions rather than appearance; use a clickable logic demo instead. It is also wrong when variants differ only in color or copy, since real variants must disagree about structure.

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

The validated decision is folded into the real code, 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.