WEB DEVELOPMENT / Addy Osmani
Web Best Practices
Audits a rendered page against Lighthouse best-practices failures and fixes the implicated code — CSP with nonces and a report-only rollout, Trusted Types, SRI-pinned third-party scripts, hidden source maps with sourcesContent stripped, deprecated APIs.
“Apply modern web development best practices for security, compatibility, and code quality. …”
01 / THE REASONING
Why this made the selection.
- The security reference goes beyond checklist headers: CSP as defense in depth with nonces or hashes tested report-only first, Trusted Types as the modern DOM-XSS layer, and an explicit instruction not to send X-XSS-Protection because the legacy auditor itself introduced vulnerabilities.
- The polyfill section teaches the 2024 polyfill.io supply-chain attack as the reason to self-host and pin with SRI — a live threat model, not a style rule.
- Source-map discipline is unusually concrete: hidden-source-map for webpack, sourcemap 'hidden' for Vite so the sourceMappingURL comment is not emitted, and sourcesContent stripped from maps uploaded to error trackers.
02 / THE REVIEW RECORD
What we actually inspected.
Source review has boundaries.
A clear record is more useful than a “safe” badge.
Material inspected
- skills/best-practices/SKILL.md (complete, 480 lines)
- skills/best-practices/references/SECURITY.md (195 lines)
- repository LICENSE (MIT)
- README.md (installation command audit at the existing pin)
Our findings
- The evidence-led workflow keeps security findings separate from style preferences and re-runs the same audit after fixes.
- SECURITY.md covers HTTPS and HSTS, CSP, Trusted Types, SRI, security headers, dependency scanning, sanitization and cookies with code-level examples and named sources.
- The audit checklist requires CSP with frame-ancestors, base-uri and form-action — not just default-src — which is stricter than most published checklists.
Not established by this review
- No live Lighthouse audit was run; the workflow was read, not executed.
- Header and CSP examples were not verified against a deployed origin.
- Not executed: it was not installed or run.
The review applies to the material and revision named here. A newer upstream release can change its behavior.
03 / PUT IT TO WORK
Add a skill to your workflow.
DOCUMENTED COMMAND
npx skills add addyosmani/web-quality-skills/skills/best-practices --skill best-practicesRun in your terminal to choose your AI tools, project or global scope, and installation method. This short command follows the current upstream version; the review covers the revision shown above.
Optional: install the reviewed revision
Keeps the original source and installer version where recorded, while leaving your AI tools and installation scope for you to choose.
npx skills add https://github.com/addyosmani/web-quality-skills/tree/afa8da942115f2961fdbfa80807ea0b232ff6c00/skills/best-practices --skill best-practices- Install the complete skill directory; SECURITY.md is the substance of the security half and must travel with the SKILL.md.
- Bring a runnable URL for a live audit, or accept the static-inspection fallback with hypotheses rather than findings.
Before you start
- Node.js/npm for the installer
- An agent that supports the Agent Skills format
- A rendered page plus Chrome DevTools MCP or Lighthouse CLI for live audits
04 / FOLLOW THE EVIDENCE
The source trail.
Our notes are separate from the original resource.
Check upstream before adopting a new version.
https://github.com/addyosmani/web-quality-skills/blob/afa8da942115f2961fdbfa80807ea0b232ff6c00/skills/best-practices/SKILL.md
Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, access
- Security reference (195 lines: HTTPS, CSP, Trusted Types, SRI, headers, sanitization, cookies) ↗Checked
https://github.com/addyosmani/web-quality-skills/blob/afa8da942115f2961fdbfa80807ea0b232ff6c00/skills/best-practices/references/SECURITY.md
Supports: review, whySelected, bestFor
- Repository licence (MIT) ↗Checked
https://github.com/addyosmani/web-quality-skills/blob/afa8da942115f2961fdbfa80807ea0b232ff6c00/LICENSE
Supports: license
https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md
Supports: install
https://raw.githubusercontent.com/addyosmani/web-quality-skills/afa8da942115f2961fdbfa80807ea0b232ff6c00/skills/best-practices/SKILL.md
Supports: bestFor, upstreamDescription, review
https://raw.githubusercontent.com/vercel-labs/skills/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md
Supports: review