prototype

prototype is a skill for Claude Code, Codex from vinvcn/mattpocock-skills-zh-CN. It costs 39 tokens per session (657 once invoked), scanned A, original, MIT.

A skill for building a temporary prototype to answer one focused design or logic question. It either creates an interactive state-model demo or several switchable user-interface variations, depending on the question.

In plain words
What is it for?
Use it to test whether a state model feels right or explore what a page or component should look like through a simple, disposable prototype.
Why use it?
It makes uncertain behaviour or layout easy to inspect without committing to production architecture, persistence, tests, or visual polish.

Skill for Claude CodeCodex

Written for Claude Code and Codex: shipped in a Claude Code plugin, but also agents/openai.yaml present.

Part of the mattpocock-skills plugin — 36 skills shipped together

Good fit Use it to test whether a state model feels right or explore what a page or component should look like through a simple, disposable prototype.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/vinvcn/mattpocock-skills-zh-cn/prototype
About the project

mattpocock-skills-zh-CN is a Simplified Chinese localization of a collection of reusable instructions for coding agents. Chinese-speaking developers use the translated skills to support engineering workflows while keeping their original commands, paths, identifiers, and behavior. The catalogue contains the localized skills, instructions, and plugin components.

vinvcn/mattpocock-skills-zh-CN · 4,149 stars · on GitHub

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add vinvcn/mattpocock-skills-zh-CN --skill prototype
Clone the repo
git clone --depth 1 https://github.com/vinvcn/mattpocock-skills-zh-CN

Made for: Claude Code, Codex.

Or install mattpocock-skills, the plugin that ships this one along with the rest of its 36 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for prototype

README.md
[![agentmods](https://agentmods.dev/badge/skills/vinvcn/mattpocock-skills-zh-cn/prototype/github.svg)](https://agentmods.dev/skills/vinvcn/mattpocock-skills-zh-cn/prototype)
Your own site
<a href="https://agentmods.dev/skills/vinvcn/mattpocock-skills-zh-cn/prototype"><img src="https://agentmods.dev/badge/skills/vinvcn/mattpocock-skills-zh-cn/prototype/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for prototype

Your own site · 80×15
<a href="https://agentmods.dev/skills/vinvcn/mattpocock-skills-zh-cn/prototype"><img src="https://agentmods.dev/badge/skills/vinvcn/mattpocock-skills-zh-cn/prototype.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 39 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 657 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • Socket pass 16 May 2026
  • Snyk pass 16 May 2026
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00039 $0.00657
Opus 5 $0.00019 $0.00329
Sonnet 5 $0.00008 $0.00131
Haiku 4.5 $0.00004 $0.00066

Measured 12d ago against content hash e397520fd089, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

prototype scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/engineering/prototype/SKILL.md · 27 lines

What it actually says

Prototype

Prototype 是用来回答一个问题的 throwaway code。问题决定形状。

Pick a branch

先识别正在回答哪个问题:来自用户 prompt、周围代码,或在用户在线时直接询问:

  • "Does this logic / state model feel right?"LOGIC.md。构建一个单一、可分享的 HTML 文件——free-play buttons 加 tabbed guided walkthroughs——推动 state machine 跑过纸面上难以推理的 cases,而且非开发人员也能驱动它。
  • "What should this look like?"UI.md。在单一路由上生成几种差异很大的 UI variations,并通过 URL search param 和浮动底栏切换。

这两个分支会产出非常不同的 artifacts;选错会浪费整个 prototype。如果问题确实模糊且用户不可达,默认选择更匹配周围代码的分支(backend module → logic;page 或 component → UI),并在 prototype 顶部说明假设。

Rules that apply to both

  1. 从第一天就是 throwaway,并明确标记。 Prototype code 要靠近它实际会被使用的位置(放在被 prototype 的 module 或 page 旁边),这样上下文清楚;但命名要让随手读代码的人看出它是 prototype,不是 production。对 throwaway UI routes,遵守项目现有 routing convention;不要发明新的顶层结构。
  2. 运行毫无负担。 UI prototype 从项目 task runner 中的一条命令启动——pnpm <name>python <path>bun <path> 等。Logic demo 则是用户双击即可打开的单个 HTML 文件。无论哪种,启动都不需要动脑。
  3. 默认不持久化。 State 保存在内存中。Persistence 是 prototype 要_检查_的东西,不该成为依赖。如果问题明确涉及 database,就用 scratch DB 或带有清晰 “PROTOTYPE — wipe me” 名称的本地文件。
  4. 跳过 polish。 不写 tests,不做超过“能跑起来”所需的 error handling,不做 abstractions。重点是快速学到东西。
  5. 暴露 state。 每次 action(logic)或每次 variant switch(UI)后,打印或渲染完整相关 state,让用户看到发生了什么变化。
  6. 完成后 capture。 把验证过的 decision 折进真实 code,然后把 prototype 本身作为 primary source 保存:commit 到 main 之外的 throwaway branch,并在 implementation issue 上留下指向该 branch 的 context pointer。同时在 issue 或 commit 中 capture answer,也就是 verdict 与它解决的问题。Main branch 只保留验证过的 decision。
Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 27 lines · 39 tokens per session scan A e397520fd089

Subscribe to this mod's changes

prototype is a skill published in the GitHub repository vinvcn/mattpocock-skills-zh-CN (4,149 stars, last pushed 5d ago), licensed MIT. It adds 39 tokens to every session and 657 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 52 tokens

accessibility

Consolidated accessibility skill entrypoint for WCAG 2.2, ARIA Authoring Practices, cognitive accessibility, Section 508, EN 301 549, design intent verification, and the Accessibility Planner workflow.

microsoft/hve-core · 47 tokens

make-resume

A Chinese-language tool for creating editable HTML resumes that can be changed in a browser and printed to PDF. It uses available resume templates when they are installed and otherwise provides a simpler fallback.

Hisn00w/ASu-skills · 86 tokens