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 commands/abdulkader-safi/wp-to-code/wp-portgit clone --depth 1 https://github.com/Abdulkader-Safi/wp-to-codeWrote 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/commands/abdulkader-safi/wp-to-code/wp-port)<a href="https://agentmods.dev/commands/abdulkader-safi/wp-to-code/wp-port"><img src="https://agentmods.dev/badge/commands/abdulkader-safi/wp-to-code/wp-port.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.00018 | $0.00609 |
| Opus 5 | $0.00009 | $0.00304 |
| Sonnet 5 | $0.00004 | $0.00122 |
| Haiku 4.5 | $0.00002 | $0.00061 |
Grade A, and why
wp-port 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 — 38 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Port the page the user named: $ARGUMENTS.
Read the porting-gotchas skill first. It lists the failures that pass a height check, and reading it after writing the markup is worth much less than reading it before.
Then read the adapter for the stack in target.stack: ${CLAUDE_PLUGIN_ROOT}/adapters/<stack>.md. Only laravel-blade, next-app, astro and plain-html have one. For any other stack read ${CLAUDE_PLUGIN_ROOT}/adapters/_generic.md, which tells you what to work out from the project itself.
Order
-
See the page.
/wp-measure <page> --mode sections. This tells you how many sections there are and which of them you have already built for another page. -
Check for reuse before writing anything new. Look at what already exists in
target.componentDir. On the source project, reuse ran high after the first two pages: services needed 1 new section of 5, events 1 of 7, about-us 2 of 8, team 0 of 4. If a section is the same block with different content, it is a prop, not a new component. -
Measure the one section you are about to write.
/wp-measure <page> --mode tree, then query the dump for that section's subtree. Do not read the whole file into the conversation. -
Get the content separately.
--mode content, or the REST API ifsource.restApiis true. Mixing content and geometry in one pass produces output too large to read. -
Write it. Measured numbers as arbitrary values. No rounding to the spacing scale.
-
/wp-diff <page>. Fix the first section with a delta, run again. Two to four rounds is normal.
Component shape
Props are flat and string-keyed, matching what a CMS repeater returns, so wiring the CMS later is passing data through rather than reshaping it.
Variation between pages is a prop: padding, container width, row height. Pass literal class strings. Never build a class name by interpolation, in any stack, for any reason: the Tailwind scanner reads source text and an interpolated name produces no CSS and no error.
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 · 38 lines · 18 tokens per session scan A 543e22d77697
wp-port is a command published in the GitHub repository Abdulkader-Safi/wp-to-code (2 stars, last pushed 16d ago), licensed MIT. It adds 18 tokens to every session and 609 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 commands, from other repositories
brand
Generate a full editorial brand-guidelines book for any URL. 14 chapters covering brand essence/archetype, colour, typography, spacing, shape, iconography, motion, components, voice, accessibility, tokens, and how-to-use guidance. Print-ready, dark-mode toggle, hand-off-ready single HTML.
pair
Fuse two extracted designs into a single hybrid identity. Pick which axis (colour, typography, spacing, shape, motion, voice, components) comes from which site. Defaults to "visual A × voice B" — same colours/spacing as the first URL, type/voice/components from the second.
theme-swap
Recolour an extracted site's design around a new brand primary. OKLCH hue rotation preserves perceptual lightness — neutrals, type, spacing, and motion stay untouched. Side-by-side HTML preview + recoloured tokens (DTCG, Tailwind, shadcn, Figma).
dna
Place a design in the measured design space — nearest systems, per-axis percentiles, outliers.
extract
Extract the complete design language from a URL — DTCG tokens, Tailwind, Figma vars, motion, voice, components.
fidelity
Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a letter grade, a ranked correction plan, and a shareable card.