prototype

Build throwaway terminal or UI prototypes to validate logic and design decisions.

Updated Aug 17, 2026
One-click install
npx skills add https://github.com/prabaljainn/my-claude-code-setup --skill prototype-prabaljainn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/prabaljainn/my-claude-code-setup/tree/main/agents/skills/prototype
Command: npx skills add https://github.com/prabaljainn/my-claude-code-setup --skill prototype-prabaljainn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state machines, data models, or UI layouts are hard to answer on paper, and committing to a full implementation before validating the idea wastes effort. This Skill produces disposable prototypes that answer one specific question quickly, then get deleted or folded into real code. ## Core Features & Use Cases - Logic branch: Builds a lightweight interactive terminal app that drives a pure state model (reducer, state machine, or function set) through edge cases, re-rendering full state on every keystroke. - UI branch: Generates 3-5 structurally different UI variants on one route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling. - Use Case: Before building a checkout flow, ask for a prototype of the cart state machine to confirm that discount-then-remove-item edge cases behave correctly, or request three dashboard layout variants to compare side by side in the browser. ## Quick Start Ask the assistant to prototype the state machine or page design you are unsure about so you can interact with it before committing to a real implementation.

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 interactive terminal app where a pure reducer or state machine holds the state and keystrokes dispatch actions. The screen re-renders the full state after every action so you can push edge cases by hand and spot invalid transitions.

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

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 choice shareable and reload-stable.

Should a prototype connect to the real database?▼

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

When should I not write a prototype?▼

Skip prototyping when the question is already answered or the change is small and well understood. A prototype that needs tests, error handling, or generalization has stopped being a prototype and should just be written as real code.

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

Capture the answer in a commit message, ADR, or NOTES.md, then delete the prototype or fold the validated logic module into the real codebase. The TUI shell and losing UI variants should never ship to production.