` element handles this automatically.\n\n### Focus visible (2.4.7)\n\n```css\n/* ❌ Never remove focus outlines */\n*:focus { outline: none; }\n\n/* ✅ Use :focus-visible for keyboard-only focus */\n:focus {\n outline: none;\n}\n\n:focus-visible {\n outline: 2px solid currentColor; /* inherits text color → already contrast-checked */\n outline-offset: 2px;\n}\n\n/* ✅ Or pick a brand color and verify ≥3:1 contrast against every background it lands on */\nbutton:focus-visible {\n box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);\n}\n```\n\n### Focus not obscured (2.4.11) — new in 2.2\n\nWhen an element receives keyboard focus, it must not be entirely hidden by other author-created content such as sticky headers, footers, or overlapping panels. At Level AAA (2.4.12), no part of the focused element may be hidden.\n\n```css\n/* ✅ Account for sticky headers when scrolling to focused elements */\n:target {\n scroll-margin-top: 80px;\n}\n\n/* ✅ Ensure focused items clear fixed/sticky bars */\n:focus {\n scroll-margin-top: 80px;\n scroll-margin-bottom: 60px;\n}\n```\n\n### Skip links (2.4.1)\n\nProvide a skip link so keyboard users can bypass repetitive navigation. See the [skip link pattern](references/A11Y-PATTERNS.md#skip-link) for full markup and styles.\n\n### Target size (2.5.8) — new in 2.2\n\nInteractive targets must be at least **24 × 24 CSS pixels** (AA). Exceptions: inline text links, elements where the browser controls the size, and targets where a 24px circle centered on the bounding box does not overlap another target.\n\n```css\n/* ✅ Minimum target size */\nbutton,\n[role=\"button\"],\ninput[type=\"checkbox\"] + label,\ninput[type=\"radio\"] + label {\n min-width: 24px;\n min-height: 24px;\n}\n\n/* ✅ Comfortable target size (recommended 44×44) */\n.touch-target {\n min-width: 44px;\n min-height: 44px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n```\n\n### Dragging movements (2.5.7) — new in 2.2\n\nAny action that requires dragging must have a single-pointer alternative (e.g., buttons, inputs). See the [dragging movements pattern](references/A11Y-PATTERNS.md#dragging-movements) for a sortable-list example.\n\n### Timing (2.2)\n\n```javascript\n// Allow users to extend time limits\nfunction showSessionWarning() {\n const modal = createModal({\n title: 'Session Expiring',\n content: 'Your session will expire in 2 minutes.',\n actions: [\n { label: 'Extend session', action: extendSession },\n { label: 'Log out', action: logout }\n ],\n timeout: 120000\n });\n}\n```\n\n### Motion (2.3)\n\n```css\n/* Respect reduced motion preference */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n```\n\n---\n\n## Understandable\n\n### Page language (3.1.1)\n\n```html\n\n\n\n\n\n\n\nThe French word for hello is bonjour .
\n```\n\n### Consistent navigation (3.2.3)\n\n```html\n\n\n \n \n```\n\n### Consistent help (3.2.6) — new in 2.2\n\nIf a help mechanism (contact info, chat widget, FAQ link, self-help option) is repeated across multiple pages, it must appear in the **same relative order** each time. Users who rely on consistent placement shouldn't have to hunt for help on every page.\n\n### Form labels (3.3.2)\n\nEvery input needs a programmatically associated label. See the [form labels pattern](references/A11Y-PATTERNS.md#form-labels) for explicit, implicit, and instructional examples.\n\n### Error handling (3.3.1, 3.3.3)\n\nAnnounce errors to screen readers with `role=\"alert\"` or `aria-live`, set `aria-invalid=\"true\"` on invalid fields, and focus the first error on submit. See the [error handling pattern](references/A11Y-PATTERNS.md#error-handling) for full markup and JS.\n\n### Redundant entry (3.3.7) — new in 2.2\n\nDon't force users to re-enter information they already provided in the same session. Auto-populate from earlier steps, or let users select from previously entered values. Exceptions: security re-confirmation and content that has expired.\n\n```html\n\n\n Shipping address \n \n \n \n \n```\n\n### Accessible authentication (3.3.8) — new in 2.2\n\nLogin flows must not rely on cognitive function tests (e.g., remembering a password, solving a puzzle) unless at least one of:\n- A copy-paste or autofill mechanism is available\n- An alternative method exists (e.g., passkey, SSO, email link)\n- The test uses object recognition or personal content (AA only; AAA removes this exception)\n\n```html\n\nSign in with passkey \nEmail me a login link \n```\n\n---\n\n## Robust\n\n### ARIA usage (4.1.2)\n\n**Prefer native elements:**\n```html\n\nClick me
\n\n\nClick me \n\n\nOption
\n\n\n\n \n \n \n \n```\n\n**Icon buttons need accessible names:**\n```html\n\n\n \n\n\n\n Open menu \n \n```\n\n**Visually hidden class:**\n```css\n.visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n```\n\n### Color contrast (1.4.3, 1.4.6)\n\n| Text Size | AA minimum | AAA enhanced |\n|-----------|------------|--------------|\n| Normal text (< 18px / < 14px bold) | 4.5:1 | 7:1 |\n| Large text (≥ 18px / ≥ 14px bold) | 3:1 | 4.5:1 |\n| UI components & graphics | 3:1 | 3:1 |\n\n```css\n/* ❌ Low contrast (2.5:1) */\n.low-contrast {\n color: #999;\n background: #fff;\n}\n\n/* ✅ Sufficient contrast (7:1) */\n.high-contrast {\n color: #333;\n background: #fff;\n}\n\n/* ✅ Focus states need contrast too (3:1 against background, WCAG 1.4.11) */\n:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n}\n```\n\n**Don't rely on color alone:**\n```html\n\n\n
\n
\n ","createdAt":"2026-09-25T11:52:02.328Z","updatedAt":"2026-09-25T11:52:02.328Z"},{"id":"cmugwhwrr01lzqu06fo6t51qq","slug":"addyosmani-web-quality-skills-best-practices","name":"best-practices","description":"Apply modern web development best practices for security, compatibility, and code quality. Use when asked to \"apply best practices\", \"security audit\", \"modernize code\", \"code quality review\", or \"check for vulnerabilities\".","authorId":"gh:addyosmani","authorName":"addyosmani","version":"0.1.0","category":"Prompt","securityLevel":"Community","downloadsCount":0,"githubStars":2836,"pricePerCall":0,"manifest":{"name":"best-practices","tools":[],"category":"Prompt","entrypoint":{"type":"prompt"},"description":"Apply modern web development best practices for security, compatibility, and code quality. Use when asked to \"apply best practices\", \"security audit\", \"modernize code\", \"code quality review\", or \"check for vulnerabilities\".","permissions":[],"systemPrompt":"# Best practices\n\nModern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.\n\n## Evidence-led audit workflow\n\nWhen a rendered page is available:\n\n1. Run a live Lighthouse Best Practices audit when that capability is available; with Chrome DevTools MCP, use `lighthouse_audit`. Use navigation mode for a normal page load or snapshot mode when the current state must be preserved.\n2. Inspect the listed console and network failures and fetch individual details only when they support a finding.\n3. Supplement runtime evidence with dependency, header, configuration, and source inspection; Lighthouse is not a complete security assessment.\n4. Fix the implicated code, re-run the same audit, and keep security findings separate from style preferences.\n\nIf live tools are unavailable, use the Lighthouse CLI plus focused dependency and header checks. Never report a high Lighthouse score as proof that the application is secure.\n\n## Security\n\nRead [the security reference](references/SECURITY.md) when security is in scope or a live audit surfaces a related failure. It covers HTTPS/HSTS, CSP and Trusted Types, Subresource Integrity, headers, dependencies, sanitization, and cookies.\n\nAt minimum:\n\n* **Use HTTPS without mixed content.** Add HSTS only after confirming every relevant subdomain supports HTTPS.\n* **Treat a strict CSP as defense in depth.** Prefer nonces or hashes and test with report-only before enforcement.\n* **Sanitize untrusted HTML and protect DOM XSS sinks.** Prefer text APIs when markup is not required.\n* **Pin and review third-party code.** Use SRI where the delivery model supports it and keep dependencies patched.\n* **Verify response headers at runtime.** Source configuration alone does not prove what the deployed page sends.\n\n## Browser compatibility\n\n### Doctype declaration\n\n```html\n\n\n\n\n\n\n\n```\n\n### Character encoding\n\n```html\n\n\n\n Page \n Page \n\n```\n\n### Viewport meta tag\n\n```html\n\n\n Page \n\n\n\n\n Page \n\n```\n\n### Feature detection\n\n```javascript\n// ❌ Browser detection (brittle)\nif (navigator.userAgent.includes('Chrome')) {\n // Chrome-specific code\n}\n\n// ✅ Feature detection\nif ('IntersectionObserver' in window) {\n // Use IntersectionObserver\n} else {\n // Fallback\n}\n\n// ✅ Using @supports in CSS\n@supports (display: grid) {\n .container {\n display: grid;\n }\n}\n\n@supports not (display: grid) {\n .container {\n display: flex;\n }\n}\n```\n\n### Polyfills (when needed)\n\nPrefer **bundling polyfills at build time** (Babel/SWC + `core-js`, or `@vitejs/plugin-legacy`) targeted by your supported-browsers list. This eliminates the runtime check entirely and avoids shipping polyfill bytes to modern browsers.\n\nIf you must load a polyfill at runtime, append a script element — never use `document.write` (it blocks the parser and is broken in async/deferred contexts):\n\n```html\n\n```\n\n**Never load polyfills from a third-party CDN you don't control.** The `polyfill.io` service was [compromised in mid-2024](https://sansec.io/research/polyfill-supply-chain-attack) in a supply-chain attack and used to serve malware to ~100k sites. Self-host, or use a vetted mirror (e.g. [Cloudflare's `cdnjs` polyfill build](https://blog.cloudflare.com/polyfill-io-now-available-on-cdnjs-reduce-your-supply-chain-risk/)) — and pin the version with [Subresource Integrity](#subresource-integrity-sri-for-third-party-scripts).\n\n---\n\n## Deprecated APIs\n\n### Avoid these\n\n```javascript\n// ❌ document.write (blocks parsing)\ndocument.write('');\n\n// ✅ Dynamic script loading\nconst script = document.createElement('script');\nscript.src = '...';\ndocument.head.appendChild(script);\n\n// ❌ Synchronous XHR (blocks main thread)\nconst xhr = new XMLHttpRequest();\nxhr.open('GET', url, false); // false = synchronous\n\n// ✅ Async fetch\nconst response = await fetch(url);\n\n// ❌ Application Cache (deprecated)\n\n\n// ✅ Service Workers\nif ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/sw.js');\n}\n```\n\n### Event listener passive\n\n```javascript\n// ❌ Non-passive touch/wheel (may block scrolling)\nelement.addEventListener('touchstart', handler);\nelement.addEventListener('wheel', handler);\n\n// ✅ Passive listeners (allows smooth scrolling)\nelement.addEventListener('touchstart', handler, { passive: true });\nelement.addEventListener('wheel', handler, { passive: true });\n\n// ✅ If you need preventDefault, be explicit\nelement.addEventListener('touchstart', handler, { passive: false });\n```\n\n---\n\n## Console & errors\n\n### No console errors\n\n```javascript\n// ❌ Errors in production\nconsole.log('Debug info'); // Remove in production\nthrow new Error('Unhandled'); // Catch all errors\n\n// ✅ Proper error handling\ntry {\n riskyOperation();\n} catch (error) {\n // Log to error tracking service\n errorTracker.captureException(error);\n // Show user-friendly message\n showErrorMessage('Something went wrong. Please try again.');\n}\n```\n\n### Error boundaries (React)\n\n```jsx\nclass ErrorBoundary extends React.Component {\n state = { hasError: false };\n \n static getDerivedStateFromError(error) {\n return { hasError: true };\n }\n \n componentDidCatch(error, info) {\n errorTracker.captureException(error, { extra: info });\n }\n \n render() {\n if (this.state.hasError) {\n return \n \n```\n\n### Global error handler\n\n```javascript\n// Catch unhandled errors\nwindow.addEventListener('error', (event) => {\n errorTracker.captureException(event.error);\n});\n\n// Catch unhandled promise rejections\nwindow.addEventListener('unhandledrejection', (event) => {\n errorTracker.captureException(event.reason);\n});\n```\n\n---\n\n## Source maps\n\n### Production configuration\n\n```javascript\n// ❌ Source maps exposed in production\n// webpack.config.js\nmodule.exports = {\n devtool: 'source-map', // Exposes source code\n};\n\n// ✅ Hidden source maps (uploaded to error tracker)\nmodule.exports = {\n devtool: 'hidden-source-map',\n};\n\n// ✅ Or no source maps in production\nmodule.exports = {\n devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',\n};\n```\n\n**Strip `sourcesContent` from production maps** when uploading to your error tracker. By default, bundlers embed the full original source inside the `.map` file — anyone who obtains the map (including via a misconfigured upload step) gets your unminified code. Configure your bundler to omit `sourcesContent`, or use a Sentry/Bugsnag CLI flag that does so when uploading.\n\nFor Vite, prefer `sourcemap: 'hidden'` over `'true'` so the `//# sourceMappingURL=` comment isn't emitted into the bundle.\n\n---\n\n## Performance best practices\n\n### Avoid blocking patterns\n\n```javascript\n// ❌ Blocking script\n\n\n// ✅ Deferred script\n\n\n// ❌ Blocking CSS import\n@import url('other-styles.css');\n\n// ✅ Link tags (parallel loading)\n ![\"2024](\"infographic.png\")
\n ![](\"chart.png\")
\n\n\n![\"\"](\"decorative-border.png\")
\n\n\n