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 w2ur/claude-code-setup --skill design-directiongit clone --depth 1 https://github.com/w2ur/claude-code-setupWrote 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/w2ur/claude-code-setup/design-direction)<a href="https://agentmods.dev/skills/w2ur/claude-code-setup/design-direction"><img src="https://agentmods.dev/badge/skills/w2ur/claude-code-setup/design-direction/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/w2ur/claude-code-setup/design-direction"><img src="https://agentmods.dev/badge/skills/w2ur/claude-code-setup/design-direction.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.00024 | $0.01486 |
| Opus 5.5 | $0.00010 | $0.00594 |
| Sonnet 5.5 | $0.00005 | $0.00297 |
| Haiku 4.5 | $0.00002 | $0.00149 |
Grade A, and why
design-direction 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 6d 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 — 121 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design direction — a written direction before any code
A model with no direction lands on its own defaults, and a portfolio of
projects designed that way converges on one look. This skill makes the
direction a written, reviewable decision: read the subject, study real sites,
check the portfolio for convergence, propose 2-3 directions, and record the
chosen one in DESIGN.md.
If the project already has a DESIGN.md or a design section in its
CLAUDE.md, it has a direction: follow it, and use design-critique instead.
1. Load the ban list
Load design-tells. Its ids are the vocabulary of every step below: read the
ids from design-tells itself, never from a copy, and refer to a trap by id,
never by restating it. With no stated direction, never default to anything
section 1 of design-tells names, nor to B9 — and never pick a direction
silently: step 5 always proposes 2-3 and waits.
2. Read the subject before any visual decision
Write these down first, in this order, before a colour, a font or a layout is
considered (the headings match references/design-md-template.md):
- Read — one line:
Reading this as: <page kind> for <audience>, with a <vibe> language. - Domain — at least 5 concepts, objects or gestures of the subject.
- Colour world — at least 5 colours that exist in the subject, each with where it is seen. Tokens come later, from these.
A colour or a font that cannot be traced back to this list is a default wearing a reason.
3. Reference study
Pick 2-4 sources from the table in references/inspiration.md that match the
Read (its best for column); never one from its Excluded list (zero-cost rule).
For each site studied:
- Open it with the Playwright MCP (
browser_navigate; follow the row'show to read it, including any wait), thenbrowser_take_screenshot. The MCP writes screenshots only under its allowed roots (~/Devand~/Dev/.playwright-mcp); with nofilenamethey land in~/Dev/.playwright-mcp/. Do not request a path outside those roots — the call is refused. - Run
references/dna.js: pass the file's whole text as thefunctionargument ofbrowser_evaluate. It returns the computed fonts, sizes, weights, heading tracking, ground and text colours by area, radii, section spacing and content width. For a local file or a build the MCP will not open, run~/.claude/scripts/design/dna-harness.mjs <url|file> [light|dark](exit2= could not run; never read that as an empty DNA). - Note one thing to take and one to refuse, each tied to the screenshot or a DNA value.
What ships with it
2 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.
- 6d ago First seen · 121 lines · 24 tokens per session scan A dcf11c8905d1
design-direction is a skill published in the GitHub repository w2ur/claude-code-setup (2 stars, last pushed 3d ago), licensed MIT. It adds 24 tokens to every session and 1,486 once invoked, about $0.0001 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-10-10.
Other skills, from other repositories
figma-design
Design, build, or edit a Figma file through a design connector (plugin-API calls verified with screenshots). Use whenever the task is to create or change a Figma design, mock up a UI, logo, infographic, or design system, build styles or components, or hand a design to dev. Triggers even if the user does not name Figma…
options
Present multiple design options as a vertical stack of anchored turns.
qa-test-planner
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
archify
Validated interactive HTML diagrams, upstream-maintained.
ux-design
Section-by-section UX spec authoring for a screen, flow or HUD. Reads the player journey to provide context; also project-wide accessibility.
infographics
Create professional infographics using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Integrates research-lookup and web search for accurate data. Supports 10 infographic types, 8 industry styles, and colorblind-safe palettes.