prototype

Build throwaway interactive prototypes to validate logic models or explore UI design variants.

1|Updated Jun 2, 2026
One-click install
npx skills add https://github.com/SevWren/Daily-Motivation-Brain-Helper --skill prototype-sevwren
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/SevWren/Daily-Motivation-Brain-Helper/tree/main/CLAUDE/skills/engineering/prototype
Command: npx skills add https://github.com/SevWren/Daily-Motivation-Brain-Helper --skill prototype-sevwren

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layouts are hard to answer on paper. This Skill builds throwaway, runnable prototypes that let you press buttons, flip between variants, and discover flaws in an idea before committing to production code. ## Core Features & Use Cases - Logic Prototypes: Build a lightweight terminal app with a pure reducer, state machine, or function set behind it, so you can drive state transitions by hand and watch edge cases unfold. - UI Prototypes: Generate 3-5 structurally different variants of a page on a single route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key navigation. - Capture Workflow: Fold validated decisions into real code while preserving the full prototype on a throwaway branch as a primary source. - Use Case: Before writing a new onboarding flow, generate three radically different layouts on the existing settings route, flip through them in the browser, pick the winner, and discard the rest. ## Quick Start Ask the AI to build a throwaway prototype that tests whether your state machine handles a tricky 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 with a pure reducer or state machine behind it, driven by keyboard shortcuts that re-render the full state after every action. Keep the logic module free of I/O so it can be lifted directly into the real codebase once validated.

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

Render each variant on the same route gated by a ?variant= URL search param, with a floating bottom bar offering arrow buttons and keyboard cycling. Keep existing data fetching intact so variants are judged against real content and layout density.

Should a prototype include tests and error handling?▼

No. A prototype that needs tests is no longer a prototype. Skip tests, persistence, and polish; the goal is to answer one design question fast, then rewrite the winning approach properly when folding it into production code.

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

Fold the validated decision into the real code, then commit the full prototype to a throwaway branch outside main as a primary source. Leave a pointer to that branch on the implementation issue so the context survives without polluting main.