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 mgiovani/cc-arsenal --skill product-design-specgit clone --depth 1 https://github.com/mgiovani/cc-arsenalWrote 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/mgiovani/cc-arsenal/product-design-spec)<a href="https://agentmods.dev/skills/mgiovani/cc-arsenal/product-design-spec"><img src="https://agentmods.dev/badge/skills/mgiovani/cc-arsenal/product-design-spec/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/mgiovani/cc-arsenal/product-design-spec"><img src="https://agentmods.dev/badge/skills/mgiovani/cc-arsenal/product-design-spec.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.00160 | $0.02636 |
| Opus 5 | $0.00080 | $0.01318 |
| Sonnet 5 | $0.00032 | $0.00527 |
| Haiku 4.5 | $0.00016 | $0.00264 |
Grade A, and why
product-design-spec 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 10d 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 — 194 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Product Design Spec
Turn an approved PRD into the design half of the spec (IA, flows, a screen inventory, and per-screen
state/interaction specs), spec'ing only as much as the work warrants. This skill writes no UI code; it
produces the design the build (implement-feature, team-implement) then works from. Output lands under
docs/specs/design/.
Input
$ARGUMENTS
Parse the source (first match wins), then read it:
| Pattern | Source | Read via |
|---|---|---|
existing docs/specs/prd/*.md or any path |
the approved PRD / a file | Read it (grab every PRD-<CAT>-NNN ID) |
PROJ-123 |
Jira | jira issue view PROJ-123 |
#42 / owner/repo#42 |
GitHub issue | gh issue view 42 --json title,body,labels,comments |
http(s):// |
URL | WebFetch |
| anything else | plain text | the idea itself |
A trailing --tier small|medium|big overrides the size assessment.
Prerequisites & fallback
Component-library detection and flow research use the Task tool with Explore/haiku subagents. No Task
tool? Run every detection and research step inline, sequentially: the phase → gate → phase structure below
is the workflow; subagents are just how it parallelizes.
Gate: an approved PRD is the source of truth
A design spec traces to requirements it does not invent. Before spec'ing anything:
- If an approved PRD (or a clear requirement set) exists, read it and harvest every requirement ID.
- If no PRD exists, do not fabricate requirements. Stop and say so:
"There's no approved PRD to trace this design to. Point me at one, or run
product-prdfirst and I'll spec the design against it."
Source-of-truth hierarchy (never silently violate it): approved requirement > design spec > mockup. A
mockup or a nice-looking screen never overrides an approved requirement: if the design implies a change,
flag it as an open question against the PRD, don't quietly redesign the requirement away.
Lean by default
The organizing principle. Default to a single docs/specs/design/design-spec.md and split a screen into
its own file under docs/specs/design/screens/ only when it outgrows the inventory.
What ships with it
8 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.
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.
- 10d ago First seen · 194 lines · 160 tokens per session scan A 4c040abfb75c
product-design-spec is a skill published in the GitHub repository mgiovani/cc-arsenal (8 stars, last pushed yesterday), licensed MIT. It adds 160 tokens to every session and 2,636 once invoked, about $0.0008 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-31.
Other skills, from other repositories
cli-anything-photoshop
A command-line tool that controls Adobe Photoshop through Windows automation. It can work with Photoshop documents, layers, selections, text, image adjustments, and exports.
extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
double-diamond
A four-stage design method for understanding a problem, defining it clearly, exploring possible solutions, and choosing one to deliver.
nous-branding
Generate images and content consistent with the Nous Research brand identity. Use when creating visuals in the Nous / Theia / Hermes ecosystem: a "cyber-classical" style blending neo-classical statuary, cyberpunk/industrial grunge, and retro anime illustration. Covers official brand color palette, typography…
figma-use
Control Figma via CLI — create shapes, frames, text, components, set styles, layout, variables, export images. Use when asked to create/modify Figma designs or automate design tasks.
awesome-design-md
Create a DESIGN.md style baseline BEFORE building UI. Use FIRST when no design draft exists — installs a proven visual style, then invoke frontend-design to implement. For borrowing a known product style, getting consistent typography/colors/spacing, or needing a fast visual starting point.