Borrowing it
Nothing to install: this file belongs to noemica-io/design-graph. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/noemica-io/design-graph/main/.claude/skills/design-graph-authoring/SKILL.mdgit clone --depth 1 https://github.com/noemica-io/design-graphWrote 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/noemica-io/design-graph/design-graph-authoring)<a href="https://agentmods.dev/skills/noemica-io/design-graph/design-graph-authoring"><img src="https://agentmods.dev/badge/skills/noemica-io/design-graph/design-graph-authoring/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/noemica-io/design-graph/design-graph-authoring"><img src="https://agentmods.dev/badge/skills/noemica-io/design-graph/design-graph-authoring.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00145 | $0.03643 |
| Opus 5 | $0.00072 | $0.01821 |
| Sonnet 5 | $0.00029 | $0.00729 |
| Haiku 4.5 | $0.00015 | $0.00364 |
Grade A, and why
design-graph-authoring 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 — 321 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Graph Authoring
Design Graph is a canvas for reviewing many HTML page variants side by side. The
canvas viewer doesn't generate anything — it just renders graph-data.js and
serves the files in pages/. You are the generator. This skill is how you
do that well.
The single most important rule: write eagerly
The moment a sub-agent reports done, append its node + edges to
graph-data.js immediately. Do not wait for the batch. Do not collect all
returns and write them at the end. The user is watching the canvas in live
mode (?live is the default) and expects each card to pop into view the
second its HTML is on disk.
Why this matters: the perceived speed of the whole session is set by how quickly the first card appears, not by when the last one finishes. If you batch writes, the user stares at an empty canvas for 60+ seconds even though four agents finished in 15. Eager writing makes the tool feel alive.
The write itself is tiny — one {node} + one or two {edges} appended to a
JSON-like array. It takes a single Edit call. There is no reason to batch.
Even if two sub-agents return within the same second, process them
sequentially in arrival order; the second Edit runs 20ms after the first.
Rule of thumb: from "sub-agent done" notification to graph-data.js
updated should be under 5 seconds. If you catch yourself saying "let me wait
for the other three to finish and then I'll add them all," stop and write the
one you have.
The core loop, compressed
- Read the parent node + every existing sibling that shares the target label.
- Decide on N creative directions that are genuinely different (not rewordings).
- Spawn N background sub-agents — one per direction — each returning its HTML + the suggested node/edge entries.
- As each sub-agent reports done, append its entries to
graph-data.jsimmediately. This is non-negotiable — see the eager-write rule above. - Tell the user which nodes to open in the viewer.
Everything below is elaboration on that loop.
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 · 321 lines · 145 tokens per session scan A a8b6713d4de4
design-graph-authoring is a skill published in the GitHub repository noemica-io/design-graph (17 stars, last pushed 4mo ago), licensed MIT. It adds 145 tokens to every session and 3,643 once invoked, about $0.0007 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.
Other skills, from other repositories
daisyui-colors
Color rules that you must use with daisyUI 5.
daisyui-config
Configuration options for daisyUI 5.
seed-design
An integration guide for SEED Design, covering shared component specifications and foundations plus React and Lynx implementation guidance.
seed-token-analysis
A read-only analyzer for one SEED color token, including its definitions, aliases, dependent tokens, component uses, generated outputs, and color contrast. A design token is a named value such as a color that can be reused across an interface.
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
ss-studio
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…