Build throwaway HTML or UI prototypes to answer design questions about logic and layout.
npx skills add https://github.com/yamcodes/the-hat --skill prototype-yamcodes
Please help me install this Agent Skill. Skill: prototype Source: https://github.com/yamcodes/the-hat/tree/main/skills/prototype Command: npx skills add https://github.com/yamcodes/the-hat --skill prototype-yamcodes
?variant= URL param and a floating bottom bar with arrow-key cycling. - Capture Workflow: Fold validated decisions into real code while committing the prototype to a throwaway branch as a primary source. - Use Case: Before writing a checkout state machine, build a shareable HTML demo so a PM can click through scenarios and discover that a transition should be illegal. ## Quick Start Ask the AI to prototype whether your state model handles a tricky edge case, or to generate three layout 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 in one script block, free-play buttons per action, and tabbed guided walkthroughs for edge cases. Anyone can open it by double-clicking and push the model through real scenarios.
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.
No, prototypes keep state in memory by default since persistence is usually the thing being checked, not a dependency. Only hit a scratch database or clearly named local file when the question explicitly involves persistence.
Skip prototyping when the question is already answered or when the code needs tests, error handling, and abstractions, since those signal production work. A prototype that needs tests is no longer a prototype and should be written properly instead.
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.
arndvsInterviews the user with sequential questions to refine vague plans into shared understanding.
Lento47Build throwaway prototypes to validate technical feasibility before committing to a real build.
pisithrpsGenerate tool-specific prototype prompts from PRDs for v0.dev, Lovable, and Bolt.new workflows.
EveryIncBuild throwaway web prototypes to settle product design questions before implementation.