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.
npx skills add OutlineDriven/odin-claude-plugin --skill polished-web-prototypegit clone --depth 1 https://github.com/OutlineDriven/odin-claude-pluginWrote 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.
[](https://agentmods.dev/skills/outlinedriven/odin-claude-plugin/polished-web-prototype)<a href="https://agentmods.dev/skills/outlinedriven/odin-claude-plugin/polished-web-prototype"><img src="https://agentmods.dev/badge/skills/outlinedriven/odin-claude-plugin/polished-web-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.
<a href="https://agentmods.dev/skills/outlinedriven/odin-claude-plugin/polished-web-prototype"><img src="https://agentmods.dev/badge/skills/outlinedriven/odin-claude-plugin/polished-web-prototype.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00052 | $0.02194 |
| Opus 5.5 | $0.00021 | $0.00878 |
| Sonnet 5.5 | $0.00010 | $0.00439 |
| Haiku 4.5 | $0.00005 | $0.00219 |
Grade A, and why
polished-web-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 1mo 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.
How it starts
The opening of the file, as written. The whole thing — 81 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Polished web prototype
Contract
| Field | Bound contract |
|---|---|
| Trigger | The user runs /polished-web-prototype or asks to convert an approved mockup, design plan, or freeform description into a polished responsive HTML artifact. |
| Authority | Reversible local: writes only the named HTML artifact file and its finalized.json metadata under the project design directory, and (for framework-native output) the package manifest and lockfile at the project root; rollback is undo. No remote mutation. When framework-native output is chosen, the only permitted mutation beyond the artifact and metadata is adding the Pretext dependency using the detected package manager. |
| Side effect | The HTML artifact, finalized.json, and, for framework output, the manifest and lockfile dependency addition. A local HTTP preview server runs during refinement and is stopped at finalization. |
| Done | The user accepted the artifact or chose to finalize at the 10-iteration gate; finalized.json is written with every listed field; the preview server is stopped. |
Inputs
- A design source: an approved mockup image (PNG), a written product or design plan, or a freeform user description. At least one must be supplied; if none exists, ask the user which source to start from.
- Optional: a repo-root DESIGN.md carrying design tokens (brand colors, font family, spacing scale). Its values override any extracted defaults for system-level properties.
- Optional: the target frontend framework (React, Svelte, Vue, Solid, Preact). If a package.json declares one, ask whether output should be a self-contained vanilla HTML file or a framework-native component.
Procedure
- Detect the design source and extract the implementation spec. Look for an approved mockup image, a product or design plan, and a repo-root DESIGN.md. If none are found, ask the user to supply a freeform description or a PNG path. Record the mode: approved-mockup, plan-driven, freeform, or evolve (a prior finalized HTML exists and the user chooses to iterate on it). Build the spec: colors (hex), fonts (family and weights), spacing scale, component list, and layout type, extracted from the mockup image, the plan prose, or the freeform description. DESIGN.md tokens override extracted system-level values. Generate real content from the source; never use lorem ipsum or placeholder text. Apply the UX doctrine below to every layout and visual decision before generating any markup. The doctrine is observed user behavior, not preference:
- Every page is self-evident; if a user must think "what do I click," the design failed.
- Three mindless clicks beat one thoughtful one; each step is an obvious choice.
- Omit half the words, then half of what remains; happy talk and instructions must die.
- Users scan, satisfice, and muddle through; design for scanning with visual hierarchy, grouped related items, and the right choice made most visible.
- Use web conventions (logo top-left, nav top/left, search icon) unless a known better idea exists.
- Visual hierarchy is everything: more important is more prominent; if everything shouts, nothing is heard.
- Make clickable things obviously clickable without hover (shape, location, color, underlining); mobile has no hover.
- Eliminate noise by removal, not addition.
- Clarity trumps consistency.
- Persistent navigation answers: what site, what page, what sections, what options, where am I, how to search.
- Every friction point depletes a finite goodwill reservoir; replenish by making the user's goal obvious and recovery easy.
- Mobile raises the stakes: 44px minimum touch targets, visible affordances, ruthless prioritization.
What ships with it
1 file 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.
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.
- 1mo ago First seen · 81 lines · 52 tokens per session scan A 941b4603826b
polished-web-prototype is a skill published in the GitHub repository OutlineDriven/odin-claude-plugin (39 stars, last pushed 25d ago), licensed Apache-2.0. It adds 52 tokens to every session and 2,194 once invoked, about $0.0002 per session on Opus 5.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-09-06.
Other skills, from other repositories
local-ai-agents
Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
insight-error-page
Write or audit an insight-kind error page for the Next.js dev overlay. Use when creating a new errors/ .mdx page, auditing an existing one, or checking that a page matches the framework fix cards. Covers page structure, title alignment, FixCard cards with Copy prompt button, code snippets, terminology verification…