prototype

Builds throwaway logic or UI prototypes to answer design questions before implementation.

1|Updated May 25, 2020
One-click install
npx skills add https://github.com/titaneric/dotfiles --skill prototype-titaneric
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/titaneric/dotfiles/tree/main/dot_agents/skills/prototype
Command: npx skills add https://github.com/titaneric/dotfiles --skill prototype-titaneric

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 — an interactive terminal app for logic questions or switchable UI variants for visual questions — so you can validate an idea with real interaction before committing to production code. ## Core Features & Use Cases - Logic Prototypes: Builds a lightweight terminal app with a pure reducer, state machine, or function set behind a re-rendering TUI, letting you push a state model through edge cases by hand. - 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 navigation. - Capture Workflow: Folds validated decisions into real code and preserves the full prototype on a throwaway branch as a primary source, keeping main clean. - Use Case: You are unsure whether a state machine handles a tricky transition sequence. The Skill builds a one-command terminal app where you press keys to fire actions and watch the full state re-render after each step, exposing the flawed assumption immediately. ## Quick Start Ask the agent to build a throwaway prototype that tests 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 where the state machine lives in a pure module and a thin TUI shell dispatches keystrokes to it, re-rendering the full state after every action. Keep the logic free of I/O so it can be lifted into the real codebase once validated.

How to create multiple UI variants on one page for comparison?

Render each variant as a separate exported component on the same route, gated by a ?variant= URL search param. Add a floating bottom bar with arrows that cycles variants through the router so each option is shareable and reload-stable.

Should a prototype connect to a real database?

No. Prototypes keep state in memory by default because persistence is usually the thing being checked, not a dependency. Only use a scratch database or clearly marked throwaway file when the question explicitly involves persistence.

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 real cases. Use a UI prototype when the question is what a page or component should look like, comparing structurally different layouts.

What happens to prototype code after the question is answered?

The validated decision is folded into the real code, while the full prototype is committed to a throwaway branch as a primary source with a pointer left on the implementation issue. The main branch keeps only the validated decision, not the prototype shell.