skills.rest
alex-jordan547
alex-jordan547COMMUNITY
Explore all skills by this author →
GitHub

prototype

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

Updated Jul 3, 2026
Search Tags:#prototype#design validation#state machine#tui#reducer#ui variants#throwaway code
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill prototype-alex-jordan547
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/alex-jordan547/agent-setup/tree/main/skills/prototype
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill prototype-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about business logic or UI layout are hard to answer on paper. This Skill produces runnable throwaway prototypes so you can press buttons, flip between variants, and discover flaws in the idea before committing to real code. ## Core Features & Use Cases - Logic prototypes: Build a tiny interactive terminal app with a pure reducer, state machine, or function set behind a thin TUI shell, so you can drive state transitions by hand and spot edge cases. - 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: Before writing a real settings page, ask for three radically different layouts mounted on the existing route; flip through them in the browser, pick the winner, and fold it into production code. ## Quick Start Ask the agent to prototype three different layouts for the settings page, switchable via a URL parameter, or to build a terminal prototype that exercises your state machine.

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 sits behind a thin TUI shell. Each keystroke dispatches an action, the screen clears and re-renders the full state, letting you push edge cases by hand and feel where the model breaks.

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

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 to cycle variants, keeping existing data fetching intact so variants are judged against real content.

Should a prototype connect to the real database?▼

No. Prototypes use in-memory state 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 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 prototype is deleted or its validated logic module is lifted 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.

Related Skills

Explore More Software Engineering Skills→
no-sessionno-session
107

validate

Validates product ideas through six forcing questions and saves a design document.

Community
Advanced
vinzenzvinzenz

prototype

Builds throwaway logic TUIs or UI variants to answer design questions.

Community
Intermediate
mshuffettmshuffett

create-structure-outline

Generate phased implementation plans with file changes and validation steps.

Community
Advanced
dimsourdimsour
2

quick

Make small code changes and verify them with build and test commands.

Community
Basic