prototype

Build throwaway prototypes that answer one design question about logic behavior or UI appearance.

20|2|Updated May 16, 2026
One-click install
npx skills add https://github.com/reddb-io/red-skills --skill prototype-reddb-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/reddb-io/red-skills/tree/main/plugins/dev/skills/engineering/prototype
Command: npx skills add https://github.com/reddb-io/red-skills --skill prototype-reddb-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state machines, data models, or page layouts are hard to settle on paper, and committing to a full implementation before validating the idea wastes effort. This Skill produces small, disposable prototypes that let you feel out the answer before writing production code. ## Core Features & Use Cases - Logic Prototypes: Build a tiny interactive terminal app that drives a pure reducer, state machine, or function set through edge cases, re-rendering full state after every keystroke. - 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 isolates the logic in a portable module, wraps it in a minimal TUI you can drive by hand, and captures the verdict in a NOTES.md before the prototype is deleted. ## Quick Start Ask the agent to prototype the checkout state machine as an interactive terminal app so you can test the edge case where a payment fails after confirmation.

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

Isolate the logic as a pure reducer or state machine with no I/O, then wrap it in a lightweight terminal UI that clears and re-renders the full state after each keystroke. Drive it by hand through the edge cases you cannot reason about on paper.

How to compare multiple UI design variations on one page?▼

Render 3-5 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 so variants are judged against real content and density.

Should a prototype connect to the real database?▼

No, prototypes use in-memory state by default since persistence is usually the thing being checked, not a dependency. Only hit a scratch database or clearly named 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 about state transitions, data shape, or API behavior. Use a UI prototype when the question is about what something should look like. If ambiguous, match the surrounding code: backend module means logic, page or component means UI.

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

The prototype is deleted or its validated logic module is folded into the real codebase. The answer itself is captured in a commit message, ADR, issue, or NOTES.md, and the TUI shell or losing UI variants are never shipped to production.