prototype

Builds throwaway terminal or UI prototypes to validate state models and design options.

Updated Jan 28, 2026
One-click install
npx skills add https://github.com/ttphats/project-detedxs26 --skill prototype-ttphats
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/ttphats/project-detedxs26/tree/main/.augment/skills/custom/mattpocock/prototype
Command: npx skills add https://github.com/ttphats/project-detedxs26 --skill prototype-ttphats

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions about state machines, data models, and page layouts often look reasonable on paper but break down in practice. This Skill builds throwaway prototypes that let you press buttons, flip between UI variants, and discover flaws in the idea before committing to real implementation. ## Core Features & Use Cases - Logic Prototypes: Builds a lightweight interactive terminal app that drives a pure reducer, state machine, or function set through edge cases, re-rendering full state after every keystroke. - UI Prototypes: Generates 3-5 structurally different UI variants on one route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key navigation. - Use Case: Before building a checkout flow, prototype the state machine in a terminal app to confirm the "cancel after payment" transition behaves correctly, or mock up three dashboard layouts and pick one by flipping through them in the browser. ## Quick Start Ask the AI to prototype the seat-booking state machine as an interactive terminal app so you can test edge cases by hand.

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 after each one. This lets you push the model through edge cases by hand and spot invalid transitions early.

How to compare multiple UI design options in one Next.js page?▼

Render each variant as a separate component 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 density.

Should a prototype connect to the real database?▼

No. Prototypes should keep state in memory unless the question being answered is specifically about persistence. Wiring to a real database adds setup cost and failure modes that distract from the design question the prototype exists to answer.

When should I use a terminal prototype versus a UI prototype?▼

Use a terminal prototype when the question is about logic, state transitions, or data shape. Use a UI prototype when the question is what something should look like. Choosing the wrong branch wastes the prototype, since the two produce very different artifacts.

What should happen to prototype code after the design is decided?▼

Capture the answer in a commit message, ADR, or NOTES.md, then delete the prototype or fold the validated logic module into real code. The pure logic module can be lifted out; the terminal shell and losing UI variants should be removed.