prototype

Builds throwaway prototypes to answer logic or UI design questions.

Updated Aug 3, 2026
One-click install
npx skills add https://github.com/shaahy/quicknav-desktop --skill prototype-shaahy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/shaahy/quicknav-desktop/tree/main/A%20%E6%95%99%E7%A8%8B%E9%9B%86%E5%90%88/Matt%20Pocock%20Skills%20%E6%8A%80%E8%83%BD%E9%80%9F%E6%9F%A5/source-snapshot/skills/engineering/prototype
Command: npx skills add https://github.com/shaahy/quicknav-desktop --skill prototype-shaahy

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 a small throwaway prototype so you can press buttons, flip between variants, and discover flaws in the idea before committing to real code. ## Core Features & Use Cases - Logic Prototypes: Creates 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 variants of a page on an existing route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling. - Capture Workflow: Folds validated decisions into real code and preserves the prototype on a throwaway branch as a primary source, keeping main clean. - Use Case: Before building a checkout flow, prototype the state machine in a terminal TUI to confirm edge cases like "cancel after payment" behave correctly, then lift the validated reducer into the real module. ## Quick Start Ask the AI to build a throwaway prototype that answers whether your state model handles a specific edge case, or to generate three UI variants of a page switchable via a URL parameter.

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 around a pure reducer or state machine with no I/O, then drive it with keyboard shortcuts that re-render the full state after every action. Keep the logic module portable so it can be lifted into the real codebase once validated.

How to compare multiple UI design variants in one app?▼

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

Should a prototype include tests or 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 code.

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 should look like, generating several structurally different layouts to compare.

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 as a primary source with a pointer on the implementation issue. The main branch keeps only the validated decision, not the prototype shell.