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 skills/fusengine/agents/design-webappnpx skills add fusengine/agents --skill design-webappgit clone --depth 1 https://github.com/fusengine/agentsWrote 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/fusengine/agents/design-webapp)<a href="https://agentmods.dev/skills/fusengine/agents/design-webapp"><img src="https://agentmods.dev/badge/skills/fusengine/agents/design-webapp.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.00031 | $0.04899 |
| Opus 5 | $0.00015 | $0.02449 |
| Sonnet 5 | $0.00006 | $0.00980 |
| Haiku 4.5 | $0.00003 | $0.00490 |
Grade A, and why
design-webapp 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 yesterday.
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 — 307 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Requires every data surface to explicitly cover empty, loading, and error states (never a silent blank default), and applies preattentive-processing rules to tables and dataviz (right-aligned numbers, sticky headers, bar/line over pie, consistent category-to-color mapping).
Reuses design-web's general component guides (buttons, cards, grids, icons) rather than duplicating them — this skill only adds what's specific to apps.
Sources craft from the local corpus's two application interfaces (reve, linear) — no sector browsing — and declares the three reproduced elements (Je reproduis) that design-review verdicts.
Design Webapp — Dashboards, Density, States
When
After design-system tokens exist and design-method's Gate 0 has locked register
product (dense, predictable, motion stays discreet). Read design-method's routing
table first — if the surface is a marketing/landing page instead, use design-web.
Input
design-system.md— OKLCH palette, typography, spacing density, the 3 dials.design-method/references/register/product.md— the Domain-Specificity Floor and the Product Furniture table (generic KPI ribbon, marketing triad reused in-app, cookie-cutter empty state, undifferentiated settings list, generic nav vocabulary).- The corpus's two application interfaces, both under
../design-web/references/refs-design/—reve-recode/(tokens-reve.md§3 surface hierarchy, §4 application UI patterns) andlinear-recode/(tokens-linear.md§6 masking/light, §7 button architecture), plus each folder'sdesign-system.md. Loaded once per task (step 11). - The specific page/pattern being built (dashboard, auth, settings, data table, etc.).
Steps
What ships with it
13 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.
- references/layouts/pages/auth-login.md 2.5 KB
- references/layouts/pages/auth-register.md 3.0 KB
- references/layouts/pages/dashboard.md 2.5 KB
- references/layouts/pages/error-pages.md 3.2 KB
- references/layouts/pages/onboarding.md 3.1 KB
- references/layouts/pages/profile.md 2.9 KB
- references/layouts/pages/settings.md 2.8 KB
- references/layouts/patterns/command-palette.md 3.0 KB
- references/layouts/patterns/data-table.md 3.6 KB
- references/layouts/patterns/empty-state.md 3.2 KB
- references/layouts/patterns/modal-dialog.md 3.1 KB
- references/layouts/patterns/toast-notifications.md 3.0 KB
- references/responsive-dashboard.md 3.2 KB
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.
- yesterday First seen · 307 lines · 31 tokens per session scan A 72d9b8e142b3
design-webapp is a skill published in the GitHub repository fusengine/agents (25 stars, last pushed 1mo ago), licensed MIT. It adds 31 tokens to every session and 4,899 once invoked, about $0.0002 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-09-03.
Other skills, from other repositories
designing-interfaces
Creates a design system for software with a UI. Use when a project has a user interface and architecture is confirmed — whether creating from scratch or extracting patterns from existing code.
evaluate
Run accessibility checks and discover issues mapped to WCAG criteria.
guidelines
Package all brand elements into a complete brand guidelines document.
visual
Define visual identity — colors, typography, logo usage, and imagery style.
report
Generate a structured accessibility audit report with remediation guidance.
a11y
Review work through the lens of an accessibility specialist.