prototype

Build throwaway HTML or UI prototypes to answer design questions.

4|Updated May 26, 2026
One-click install
npx skills add https://github.com/YYG501/PM-AI-Harness --skill prototype-yyg501
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/YYG501/PM-AI-Harness/tree/main/vendor/mattpocock-skills/skills/engineering/prototype
Command: npx skills add https://github.com/YYG501/PM-AI-Harness --skill prototype-yyg501

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 press buttons, flip between variants, and feel whether a design actually works before committing to real code. ## Core Features & Use Cases - Logic Prototypes: Generate 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: Generate 3-5 radically different UI variants on one route, switchable via a ?variant= URL param and a floating bottom bar with arrow-key cycling, mounted inside an existing page when possible. - Capture Workflow: Fold validated decisions into real code and preserve the prototype on a throwaway branch as a primary source, keeping main clean. - Use Case: A PM is unsure whether an order state machine handles cancellation-after-payment. The Skill builds a one-file HTML demo with scenario walkthroughs so the team can click through the awkward cases and spot the flawed transition. ## Quick Start Ask the AI to build a throwaway prototype that answers whether your state model or page layout feels right, and let it pick the logic or UI branch.

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 without writing production code?

Build a single self-contained HTML file with a pure reducer or state machine in one script block, plus buttons that dispatch actions and re-render the current state. Add tabbed guided walkthroughs for edge cases so non-developers can click through scenarios.

How to compare multiple UI design variants in one app?

Render several 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 a framework like React or plain HTML?

Logic prototypes should be one plain HTML file with no framework, bundler, or server so anyone can double-click to open it. UI prototypes follow the host project's existing framework and component library so variants sit realistically inside the app.

When should I not write a throwaway prototype?

Skip prototyping when the question is already answered or when the code would need tests, persistence, or error handling to be meaningful. A prototype answers exactly one question; if it needs production concerns, it has stopped being a prototype.

What happens to prototype code after the question is answered?

Fold the validated decision into the real codebase, 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 and record the verdict.