prototype

Build throwaway prototypes to answer design questions about logic or UI.

1|Updated Jul 23, 2026
One-click install
npx skills add https://github.com/sanjanb/my-agent-harness --skill prototype-sanjanb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/sanjanb/my-agent-harness/tree/main/skills/mp-prototype
Command: npx skills add https://github.com/sanjanb/my-agent-harness --skill prototype-sanjanb

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 builds small throwaway prototypes that let you interact with a state machine or flip between radically different UI variants, so you can validate an idea before committing it to production code. ## Core Features & Use Cases - Logic Prototypes: Build a lightweight terminal app that drives a pure reducer, state machine, or function set through edge cases, rendering full state on every action. - UI Prototypes: Generate 3-5 structurally different variants of a page on a single route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key navigation. - 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 edge case. The Skill builds a one-command terminal app where you press keys to push the model through real transitions and immediately spot the flaw. ## Quick Start Ask the agent to prototype whether your state model 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 terminal app that wraps a pure reducer or state machine, rendering the full state after every keystroke. Keep the logic module free of I/O so it can be lifted directly into the real codebase once validated.

How to compare multiple UI design variants on one page?

Render each variant 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 so variants are judged against real content and layout.

Should a prototype include tests and error handling?

No. A prototype that needs tests is no longer a prototype. Skip tests, persistence, and polish; the goal is to answer one design question fast, then rewrite the winning approach properly when folding it into production.

When should I use a logic prototype versus a UI prototype?

Use a logic prototype when the question is whether a state model or data shape behaves correctly under edge cases. Use a UI prototype when the question is what a page or component should look like, comparing structurally different layouts.

What happens to prototype code after the question is answered?

Fold the validated decision into the real code, then commit the full prototype to a throwaway branch outside main as a primary source. Leave a pointer to that branch on the implementation issue so the context survives.