prototype

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

3|Updated Jan 9, 2026
One-click install
npx skills add https://github.com/craft-ts/craft-ts --skill prototype-craft-ts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/craft-ts/craft-ts/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/craft-ts/craft-ts --skill prototype-craft-ts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions about state machines, data models, and UI layouts often look reasonable on paper but fail in practice. This Skill builds throwaway 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 with a pure reducer, state machine, or function set behind it, so you can drive state transitions by hand and watch edge cases break. - 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. - Use Case: You are unsure whether a state machine handles a specific edge case. The Skill creates a runnable terminal prototype with keyboard shortcuts that mutate in-memory state and re-render the full frame after every action, so you can feel the problem immediately. ## Quick Start Ask the assistant to prototype the state machine or page design you are unsure about, and it will build a runnable throwaway prototype you can drive yourself.

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 where a pure reducer or state machine holds in-memory state and keyboard shortcuts dispatch actions. The screen clears and re-renders the full state after every action, so illegal transitions become obvious when you drive it by hand.

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. Keeping the existing data fetching and page context makes each variant easier to judge against real content.

Should a prototype use the real database or API?▼

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 local file when the question explicitly involves persistence, and name it clearly as disposable.

When should I choose a terminal prototype over a UI prototype?▼

Choose a terminal prototype when the question is about logic, state transitions, or data shape. Choose a UI prototype when the question is what something should look like. A backend module suggests logic; a page or component suggests UI.

What should happen to prototype code after the question is answered?▼

Capture the answer in a commit message, ADR, or NOTES.md, then delete the prototype or fold the validated decision into real code. The portable logic module can be lifted into production, but the TUI shell and losing UI variants should be removed.