Prototype
FreeQuickly validate design concepts and logic models.
Free · Opens the source repo
What Prototype does
The Prototype skill allows developers and designers to create throwaway code that answers specific design questions. It is particularly useful when you need to quickly validate whether a logic model or user interface design is effective. By focusing on rapid iteration and exploration, this skill helps teams avoid the pitfalls of over-engineering while still providing valuable insights into their design choices.
When using the Prototype skill, users can choose between two main branches: logic and UI. If the goal is to assess the validity of a logic or state model, the skill generates a single HTML file that allows users to interact with the state machine through various scenarios. This is especially beneficial for non-developers who need to engage with the logic without requiring deep technical knowledge. Alternatively, if the focus is on UI design, the skill can generate multiple UI variations on a single route, allowing for easy comparison and exploration of different design concepts.
The skill emphasizes a straightforward approach to prototyping. It is designed to be simple to run, with no need for complex setup or configuration. The prototypes are intentionally throwaway, meaning they are not meant for production use and should be clearly marked as such. This encourages users to experiment freely without the pressure of maintaining the prototype in the long term. The state of the application is surfaced after each action, providing immediate feedback and insights into how changes affect the overall design.
Overall, the Prototype skill is ideal for teams looking to validate their design hypotheses quickly and efficiently. It is particularly suited for scenarios where rapid feedback is essential, such as early-stage design discussions or when exploring new features. By capturing the outcomes of the prototyping process, teams can make informed decisions that lead to more robust final implementations.
When to use it
Use this skill when you need to explore design questions or validate logic models in a rapid, low-stakes environment.
When not to use it
This skill is not suitable for production code development or situations requiring polished, tested applications.
What you can build with it
Validating a Logic Model
Use the logic branch to create an interactive HTML file that tests various scenarios of your state model.
Exploring UI Variants
Generate multiple UI variations to compare different design approaches and see which resonates best with users.
Quick Feedback Sessions
Leverage the Prototype skill during design meetings to gather immediate feedback on concepts without extensive development.
How to install Prototype
View source1. Install with the skills CLI
npx skills add mattpocock/skills/prototype --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by mattpocockPrototype
A prototype is throwaway code that answers a question. The question decides the shape.
Pick a branch
Identify which question is being answered — from the user's prompt, the surrounding code, or by asking if the user is around:
- "Does this logic / state model feel right?" → LOGIC.md. Build a single shareable HTML file — free-play buttons plus tabbed guided walkthroughs — that pushes the state machine through cases that are hard to reason about on paper, and that a non-developer can drive.
- "What should this look like?" → UI.md. Generate several radically different UI variations on a single route, switchable via a URL search param and a floating bottom bar.
The two branches produce very different artifacts — getting this wrong wastes the whole prototype. If the question is genuinely ambiguous and the user isn't reachable, default to whichever branch better matches the surrounding code (a backend module → logic; a page or component → UI) and state the assumption at the top of the prototype.
Rules that apply to both
- Throwaway from day one, and clearly marked as such. Locate the prototype code close to where it will actually be used (next to the module or page it's prototyping for) so context is obvious — but name it so a casual reader can see it's a prototype, not production. For throwaway UI routes, obey whatever routing convention the project already uses; don't invent a new top-level structure.
- Trivial to run. A UI prototype starts from one command in the project's task runner —
pnpm <name>,python <path>,bun <path>, etc. A logic demo is a single HTML file the user double-clicks. Either way, no thinking required to start it. - No persistence by default. State lives in memory. Persistence is the thing the prototype is checking, not something it should depend on. If the question explicitly involves a database, hit a scratch DB or a local file with a clear "PROTOTYPE — wipe me" name.
- Skip the polish. No tests, no error handling beyond what makes the prototype runnable, no abstractions. The point is to learn something fast.
- Surface the state. After every action (logic) or on every variant switch (UI), print or render the full relevant state so the user can see what changed.
- Capture it when done. Fold any validated decision into the real code, then capture the prototype itself as a primary source: commit it to a throwaway branch, out of main, and leave a context pointer to that branch on the implementation issue. Capture the answer too — the verdict and the question it settled — in the issue or a commit. The main branch keeps only the validated decision.
Frequently asked questions about Prototype
Similar skills
Rhino 3D Scripting
Streamline your Rhinoceros 3D scripting tasks.
MVVM Toolkit
Streamline ViewModel development with source generators.
FreeCAD Scripts
Generate Python scripts for FreeCAD automation and modeling.
Azure Architecture Builder
Design and deploy Azure infrastructure using natural language.
Command Development
Streamline your command creation for Claude Code.
Create Cowork Plugin
Easily build and package plugins through guided sessions.