skills.rest
The-Focus-AI
The-Focus-AIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

prototype

Builds throwaway HTML or UI prototypes to answer design questions.

Updated Jul 16, 2026
Search Tags:#prototype#design validation#state machine#walkthrough#ui variants#throwaway code#html demo
One-click install
npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill prototype-the-focus-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/The-Focus-AI/walking-thoughts/tree/main/.agents/skills/prototype
Command: npx skills add https://github.com/The-Focus-AI/walking-thoughts --skill prototype-the-focus-ai

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, runnable prototypes that let you and stakeholders feel the answer before committing to real implementation. ## Core Features & Use Cases - Logic Prototypes: Generates a single self-contained HTML file with free-play 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: Generates 3-5 radically different UI variants on an existing route (or a clearly-marked throwaway route), switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling. - Capture Workflow: Folds validated decisions into real code and preserves the full prototype on a throwaway branch as a primary source, keeping main clean. - Use Case: Ask whether a state machine handles an awkward edge case, and receive a clickable HTML demo a PM can drive; or request three layout options for a settings page and flip between them in the browser. ## Quick Start Ask the assistant to prototype whether your state model handles a specific edge case, or to generate three variant layouts 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 containing a pure reducer or state machine module, with one button per action and guided walkthrough tabs for edge cases. Anyone can open it by double-clicking and watch state change after each click.

How to generate multiple UI layout variants 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. Keep existing data fetching intact and only swap the rendered subtree per variant.

Should a prototype use the real database or persistence layer?▼

No. Prototypes keep state in memory by default, since persistence is usually the thing being checked rather than a dependency. Only hit a scratch database or clearly-marked local 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 feels right under real cases. Use a UI prototype when the question is what a page or component should look like, comparing radically different layouts.

What happens to prototype code after the question is answered?▼

The validated decision is folded into the real code, while the full prototype is committed to a throwaway branch as a primary source with a pointer left on the implementation issue. Prototype code is never promoted directly to production.

Related Skills

Explore More Software Engineering Skills→
darkmatterdarkmatter
1

prototype

Create throwable runnable prototypes for product or implementation questions.

Official
Intermediate
ninthdayninthday

prototype

Build throwaway prototypes that answer design questions about logic or UI.

Community
Intermediate
cloudofgeorgecloudofgeorge

design-shotgun

Generate AI design variants and assemble a comparison board for structured feedback.

Community
Advanced
EveryIncEveryInc
24.7k

ce-prototype

Build throwaway web prototypes to settle product design questions before implementation.

Official
Advanced