prototype

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

3|Updated Oct 28, 2020
One-click install
npx skills add https://github.com/k0d3x8its/dotfiles --skill prototype-k0d3x8its
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/k0d3x8its/dotfiles/tree/main/claude/.claude/skills/prototype
Command: npx skills add https://github.com/k0d3x8its/dotfiles --skill prototype-k0d3x8its

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions about state machines, data models, or page layouts are hard to reason about on paper, and committing to an untested design wastes implementation effort. This Skill builds disposable, runnable prototypes that answer a specific design question through hands-on interaction. ## Core Features & Use Cases - Logic Prototypes: Build a minimal screen-clearing terminal app with a pure state-transition module to push a data model or state machine through hard cases like duplicate actions, out-of-order events, and boundary conditions. - UI Prototypes: Generate 3-5 structurally different UI variants on a single route, switchable via a ?variant= URL param and a floating bottom bar, so users can compare layouts against real app data. - Use Case: Before building a task management feature, prototype the reducer in a terminal app to verify it handles concurrent cancellation correctly, then fold the validated logic module into production and delete the scaffolding. ## Quick Start Ask the AI to prototype the state machine for your feature as an interactive terminal app so you can test edge cases before implementing it.

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 implementing it?▼

Write the state transitions as a pure function with no I/O, then wrap it in a minimal screen-clearing terminal loop that renders full state after every action. Drive it through boundary cases, duplicate actions, and out-of-order events to find transitions that are hard to reason about on paper.

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

Render 3-5 structurally different variants on the same route, gated by a ?variant= URL search param, with a fixed bottom bar offering previous/next arrows and keyboard cycling. Gate the switcher on a debug flag so it never ships to production.

Should a prototype use the same language as the project?▼

Yes, prototypes should use the language and runtime already in the project without introducing new dependencies. The goal is minimal friction to run with one command, not a clean dependency tree.

When should I not build a prototype?▼

Skip prototyping when the design question is already answered or the change is trivial. Prototypes exist to resolve uncertainty about logic behavior or visual direction; if neither is uncertain, write the real implementation directly.

What should I do with prototype code after the question is answered?▼

Capture the answer in a commit message, NOTES.md, or ADR, then either delete the prototype or fold the validated logic module into production. Never leave both the throwaway shell and the logic module, and rewrite rather than directly promote prototype code.