web-best-practiceslisted

# Web Best Practices (audit + fix) One principle drives this skill: **making a site good for AI agents and good for humans is the same work.** Google's own agent guide says it — *"Everything we suggest to make a site 'agent-ready' also makes sites better for humans."* An agent reads a page through the screenshot, the raw DOM, and the **accessibility tree** — exactly what a screen reader, a search crawler, and a performance budget already reward. So this is **one audit**, scored across seven dimensions, each with a copy-paste fix. > **Perf is delegated.** This skill checks performance at a glance only; the measured Core Web Vitals CI gate (Lighthouse CI lab + CrUX field + web-vitals RUM) is the **`web-perf-ci`** skill — hand off there, don't re-implement it. ## The seven dimensions | # | Dimension | The bar | | --- | --- | --- | | 1 | **Semantic HTML & landmarks** | native elements over `<div>`; exactly one `<main>`; `<section>` needs an accessible name or it isn't a landmark | | 2 | **Accessibility** | real `<button>`/`<a>`; every input a linked `<label>`; meaningful `alt`; no bad ARIA (native first) | | 3 | **Images & fonts** | AVIF/WebP + `srcset`; explicit `width`/`height` (kills CLS); `loading="lazy"` below the fold; `font-display: swap` | | 4 | **Performance/CWV** | LCP ≤2.5s · INP ≤200ms · CLS ≤0.1; code-split heavy libs; brotli; long-cache hashed assets | | 5 | **Security headers** | HTTPS; CSP (no inline JS, `frame-ancestors`); HSTS; `X-Content-Type-Options`; `Sec