prototype

Build throwaway terminal or UI prototypes to answer design questions.

7|1|Updated Jul 17, 2026
One-click install
npx skills add https://github.com/J0Jng/MathModelingAgents --skill prototype-j0jng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/J0Jng/MathModelingAgents/tree/main/.claude/skills/engineering/prototype
Command: npx skills add https://github.com/J0Jng/MathModelingAgents --skill prototype-j0jng

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 a small throwaway prototype — an interactive terminal app or a set of switchable UI variants — so you can press buttons, watch state change, and discover flaws in the idea before committing to real code. ## Core Features & Use Cases - Logic Prototypes: Build a lightweight terminal app around a pure reducer, state machine, or function set to test edge cases in business logic and data models. - UI Prototypes: Generate 3-5 structurally different UI variants on one 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 preserving the prototype on a throwaway branch as a primary source. - Use Case: You are unsure whether a state machine handles a tricky transition sequence. The Skill builds a one-command terminal app where you drive the state by hand and immediately spot the illegal transition. ## Quick Start Ask the assistant to prototype whether your state machine handles a specific edge case, or to generate three different layout variants for 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 small interactive terminal app around a pure reducer or state machine, with keyboard shortcuts that dispatch actions and re-render the full state each tick. Keep the logic module free of I/O so it can be lifted into the real codebase once validated.

How to compare multiple UI layout 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 about business logic, state transitions, or data shape. 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.

Should prototype code have tests and error handling?▼

No. Prototypes are throwaway by definition — skip tests, persistence, and polish beyond what makes them runnable. A prototype that needs tests has stopped being a prototype; rewrite properly when folding the validated decision into production.

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

The validated decision — such as a reducer or winning UI variant — is folded into the real code, while the full prototype is committed to a throwaway branch as a primary source. The main branch keeps only the validated decision.