prototype

Build throwaway HTML or UI prototypes to answer design and logic questions.

Updated Apr 16, 2025
One-click install
npx skills add https://github.com/damoke012/eks_code --skill prototype-damoke012
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/damoke012/eks_code/tree/main/.claude-env/skills/prototype
Command: npx skills add https://github.com/damoke012/eks_code --skill prototype-damoke012

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layouts are hard to settle on paper. This Skill produces throwaway prototypes that let you press buttons, watch state change, or flip between radically different UI variants before committing to real code. ## Core Features & Use Cases - Logic Prototypes: Generate a single self-contained HTML file with free-play action buttons and tabbed guided walkthroughs that drive a pure reducer, state machine, or function set through edge cases, shareable with non-developers by double-click. - UI Prototypes: Generate 3-5 structurally different variants of a page on an existing route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling. - Capture Workflow: Fold validated decisions into real code and preserve the prototype on a throwaway branch as a primary source. - Use Case: A PM is unsure whether a state machine handles an edge case; you build a one-file HTML demo they can click through to discover the flaw themselves. ## Quick Start Ask the assistant to prototype whether your state model handles a specific edge case, or to generate three different layout variants for an existing page.

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

Build a single self-contained HTML file with a pure reducer or state machine module, free-play action buttons, and tabbed guided walkthroughs for edge cases. Anyone can open it by double-clicking and watch state change after each click.

How do I compare multiple UI layout options for 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. Variants must differ in layout and information hierarchy, not just colors.

Should a prototype use a real database or persistence?▼

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 marked throwaway file if the question explicitly involves storage.

When should I not build a prototype?▼

Skip prototyping when the question is already answered or when you start adding tests, error handling, and abstractions. A prototype that needs tests is no longer a prototype; it answers one question and is then thrown away.

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 as a primary source with a pointer on the implementation issue. The main branch keeps only the validated decision, not the prototype shell.