prototype

Build throwaway terminal or UI prototypes to validate design questions before committing to production code.

Updated Jun 8, 2026
One-click install
npx skills add https://github.com/Avistian/nba --skill prototype-avistian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/Avistian/nba/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/Avistian/nba --skill prototype-avistian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about business logic, state machines, or UI layouts are hard to answer on paper. This Skill produces disposable, runnable prototypes that let you press buttons, flip between variants, and discover flaws in an idea before writing real code. ## Core Features & Use Cases - Logic Prototypes: Build a lightweight interactive terminal app around a pure reducer, state machine, or function set to push edge cases through a state model by hand. - 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. - Disciplined Cleanup: Enforces throwaway rules — in-memory state, no tests, one-command run, and capturing the answer in a NOTES.md or commit before deletion. - Use Case: Before committing to a dashboard redesign, generate three radically different layouts on the existing /dashboard route, flip through them in the browser, then fold the winner into the real page and delete the rest. ## Quick Start Ask the assistant to prototype the state machine or page layout you are unsure about, stating the specific question the prototype should answer.

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 every tick. Keep the logic module free of I/O so it can be lifted into the real codebase once validated.

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

Render each variant on the same route gated by a ?variant= URL search param, with a floating bottom bar offering previous/next arrows and keyboard cycling. Variants must differ structurally in layout and information hierarchy, not just color or copy.

Should a prototype have tests or error handling?▼

No. A prototype that needs tests is no longer a prototype. Skip tests, persistence, and abstractions; the goal is to answer one question fast and then delete or absorb the code.

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

Use a logic prototype when the question is about state transitions, data shape, or business rules. Use a UI prototype when the question is what a page or component should look like. Picking the wrong branch wastes the entire prototype.

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

Capture the answer in a commit message, ADR, or NOTES.md, then either delete the prototype or fold the validated logic or winning variant into real code. Never ship the TUI shell or variant switcher to production.