prototype

Build throwaway terminal or UI prototypes to validate logic and design decisions.

Updated Apr 6, 2026
One-click install
npx skills add https://github.com/toderian/project_template --skill prototype-toderian
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/toderian/project_template/tree/main/plugins/agents-core/skills/prototype
Command: npx skills add https://github.com/toderian/project_template --skill prototype-toderian

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Committing to a design or state model before testing it leads to wasted implementation effort. This Skill builds throwaway prototypes that answer a specific question about logic or UI before real code is written. ## Core Features & Use Cases - Logic Prototypes: Build a small interactive terminal app that drives a state machine or data model through edge cases, with the full state re-rendered after every action. - UI Prototypes: Generate several 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 new settings page, generate three radically different layouts on the existing route, flip through them in the browser, pick a winner, then delete the losers and fold the winner into the real page. ## Quick Start Ask the agent to prototype the feature you are unsure about, for example: prototype three different layouts for the dashboard settings page so I can compare them.

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 around a pure reducer or state machine module. Each keystroke dispatches an action, and the full state is re-rendered after every change so you can push the model through edge cases by hand.

How to compare multiple UI designs on the same page?

Render several structurally different variants on one route, gated by a ?variant= URL search param. A floating bottom bar with arrows and keyboard cycling lets you flip between variants, then you keep the winner and delete the rest.

Should a prototype connect to the 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 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 feel. Use a UI prototype when the question is what something should look like. If ambiguous, match the surrounding code: backend modules get logic prototypes, pages get UI variants.

What happens to prototype code after the question is answered?

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