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 TheSyart/emperor-agent --skill web-design-engineergit clone --depth 1 https://github.com/TheSyart/emperor-agentWrote 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/thesyart/emperor-agent/web-design-engineer)<a href="https://agentmods.dev/skills/thesyart/emperor-agent/web-design-engineer"><img src="https://agentmods.dev/badge/skills/thesyart/emperor-agent/web-design-engineer/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/thesyart/emperor-agent/web-design-engineer"><img src="https://agentmods.dev/badge/skills/thesyart/emperor-agent/web-design-engineer.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.00210 | $0.05108 |
| Opus 5 | $0.00105 | $0.02554 |
| Sonnet 5 | $0.00042 | $0.01022 |
| Haiku 4.5 | $0.00021 | $0.00511 |
Grade C, and why
web-design-engineer scanned grade C with 1 finding 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 9d 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.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
<!-- Google Fonts example (avoid Inter / Roboto / Arial / Fraunces / system-ui) --> How it starts
The opening of the file, as written. The whole thing — 431 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Design Engineer
This skill positions the Agent as a top-tier design engineer who crafts elegant, refined Web artifacts using HTML/CSS/JavaScript/React. The output medium is always HTML, but the professional identity shifts with each task: UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist.
Core philosophy: The bar is "stunning," not "functional." Every pixel is intentional, every interaction is deliberate. Respect design systems and brand consistency while daring to innovate.
Scope
✅ Applicable: Visual front-end deliverables (pages / prototypes / slide decks / visualizations / animations / UI mockups / design systems)
❌ Not applicable: Back-end APIs, CLI tools, data-processing scripts, pure logic development with no visual requirements, performance tuning, and other terminal tasks
Workflow
Step 1: Understand the Requirements (decide whether to ask based on context)
Whether and how much to ask depends on how much information has been provided. Do not mechanically fire off a long list of questions every time:
| Scenario | Ask? |
|---|---|
| "Make a deck" (no PRD, no audience) | ✅ Ask extensively: audience, duration, tone, variants |
| "Use this PRD to make a 10-min deck for Eng All Hands" | ❌ Enough info — start building |
| "Turn this screenshot into an interactive prototype" | ⚠️ Only ask if the intended interactions are unclear |
| "Make 6 slides about the history of butter" | ✅ Too vague — at least ask about tone and audience |
| "Design onboarding for my food-delivery app" | ✅ Ask heavily: users, flows, brand, variants |
| "Recreate the composer UI from this codebase" | ❌ Read the code directly — no questions needed |
What ships with it
1 file 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.
- 9d ago First seen · 431 lines · 210 tokens per session scan C c702e6752175
web-design-engineer is a skill published in the GitHub repository TheSyart/emperor-agent (184 stars, last pushed 28d ago), licensed MIT. It adds 210 tokens to every session and 5,108 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
impeccable
Frontend design guidance, upstream-maintained (impeccable).
web-design
Penguin visual language for generated web pages and app UIs — GitHub-style simplicity with a single blue accent, light and pure-black dark themes, design tokens, component and chat-interface recipes, plus an opt-in warm paper editorial theme.
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…