web-design-guidelines

Malicious tool definition detected

Tool: AGENTS.md Description: # Web Platform Design Skills ## Purpose Framework-agnostic web design and accessibility guidelines based on WCAG 2.2, MDN Web Docs, and modern web platform standards.

Malicious tool definition detected

Tool: SKILL.md [1/5] Description: --- name: web-design-guidelines description: Web platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code.

Tool: SKILL.md [2/5] Description: | | `dialog` | Modal | `<dialog>` | | `alert` | Assertive live region | None | | `status` | Polite live region | `<output>` | | `navigation` | Nav landmark | `<nav>` | | `main` | Main landmark | `<main>` | | `complementary` | Aside landmark | `<aside>` | | `search` | Search landmark | `<search>` (HTML5) | | `img` | Image | `<img>` | | `list` / `listitem` | List | `<ul>/<li>` | | `heading` | Heading (with `aria-level`) | `<h1>`-`<h6>` | | `menu` / `menuitem` | Me

Tool: SKILL.md [3/5] Description: stack */ code, pre, kbd { font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; } /* Web font with fallbacks and size-adjust */ @font-face { font-family: "CustomFont"; src: url("/fonts/custom.woff2") format("woff2"); font-display: swap; font-weight: 100 900; } body { font-family: "CustomFont", system-ui, sans-serif; } ``` ### 4.2 Relative Units Use `rem` for font sizes and spacing.

Tool: SKILL.md [4/5] Description: Theming Define all theme values as custom properties.

Tool: SKILL.md [5/5]

Malicious tool definition detected

Tool: metadata.json Description: { "version": "1.0.0", "organization": "Platform Design Skills", "date": "February 2026", "abstract": "Web platform design and accessibility guidelines.

Malicious tool definition detected

Tool: rules/_sections.md [1/2] Description: # Web Platform Design Rules (Sectioned) Load individual sections as needed. Each section is self-contained. --- <!-- SECTION: accessibility --> ## Accessibility / WCAG [CRITICAL] ### Rules 1. **Use semantic HTML elements.** Use `<main>`, `<nav>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<aside>`, `<figure>`, `<dialog>`, `<details>` for their intended purpose. Never use `<div onclick>` when `<button>` exists. 2. **Add ARIA labels to interactiv

Tool: rules/_sections.md [2/2] Description: ## Dark Mode and Theming [MEDIUM] ### Rules 1. **Detect system preference.** Use `@media (prefers-color-scheme: dark)` to switch theme tokens. 2. **Define themes with CSS custom properties.** All colors, shadows, and surfaces as `--custom-properties`.