prototype

Build throwaway interactive prototypes to validate state models or explore UI design variants.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about business logic or UI layout are hard to answer on paper. This Skill builds throwaway, runnable prototypes that let you push a state machine through edge cases or flip between radically different UI variants before committing to real code. ## Core Features & Use Cases - Logic Prototypes: Build a lightweight terminal app with a pure reducer, state machine, or function set behind a keyboard-driven TUI that re-renders full state after every action. - UI Prototypes: Generate 3-5 structurally different variants of a page on an existing route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling. - Capture Workflow: Fold validated decisions into real code while committing the prototype itself to a throwaway branch as a primary source. - Use Case: Before writing a checkout flow, prototype the state machine in a terminal app to discover that "cancel after payment" is an unhandled transition, then fold the validated reducer into the real module. ## Quick Start Ask the AI to build a throwaway prototype that answers whether your state model handles a specific edge case, or to generate three UI variants of an existing page switchable via a URL parameter.

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 small terminal app with a pure reducer or state machine behind a keyboard-driven interface. Each keystroke dispatches an action, and the full state re-renders after every change so you can push the model through edge cases by hand.

How to show multiple UI design variants on one page?

Render each variant as a separate exported component on the same route, gated by a ?variant= URL search param. Add a floating bottom bar with arrows that cycles variants via the framework router, keeping the selection shareable and reload-stable.

Should a prototype connect to a real database?

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

When should I not write a throwaway prototype?

Skip prototyping when the question is already answered or when the code is cheap to write directly. A prototype exists to answer one explicit question; if you cannot state that question in one paragraph, the prototype will answer the wrong thing.

What happens to prototype code after the question is answered?

Fold the validated decision into the real codebase, then commit the full prototype to a throwaway branch as a primary source with a pointer on the implementation issue. The main branch keeps only the validated decision, not the prototype shell.