Source: addyosmani/web-quality-skills · Maintainer: community: Addy Osmani · License: MIT · Checked: 24 October 2026
What is the web best practices skill?
The web best practices skill (named best-practices in its repo) gives a coding agent the checks behind Lighthouse's Best Practices category: HTTPS without mixed content, a strict CSP, current browser APIs, clean consoles and valid HTML. It runs the audit when it can, fixes the source, and re-runs the same audit to confirm.
It is one of six skills in addyosmani/web-quality-skills, a collection by Addy Osmani that its README calls "(unofficial)" and "measurement-first". The other five cover accessibility, performance, Core Web Vitals, SEO and a full web quality audit.
The skill's description reads: "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"."
As of 24 October 2026, its skills.sh page listed 28.6K installs (snapshot, 24 October 2026).
What does it do?
The skill is model-invoked, so the agent picks it up when you ask for a best practices pass, a security audit of a web page, or a modernization review. Its SKILL.md starts with an audit workflow for a rendered page:
- Run a live Lighthouse Best Practices audit with the
lighthouse_audittool if Chrome DevTools MCP is connected, in navigation mode for a normal load or snapshot mode to keep the current page state. - Inspect the console and network failures it lists.
- Add dependency, header, configuration and source inspection, since "Lighthouse is not a complete security assessment."
- Fix the code, re-run the same audit, and keep security findings separate from style preferences.
Its main areas:
| Area | What the skill checks |
|---|---|
| Security | HTTPS and HSTS, CSP with nonces or hashes, Trusted Types, Subresource Integrity, sanitizing untrusted HTML, patched dependencies |
| Compatibility | HTML5 doctype, charset first in <head>, viewport meta, feature detection over user-agent sniffing, build-time polyfills |
| Deprecated APIs | document.write, synchronous XHR, Application Cache, non-passive touch and wheel listeners |
| Errors and source maps | No console errors, React error boundaries, global error handlers, hidden source maps with sourcesContent stripped |
| Performance patterns | Deferred instead of blocking scripts, <link> tags instead of CSS @import, event delegation, listener cleanup |
| Code quality and UX | Valid HTML with no duplicate IDs, semantic elements, image aspect ratios, permission requests in context, Permissions Policy |
A few rules stand out. HSTS should be added "only after confirming every relevant subdomain supports HTTPS." CSP should be tested in report-only mode before enforcement. Polyfills should never load from a third-party CDN you don't control; the skill cites the 2024 polyfill.io supply-chain compromise as the reason.
It finishes with a checklist grouped as security (critical), compatibility, code quality and UX, and a tools table: npm audit, SecurityHeaders.com, the W3C Validator, Lighthouse and Mozilla Observatory.
What's in the folder:
SKILL.md: the workflow, the rules by area, the checklist and tools.references/SECURITY.md: deeper notes on HTTPS and HSTS, CSP and Trusted Types, Subresource Integrity, headers, dependencies, sanitization and cookies. The agent reads it when security is in scope or an audit flags a related failure.
How do you install it?
Just this skill. The skills.sh command, using the skills CLI (Node.js 22.20 or later):
npx skills add https://github.com/addyosmani/web-quality-skills --skill best-practices
Add -g for all projects. In Claude Code the folder lands in .claude/skills/best-practices/, or ~/.claude/skills/best-practices/ with -g, per the Claude Code skills docs. The SKILL.md links to the repo's web-quality-audit skill, which you can add with another --skill web-quality-audit.
All six skills as a Claude Code plugin. From the README:
/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills
It then appears as /web-quality-skills:best-practices and updates with /plugin update.
Codex and Gemini CLI. The README documents codex plugin marketplace add addyosmani/web-quality-skills (Codex CLI v0.122 or later, then @best-practices in chat) and gemini extensions install https://github.com/addyosmani/web-quality-skills. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.
claude.ai. The README suggests adding the skill to project knowledge or pasting the SKILL.md into a conversation. You can also zip the best-practices folder and upload it under Customize, then Skills, as the Claude Help Center explains.
Optional: Chrome DevTools MCP. The Chrome DevTools MCP docs give this Claude Code command for live audits:
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
How do you use it?
Run it against a page you can load, plus the repo that serves it, so it can check both runtime behavior and source.
Example prompts (suggestions, not quotes from the repo):
Run a best practices audit on http://localhost:3000 and fix the console errors and deprecated APIs it finds.Add a Content-Security-Policy to our Next.js app in report-only mode first, using nonces.Check whether production builds expose source maps, and switch to hidden maps without sourcesContent.Find every third-party script we load and add Subresource Integrity where the host supports it.Our site still uses a polyfill CDN. Replace it with build-time polyfills for our browser targets.
Requirements: none beyond the skill for source review. For live checks you need Chrome DevTools MCP or the Lighthouse CLI; for header checks the agent needs to reach the deployed site, since the skill says source configuration "alone does not prove what the deployed page sends."
Tips and limits
- It overlaps with security skills, not replaces them. The skill covers browser-facing security. For auth, input validation and server-side issues, pair it with the security and hardening skill.
- Description trigger words are broad. Phrases like "code quality review" and "security audit" can load it in non-web projects too. If that happens, name the skill you want in your prompt.
- Scores are guardrails. The README treats a Best Practices score of 95 or more as an example guardrail and says scores "do not prove accessibility, security, SEO ranking, or user experience."
- Security audit. On 24 October 2026 its skills.sh page showed Gen Agent Trust Hub: Pass, Socket: Pass, Snyk: Warn. The skill has no scripts; commands such as
npm auditrun only through your agent's shell, with your approval settings.
Under the MIT License you can copy and edit the skill as long as the copyright notice stays.
Save it in your Kipt library
In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and references/SECURITY.md. Paste the repo link instead and Kipt lists all six skills to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:
npx skills add https://github.com/<you>/<repo>.git --all -g
Kipt is not affiliated with Addy Osmani or addyosmani/web-quality-skills.
Similar skills
- Security and hardening skill: Addy Osmani's broader security skill for auth, input validation and secrets.
- SEO skill: the sibling skill for crawl, metadata and structured data.
- Core Web Vitals skill: measured LCP, INP and CLS fixes from the same repo.
- React best practices skill: framework-specific performance rules for React and Next.js.