Borrowing it
Nothing to install: this file belongs to chama-x/GroundRules. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/chama-x/GroundRules/master/.agents/archive/v3/skill_platform-design-skills/skills/web/SKILL.mdgit clone --depth 1 https://github.com/chama-x/GroundRulesWrote 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/chama-x/groundrules/web)<a href="https://agentmods.dev/skills/chama-x/groundrules/web"><img src="https://agentmods.dev/badge/skills/chama-x/groundrules/web/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/chama-x/groundrules/web"><img src="https://agentmods.dev/badge/skills/chama-x/groundrules/web.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.00054 | $0.10504 |
| Opus 5.5 | $0.00022 | $0.04202 |
| Sonnet 5.5 | $0.00011 | $0.02101 |
| Haiku 4.5 | $0.00005 | $0.01050 |
Grade A, and why
web-design-guidelines scanned grade A 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 1mo 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
caches.match(e.request).then(hit => hit ?? fetch(e.request)) This is a copy
100% identical to web-design-guidelines — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 1,455 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Web Platform Design Guidelines
Framework-agnostic rules for accessible, performant, responsive web interfaces. Based on WCAG 2.2, MDN Web Docs, and modern web platform APIs.
1. Accessibility / WCAG [CRITICAL]
Accessibility is not optional. Most rules in this section map to WCAG 2.2 success criteria at Level A or AA. A small number of best-practice rules (noted inline) target Level AAA or go beyond WCAG.
1.1 Use Semantic HTML Elements
Use elements for their intended purpose. Semantic structure provides free accessibility, SEO, and reader-mode support.
| Element | Purpose |
|---|---|
<main> |
Primary page content (one per page) |
<nav> |
Navigation blocks |
<header> |
Introductory content or navigational aids |
<footer> |
Footer for nearest sectioning content |
<article> |
Self-contained, independently distributable content |
<section> |
Thematic grouping with a heading |
<aside> |
Tangentially related content (sidebars, callouts) |
<figure> / <figcaption> |
Illustrations, diagrams, code listings |
<details> / <summary> |
Expandable/collapsible disclosure widget |
<dialog> |
Modal or non-modal dialog boxes |
<time> |
Machine-readable dates/times |
<mark> |
Highlighted/referenced text |
<address> |
Contact information for nearest article/body |
<!-- Good -->
<main>
<article>
<h1>Article Title</h1>
<p>Content...</p>
</article>
<aside>Related links</aside>
</main>
<!-- Bad: div soup -->
<div class="main">
<div class="article">
<div class="title">Article Title</div>
<div class="content">Content...</div>
</div>
</div>
Anti-pattern: Using <div> or <span> for interactive elements. Never write <div onclick> when <button> exists.
1.2 ARIA Labels on Interactive Elements
Every interactive element must have an accessible name. Prefer visible text; use aria-label or aria-labelledby only when visible text is insufficient (SC 4.1.2).
What ships with it
3 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.
- 1mo ago First seen · 1,455 lines · 54 tokens per session scan A bbdf17699240
web-design-guidelines is a skill published in the GitHub repository chama-x/GroundRules (5 stars, last pushed 2mo ago), licensed MIT. It adds 54 tokens to every session and 10,504 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). It is 100% identical to web-design-guidelines, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
web-design-system-foundation
Use when the repository has no design system yet (no tokens, no component library - a new site/app, an "Apply design system" task, or a task that asks for one), before building any page section - writes the approved design system's generated files from getdesignsystem (files true) and builds the tokens on them when…
screen-mockup-html
Use when you draw a screen as HTML mockup documents (one per variant) - the sanitizer-safe recipe, phone and wide frames, the states grid, static control states, and the loopback self-check with screenshots at 375, 768 and 1440 attached to the task.
responsive-layout
Use when you build or change a layout, page, section, navigation, table, form or image - mobile-first rules, breakpoints and the overflow traps.
accessibility-basics
Use on every UI change - semantic HTML, labels for controls, keyboard-navigable dialogs/menus, visible focus, and never color as the only signal.
maintaining-dev-playground
Keeps the Dev Playground current with the application. Use when editing UI components in apps/client/src/ — assesses playground candidacy, checks existing playground coverage, and guides adding or updating showcases. Also use when directly editing files in apps/client/src/dev/, building new widgets or features, or…
design-system
Use when a ticket needs a systematic token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), W3C DTCG design-token files, theming and dark mode, component specs with full state coverage, or a recommendation for which design system a product should have.…