prototype

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

Updated Jul 17, 2026
One-click install
npx skills add https://github.com/unnxt30/skills --skill prototype-unnxt30
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/unnxt30/skills/tree/main/prototype
Command: npx skills add https://github.com/unnxt30/skills --skill prototype-unnxt30

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions about state machines, data models, and UI layouts often look reasonable on paper but break down in practice. This Skill builds disposable prototypes that let you press buttons, flip between variants, and discover flaws in the 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 to push business logic through edge cases 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. - Answer Capture: Record the validated decision in a commit message, ADR, or NOTES.md, then delete the prototype or fold the winner into production code. - Use Case: You are unsure whether a state machine handles an edge case where event X precedes event Y. The Skill builds a small TUI that renders current state and keyboard shortcuts so you can drive the transitions yourself and watch what breaks. ## Quick Start Ask the assistant to prototype the state machine or page design you are unsure about so you can interact with it before writing real code.

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. Drive it by hand through edge cases, then lift the validated logic module into the real codebase and delete the TUI shell.

How to compare multiple UI design options in one app?

Render several 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 and only swap the rendered subtree per variant.

Should a prototype use a real database or persistence?

No. Prototypes keep state in memory 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 storage.

When should I write tests for a prototype?

Never. A prototype that needs tests is no longer a prototype. Skip tests, error handling beyond basic runnability, and abstractions; the goal is to learn something fast and then delete the code or fold the validated decision into production.

What is the difference between a logic prototype and a UI prototype?

A logic prototype answers whether a state model or data shape feels right, using an interactive terminal app. A UI prototype answers what something should look like, using several radically different page variants switchable in the browser.