Source: mattpocock/skills · Maintainer: community: Matt Pocock · License: MIT · Checked: 24 October 2026
What is the prototype skill?
The prototype skill has your coding agent build throwaway code that answers one design question, either "does this logic feel right?" or "what should this look like?", so you can decide by seeing it instead of arguing about it. It is for developers stuck on a question that a conversation keeps circling without settling.
It comes from mattpocock/skills, which Matt Pocock describes in the README as "My agent skills that I use every day to do real engineering - not vibe coding." The skill's description reads: "Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like."
As of 24 October 2026, its skills.sh page listed about 986,500 installs (snapshot, 24 October 2026). The summary on that page still described a terminal app; the current SKILL.md builds an HTML file instead.
What does it do?
The SKILL.md starts from one line: "A prototype is throwaway code that answers a question. The question decides the shape." The agent first works out which question it's answering, then follows one of two branches.
Logic branch (LOGIC.md) |
UI branch (UI.md) |
|
|---|---|---|
| Question | Does this logic or state model feel right? | What should this look like? |
| Output | One self-contained HTML file, opened by double-click | 3 variants by default (5 max) on one route |
| How you drive it | State panel, free-play buttons, tabbed guided walkthroughs | ?variant= URL param and a floating bottom bar, arrow keys cycle |
| Written for | Non-developers too: labels in domain language | You, judging layouts against real data |
| What you keep | The pure logic module, lifted into real code | The winning variant, rewritten properly |
For logic questions, the actual logic lives in one <script> block as a pure module (a reducer, a state machine, or plain functions) with no DOM code, so it can move into your codebase later. The page around it is throwaway. Walkthroughs reset to a known state and cover the happy path, a tricky edge case, and something that should be illegal.
For UI questions, UI.md strongly prefers mounting variants inside an existing page with its real header, data and density, because "every variant looks fine in isolation." Variants must differ in structure, not colour: "Three slightly-tweaked card grids isn't a UI prototype, it's wallpaper." The switcher bar is hidden in production builds.
Rules for both branches: mark it clearly as a prototype, make it start with one command or a double-click, keep state in memory, skip tests and polish, show the full state after every action, and capture it when done. Capturing means folding the decision into real code and committing the prototype to a throwaway branch out of main, with a pointer on the implementation issue.
The folder holds SKILL.md, LOGIC.md, UI.md and agents/openai.yaml (Codex metadata, "Prototype"). The skill is model-invoked, so the agent can load it on its own, or you can type /prototype.
How do you install it?
The README gives a plugin route and an editable-files route, and says to pick one per agent so you don't get every skill twice.
Claude Code plugin (whole set, updates itself). The collection is in Anthropic's official plugin marketplace:
claude plugin install mattpocock-skills@claude-plugins-official
Plugin skills are namespaced, so it appears as /mattpocock-skills:prototype.
Codex plugin. From the README:
codex plugin marketplace add mattpocock/skills
codex plugin add mattpocock-skills@mattpocock
Editable files with the skills CLI. The command on skills.sh:
npx skills add https://github.com/mattpocock/skills --skill prototype
The skill doesn't call other skills. Add -g with the skills CLI to install it for all projects. In Claude Code it lands in .claude/skills/prototype/, or ~/.claude/skills/prototype/ with -g, per the Claude Code skills docs. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.
The MIT license also allows uploading the folder as a ZIP in claude.ai under Customize, then Skills, following Anthropic's help article. The UI branch expects a project with routes, so it suits a coding agent better.
How do you use it?
The repo's docs for prototype say to reach for it "the moment you hit a question you can't settle by talking." Keep the question narrow.
Example prompts (suggestions, not quotes from the repo):
/prototype Does our subscription state machine handle a downgrade during a trial? Build something our PM can click through.Prototype three different layouts for the /settings page before we commit to one.I can't tell if one cart per user or one cart per device is right. Build a quick logic demo.Try a few structurally different versions of the dashboard's empty state.
The docs list signs it's working: the question is written at the top of the demo, someone who doesn't read code can drive the logic file, the UI variants disagree about layout, and it's answered in one sitting. If you're still building it a day later, split the question.
Requirements: a browser for the HTML file. UI prototypes need your project's dev server and router; UI.md gives router.replace on Next.js and navigate on React Router as examples for updating the URL. No packages or API keys.
Tips and limits
From the repo's docs, not from testing:
- Don't prototype settled designs. The docs note agents sometimes recommend
/prototypeby name after tickets exist. If you know what to build, implement it. - Not for bugs. For something already built that misbehaves, the docs point to diagnosing-bugs.
- Not a whole-app demo. A full-app prototype "has no natural stopping point" and drifts into production with no tests.
- Run it in its own session. Prototypes generate a lot of context; the docs suggest the repo's
handoffskill to move the work and bring back only the answer. - Never ship the variants as is.
UI.mdsays to rewrite the winner properly when you fold it in.
The skill runs no scripts of its own; the agent writes the prototype code in your project. As of 24 October 2026, skills.sh showed Pass from all three security audits (Gen Agent Trust Hub, Socket and Snyk). Under the MIT License you can copy and change it if you keep the copyright notice.
Save it in your Kipt library
In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt brings in the SKILL.md with LOGIC.md and UI.md; for a link to a folder with many skills, it shows a list to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:
npx skills add https://github.com/<you>/<repo>.git --all -g
Kipt is not affiliated with Matt Pocock or mattpocock/skills.
Similar skills
- Grill with docs skill: settles the questions talking can answer; the ones it can't come to prototype.
- Grill me skill: the same interview without a repo.
- Diagnosing bugs skill: for finding why built code is broken, not what to build.
- Frontend design skill: Anthropic's skill for distinctive UI, useful once a variant has won.