prototype

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

Updated May 18, 2024
One-click install
npx skills add https://github.com/joshhornby/dotfiles --skill prototype-joshhornby
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/joshhornby/dotfiles/tree/main/.claude/skills/prototype
Command: npx skills add https://github.com/joshhornby/dotfiles --skill prototype-joshhornby

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions about state machines, data models, and page layouts are hard to judge on paper. This Skill builds disposable, runnable prototypes that let you press buttons, flip between UI variants, and discover flaws in an idea before committing to real implementation. ## Core Features & Use Cases - Logic Prototypes: Build a lightweight interactive terminal app around a pure reducer, state machine, or function set so you can drive a state model by hand and watch transitions happen. - 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. - Answer Capture: Records the question and verdict in a commit message, ADR, or NOTES.md, then deletes or absorbs the prototype so nothing rots in the repo. - Use Case: Before building a new settings page, ask for three radically different layouts; flip through them in the browser, pick the winner, and fold it into the real page. ## Quick Start Ask the assistant to prototype the feature you are unsure about, for example: prototype three different layouts for the dashboard settings page so I can compare them.

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 a full state re-render after each one. Driving the model by hand exposes edge cases that look fine on paper.

How to compare multiple UI design options in one app?

Render each variant on the same route gated by a ?variant= URL search param, with a floating bottom bar to cycle between them using clicks or arrow keys. Variants must differ structurally in layout and hierarchy, not just colour or copy.

Should a prototype connect to the real database?

No. Prototypes use in-memory state 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 enough to implement directly. A prototype that needs tests, error handling, or generalisation has stopped being a prototype and should just be built properly.

What happens to prototype code after the decision is made?

Capture the answer in a commit message, ADR, or NOTES.md, then delete the prototype or fold the validated logic into the real module. Prototype code is written without tests or polish, so rewrite it properly rather than shipping it directly.