Build throwaway HTML demos and UI variants to answer design questions.
npx skills add https://github.com/gmackie/agent-skills --skill prototype-gmackie
Please help me install this Agent Skill. Skill: prototype Source: https://github.com/gmackie/agent-skills/tree/main/skills/prototype Command: npx skills add https://github.com/gmackie/agent-skills --skill prototype-gmackie
?variant= URL param and a floating bottom bar with arrow-key cycling. - Capture Workflow: Fold validated decisions into real code while committing the prototype itself to a throwaway branch as a primary source. - Use Case: A PM is unsure whether a checkout state machine handles the "cancel after payment" edge case. Use this Skill to build a shareable HTML demo they can click through to find the bugs in the idea. ## Quick Start Ask the agent to prototype whether your state model handles a specific edge case, or to generate three UI variants of an existing page switchable via a URL parameter.High-intent search queries and answers about installing and using this skill.
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. The file opens by double-click with no framework, bundler, or server required.
Render 3-5 structurally different variants on the same route gated by a ?variant= URL search param, with a floating bottom bar for cycling. Keep existing data fetching intact and only swap the rendered subtree per variant.
Logic prototypes should be one plain HTML/CSS/JS file with everything inline so non-developers can open and share them. UI prototypes follow the host project's existing framework and component library since they live on real routes.
Skip prototyping when the question is already answered or when the code needs tests, error handling, and persistence from the start. Prototype code is written under throwaway constraints and must be rewritten properly when folded into production.
The validated decision gets folded into the real code, while the prototype itself is committed to a throwaway branch as a primary source. A context pointer to that branch is left on the implementation issue, keeping main clean.
HDeiblerAn example.
inkfinBuild throwaway HTML or UI prototypes to answer design questions about logic or layout.
cloudofgeorgeGenerate AI design variants and assemble a comparison board for structured feedback.
NagyViktTranslate Figma design nodes into framework-specific application code.