prototype

Builds throwaway terminal apps or UI variants to answer one design question.

Updated Jul 12, 2026
One-click install
npx skills add https://github.com/sumitake/agent-collab --skill prototype-sumitake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/sumitake/agent-collab/tree/main/plugins/agent-collab/skills/prototype
Command: npx skills add https://github.com/sumitake/agent-collab --skill prototype-sumitake

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design conversations often circle questions that only a runnable artifact can settle — whether a state machine handles an awkward case, or which of several page layouts works with real data. This Skill produces a deliberately throwaway prototype that answers exactly one question, without polluting the main codebase. ## Core Features & Use Cases - Logic branch: Builds a small interactive terminal app around a pure, portable logic module (reducer, state machine, or plain functions) so you can pressure-test a state model by hand. - UI branch: Renders 3-5 structurally different variants of a page on one route, gated by a ?variant= parameter and compiled out of production builds. - Isolation guarantees: Work happens on a throwaway branch or worktree, uses the project's existing tooling and task runner, keeps state in memory, and skips tests and polish. - Use Case: When debating how a checkout state machine should handle a failed payment retry, ask for a prototype and get a keystroke-driven terminal app that exposes the full state after every action. ## Quick Start Ask the agent to prototype the design question you are stuck on, for example: prototype this state model so I can sanity-check the edge cases.

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 committing to a design?▼

Build a small interactive terminal app around a pure logic module such as a reducer or explicit state machine. Each keystroke dispatches an action and re-renders the full state, so illegal transitions and awkward cases surface immediately.

How to show multiple UI design options on one page?▼

Render 3 to 5 structurally different variants on the existing route, switched by a ?variant= URL parameter with a floating switcher bar. Variants must differ in layout and information hierarchy, not just colors, and the whole mechanism must be unreachable in production builds.

Should a prototype use the real database?▼

No. Prototypes keep state in memory by default because persistence is usually the thing being checked, not a dependency. If the question explicitly involves a database, use a scratch store with a clear wipe-me name.

When should I not build a throwaway prototype?▼

Skip prototyping when the question can be settled by reading code or a short discussion, since a prototype that answers the wrong question is pure waste. Also avoid it when you cannot isolate the work on a throwaway branch away from the user's current work.

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

The validated decision or logic module is folded into the real code on the main branch. The prototype itself stays on its throwaway branch as a primary source, with a context pointer from the relevant issue or commit.