skills.rest
Fatih0234
Fatih0234COMMUNITY
Explore all skills by this author →
WebsiteGitHub

prototype

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

Updated Aug 27, 2026
Search Tags:#prototype#design validation#state machine#ui variants#throwaway code#html demo
One-click install
npx skills add https://github.com/Fatih0234/mattpocock-skills-pi --skill prototype-fatih0234
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/Fatih0234/mattpocock-skills-pi/tree/main/skills/engineering/prototype
Command: npx skills add https://github.com/Fatih0234/mattpocock-skills-pi --skill prototype-fatih0234

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design questions about state models, business logic, or UI layout are hard to settle on paper. This Skill produces throwaway prototypes that let you and stakeholders feel the answer before committing to real implementation. ## Core Features & Use Cases - Logic Prototypes: Build a single self-contained HTML file with free-play buttons and guided walkthrough scenarios 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 radically different UI variants on an existing 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 committing the prototype itself to a throwaway branch as a primary source. - Use Case: Before writing a checkout state machine, build a clickable HTML demo so a PM can discover that a certain transition should be illegal, then lift the validated reducer into the real module. ## Quick Start Ask the agent to prototype whether your state model handles a tricky 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 production code?▼

Build a single self-contained HTML file containing a pure reducer or state machine module, with one button per action and guided scenario walkthroughs. Anyone can open it by double-clicking, click through edge cases, and the validated logic lifts directly into the real codebase.

How to compare multiple UI design options in a web app?▼

Render 3-5 structurally different variants on the same existing route, gated by a ?variant= URL search param, with a floating bottom bar to cycle between them. Keep existing data fetching intact so variants are judged against real content and density.

Should a prototype have tests or error handling?▼

No. A prototype that needs tests is no longer a prototype. Skip tests, persistence, and abstractions; 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 feels right, producing a shareable HTML demo. Use a UI prototype when the question is what something should look like, producing variant layouts on a route.

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.

Related Skills

Explore More Software Engineering Skills→
HDeiblerHDeibler
6

prototyping

An example.

Community
Intermediate
ArcReelArcReel
4.3k

prototype

Build throwaway HTML or UI prototypes to validate design questions.

Official
Intermediate
marqus0004marqus0004

decision-critic

Stress-test decisions by decomposing claims, generating counterpoints, and issuing verdicts.

Community
Advanced
krishsharma1008krishsharma1008

buku-rfc-generation

Generate RFC documents from PRDs using BukuWarung architecture templates.

Community
Advanced