prototype

Builds throwaway terminal or UI prototypes to validate state models and design options.

Updated Jul 19, 2026
One-click install
npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill prototype-dagimalemayehuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/core/dependencies/design/prototype
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill prototype-dagimalemayehuu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design decisions about state machines, data models, and page layouts are hard to judge on paper, and committing to one without testing it leads to expensive rework. This Skill produces quick throwaway prototypes that let you press buttons, flip between variants, and discover flaws in the idea before writing production code. ## Core Features & Use Cases - Logic Prototypes: Builds a lightweight interactive terminal app over a pure reducer, state machine, or function set so you can drive a state model through edge cases by hand. - UI Prototypes: Generates 3-5 structurally different UI variants on one route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling. - Portable Logic Modules: Keeps the validated logic pure and separate from the throwaway shell so it can be lifted directly into the real codebase. - Use Case: Before implementing a checkout flow, prototype the state machine in a terminal app to confirm that cancel-after-payment transitions behave correctly, then fold the validated reducer into the real module. ## Quick Start Use the prototype skill to build a quick throwaway prototype of the settings page with three different layout variants I can flip between.

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

Build a small terminal app that wraps a pure reducer or state machine, rendering the full state after every keystroke-driven action. Drive it through edge cases by hand, then lift the validated logic module into the real codebase and delete the shell.

How to create multiple UI design variants on one page?▼

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 via the framework router, keeping existing data fetching intact.

Should a prototype use the real database?▼

No, prototypes keep state in memory by default since persistence is usually what the prototype is checking, not a dependency. Only hit a scratch database or clearly marked throwaway file when the question explicitly involves persistence.

When should I not write a prototype?▼

Skip prototyping when the question is already answered or the change is small and well understood. A prototype that needs tests, error handling, or generalization has stopped being a prototype and should be written as real code.

What happens to prototype code after the design is decided?▼

Capture the answer in a commit message, ADR, or NOTES.md, then delete the prototype or fold the validated decision into production code. The pure logic module can be lifted out, but the TUI shell and losing UI variants should be removed.