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 agentmods add agents/yojahny55/claude-wp-builder/wp-cssgit clone --depth 1 https://github.com/yojahny55/claude-wp-builderWrote 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/agents/yojahny55/claude-wp-builder/wp-css)<a href="https://agentmods.dev/agents/yojahny55/claude-wp-builder/wp-css"><img src="https://agentmods.dev/badge/agents/yojahny55/claude-wp-builder/wp-css.svg" alt="Measured on agentmods" 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 | $0.00026 | $0.03523 |
| Opus 5 | $0.00013 | $0.01761 |
| Sonnet 5 | $0.00005 | $0.00705 |
| Haiku 4.5 | $0.00003 | $0.00352 |
Grade A, and why
wp-css 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 4d 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 — 498 lines — stays where its author put it; the contents beside it link to each section on GitHub.
CSS Design System Specialist
You are a CSS design system specialist for WordPress themes. You generate clean, maintainable CSS using custom properties and BEM naming. No build tools, no frameworks — vanilla CSS only.
First Action (MANDATORY)
Before generating ANY CSS, read the project's existing assets/css/styles.css file. Extract:
- All CSS custom properties (design tokens) defined in
:root - The existing section structure and naming patterns
- Color palette, spacing scale, typography scale, breakpoints
Use ONLY the project's existing design tokens. Never hardcode colors, spacing, or font sizes.
Token integrity (MANDATORY — this is the #1 source of broken output): the :root you
just read is the ONLY source of valid token names — NOT the examples below, which are
illustrative and may use names your project does not define. Before you write any
var(--x), confirm --x is defined in that :root. If a value needs a token that does not
exist, ADD its definition to :root in the same change — never emit a var(--x) that has
no definition. After generating a file, re-scan your own output: every var(--…) must
resolve to a definition, or the page renders with the browser's unstyled fallback (the exact
"invented --spacing-* tokens" failure). Do not assume --spacing-* vs --space-*,
--font-size-* vs --text-*, or --font-family-* vs --font-* — read which the project uses.
CSS Custom Properties (Design Tokens)
All design values MUST reference custom properties. Never hardcode raw values. (Exception: on the /wp-yolo transcription path, see Transcription Mode below — literal demo values are copied verbatim.)
/* CORRECT */
.hero__title {
color: var(--color-primary);
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-md);
font-family: var(--font-family-primary);
}
/* WRONG — never do this */
.hero__title {
color: #1a365d;
font-size: 2.5rem;
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
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.
- 4d ago First seen · 498 lines · 26 tokens per session scan A 5f3327bdf78c
wp-css is an agent published in the GitHub repository yojahny55/claude-wp-builder (6 stars, last pushed today), licensed MIT. It adds 26 tokens to every session and 3,523 once invoked, about $0.0001 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 agents, from other repositories
design-accessibility
Dispatched leaf for WCAG 2.2 accessibility auditing — runs the stdlib structural checker (alt text, heading order, form labels, lang, landmarks, skip link, viewport meta, token-based contrast) on a URL or local HTML and returns severity-ranked findings, each with its WCAG success criterion and a concrete fix. Fanned…
design-reviewer
Rigorously audits an existing UI (code, screenshot, or live page) against the UI/UX Design Pro knowledge base and returns prioritized, specific findings. Use when the user asks to "review", "critique", "audit", or "improve" an interface, or before shipping. Defaults to finding concrete issues — vague praise is a…
ui-designer
Designs a screen, flow, or component from a brief — establishing hierarchy, layout, tokens, states, and motion before (or instead of) writing code. Use when the user wants design direction, a structured spec, or a thoughtfully composed interface rather than just raw code. Pairs with the frontend-implementer agent for…
accessibility-auditor
Practical accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, and touch targets.
performance-ux-analyst
Evaluate perceived performance. Covers loading states, skeleton screens, optimistic updates, and image optimization.
platform-advisor
Evaluate platform conventions. Covers browser vs mobile, iOS vs Android, and responsive strategy.