prototype

Overview of prototype skill

What the prototype skill does

The prototype skill helps you build throwaway code that answers one concrete question before you commit to a real implementation. It is best for cases where a quick prompt is not enough: you need to test state transitions, data shape, or UI direction with something runnable and easy to discard.

Who should install it

Install the prototype skill if you regularly say “prototype this,” “show me a few options,” or “I’m not sure which shape is right.” It is especially useful for agents working in existing repos where the prototype should match local conventions instead of starting from a blank sandbox.

Why it is different

This prototype skill does not try to be a generic brainstorming prompt. It forces an early branch choice: either a logic-first terminal prototype or a UI prototype with multiple visual variants. That decision is the main value, because it prevents wasting time building the wrong kind of prototype.

Best-fit and misfit cases

Use prototype for design exploration, business-rule edge cases, state-machine uncertainty, or “what should this look like?” work. Skip it if you already know the final implementation shape, or if you only need a textual explanation rather than a runnable prototype.

How to Use prototype skill

Install and locate the source

Install the prototype skill with npx skills add mattpocock/skills --skill prototype. Then read SKILL.md first, followed by LOGIC.md or UI.md depending on the question. If you need fuller context, scan README.md, AGENTS.md, metadata.json, and any nearby rules/, resources/, or references/ folders in the repo.

Choose the right branch

The core prototype usage decision is simple: logic question equals LOGIC.md; visual question equals UI.md. If the prompt is ambiguous, infer from the surrounding code: backend or model-heavy code usually points to logic, while a page or component usually points to UI. If the user is available, ask one clarifying question before building.

Turn a rough idea into a usable prompt

A strong prototype guide prompt names the question, the target surface, and the constraint. For example: “Prototype whether this subscription state machine handles cancellation, grace periods, and resume flow” is better than “prototype billing.” For UI work, say what screen it belongs to, what existing data must stay real, and how many variants you want. The more specific the question, the less likely the skill is to produce the wrong artifact.

Files to read first

Start with SKILL.md to understand the branch rule and shared constraints. Then read LOGIC.md if you need a tiny interactive state explorer, or UI.md if you need multiple layouts on one route. Those files are the shortest path to the practical install decision because they show the workflow, not just the idea.

prototype skill FAQ

Is prototype only for frontend work?

No. The prototype skill is split deliberately: one branch is for UI exploration, and the other is for business logic or state modeling. If you need to test “what should this look like,” use the UI branch; if you need to test “does this state change make sense,” use the logic branch.

How is this different from a normal prompt?

A normal prompt can ask for a mockup, but the prototype skill adds a workflow that reduces guesswork: it chooses a branch, keeps the work throwaway, and pushes the output toward something you can actually inspect. That makes it more useful when the cost of choosing the wrong design is high.

Is the prototype skill beginner-friendly?

Yes, if you can describe the question clearly. It is less beginner-friendly when the request is vague, because the skill depends on choosing the right branch and matching the host project’s conventions. If you do not know the runtime or page shape, expect to provide a bit more context.

When should I not use prototype for Prototypes?

Do not use it for final production implementation, broad architecture redesigns, or requests where you only need copywriting or ideation. The prototype skill is strongest when you want a disposable artifact that helps you decide, not a polished feature that you ship as-is.

How to Improve prototype skill

Give the question, not the conclusion

The best way to improve prototype skill output is to describe the uncertainty you need resolved. Instead of “build a better checkout,” say “test whether a one-page checkout can handle coupon entry, shipping selection, and payment errors without feeling crowded.” That gives the skill a real decision target.

Provide the minimum real context

For a better prototype guide result, include the host route, the relevant data shape, any existing components that must remain, and any constraints like framework, runtime, or no-new-dependencies rules. Prototype quality improves when the skill can mirror the actual environment instead of inventing one.

Watch for the common failure mode

The main failure mode is picking the wrong branch too early. If the prototype is about the wrong thing, the output can still look polished while being useless. When in doubt, force the skill to state its assumption at the top and keep the prototype narrowly scoped to that assumption.

Iterate with one sharper constraint

After the first pass, improve the prototype install result by changing one thing at a time: fewer variants, more realistic data, a stricter edge case, or a more specific target screen. This is usually more effective than asking for “more options,” because the skill is designed to answer a question, not maximize breadth.