best-practices Skill (addyosmani) for Claude: Web Security and Code Quality Audit

Makes your assistant audit a web page for security, browser compatibility and code quality, using Lighthouse evidence.

Installs: 29.7K; on skills.sh
Stars: 3K; on GitHub
Files: 1; besides SKILL.md
Updated: Aug 2026; last repo commit

best-practices has your assistant audit a page, starting with a live Lighthouse Best Practices run when it can. It then checks dependencies, headers, configuration and source, fixes the code, and re-runs the same audit. It keeps security findings apart from style preferences, and it says a high Lighthouse score is never proof that an app is secure.

It triggers on requests like "apply best practices", "security audit", "modernize code", "code quality review" or "check for vulnerabilities". A security note in the folder covers HTTPS, CSP, Trusted Types, SRI, headers, dependencies, sanitization and cookies. The folder holds 2 files including SKILL.md. The README calls the collection unofficial.

Good for

Web developers who want a security and quality pass before shipping
Teams cleaning up old front-end code
Reviewers who want audit findings backed by measured results

Install best-practices

Claude Code

Copy this prompt.

Install the best-practices skill in Claude Code. Run this command:

/plugin marketplace add addyosmani/web-quality-skills
/plugin install web-quality-skills@addy-web-quality-skills

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Claude Code.

The plugin and the README's install-all commands add all six web-quality skills (web-quality-audit, performance, core-web-vitals, accessibility, seo and best-practices). The plugin manifests list no hooks. To take only best-practices, use the single-skill command.

From the project README. Source.

What's in the skill

When it loads

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".

Sections in SKILL.md

Evidence-led audit workflow
Security
Browser compatibility
Doctype declaration
Character encoding
Viewport meta tag
Feature detection
Polyfills (when needed)
Deprecated APIs
Avoid these
Event listener passive
Console & errors
No console errors
Error boundaries (React)
Global error handler
Source maps

Key facts

Author: Addy Osmani (addyosmani/web-quality-skills)
Repo: addyosmani/web-quality-skills
License: MIT (SKILL.md frontmatter and README)
Installs on skills.sh: 29,719 (Nov 2, 2026)
GitHub stars (whole repo): 3,022 (Nov 2, 2026)
Last repo commit: Aug 24, 2026
Skill folder: 2 files including SKILL.md: SKILL.md, references/SECURITY.md
Skill version in SKILL.md: 2.0
Optional: Chrome DevTools MCP for live Lighthouse audits; Lighthouse CLI otherwise
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk warn

What it includes

Runs a Best Practices audit via Chrome DevTools MCP lighthouse_audit when available
Runs code · Live Lighthouse audit
Without live tools, uses the Lighthouse CLI plus focused dependency and header checks
Runs code · Lighthouse CLI fallback
Reads the listed failures and fetches details only when they support a finding
Read · Inspect console and network failures
Fixes the implicated code, re-runs the same audit, keeps security apart from style
Write · Fix and re-run
HTTPS, strict CSP, sanitized HTML, pinned third-party code, verified headers
HTTPS without mixed content, strict CSP, sanitized HTML, pinned third-party code, verified headers
Security essentials
Details on HSTS, CSP, Trusted Types, SRI, headers, dependencies, sanitization and cookies
Security reference note
The security note lists npm audit and npm audit fix for vulnerable packages
Runs code · Dependency audit
Doctype, charset, viewport, feature detection, build-time polyfills
Doctype, charset, viewport, feature detection and build-time polyfills, never from a third-party CDN
Browser compatibility
Replaces document.write, synchronous XHR and Application Cache; passive event listeners
Deprecated APIs
No console errors, React error boundaries, global error handlers
Console and errors
Hidden or no source maps in production; strip sourcesContent
Source maps
Defer scripts, avoid CSS @import, delegate events, clean up listeners
Performance patterns
Valid and semantic HTML, correct image aspect ratios
Code quality
Ask for permissions in context; restrict features with Permissions-Policy
Permissions and privacy
Checklists for security, compatibility, code quality and UX, with a tools table
Audit checklist

From the official docs

Permissions

Medium risk

This skill can run audits against a page, edit your code and suggest dependency fixes. Use a clean git branch and review the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your code to fix findings
SKILL.md says to fix the implicated code and re-run the audit. Review the diff and keep security fixes separate from style changes. github.com
The security note lists npm audit fix
The note shows npm audit fix and npm update && npm audit fix for vulnerable packages. These change your dependencies, so run them on a clean branch and check the lockfile. github.com
A live audit needs a browser tool
The Lighthouse run goes through Chrome DevTools MCP or the Lighthouse CLI, if you have one. The skill does not install either. github.com

Technical details

Talks to	The page or URL being audited. npm registry if dependency fixes are run
Scopes	Your project code and the page under audit

Questions

What does best-practices do?

It has your assistant audit a web page for security, browser compatibility and code quality. It starts from a Lighthouse Best Practices run when possible, then checks dependencies and headers.

How do I install best-practices?

Use the install box at the top of this page. The README documents a Claude Code plugin, a Codex plugin and the skills CLI. The plugin and install-all routes add all six web-quality skills.

Do I need Chrome DevTools MCP?

No. The skill uses its lighthouse_audit tool when available. Without it, the skill says to use the Lighthouse CLI plus focused dependency and header checks.

Does a good Lighthouse score mean my site is secure?

No. The skill says never to report a high Lighthouse score as proof that the application is secure, and that Lighthouse is not a complete security assessment.

Is best-practices safe to install?

The folder holds SKILL.md and one security note, and bundles no scripts. What matters is what the assistant runs: audits, code edits and possibly npm audit fix. Use a clean git branch.

How is it different from web-quality-audit?

The README describes web-quality-audit as the skill that orchestrates all the others, and best-practices as covering security, modern APIs and code quality patterns.

Does it work in Claude.ai?

The README says to add skills to project knowledge or paste the SKILL.md contents into your conversation. The install box also shows a zip upload route.

Information

updated Nov 2, 2026

Repository: addyosmani/web-quality-skills
Folder: skills/best-practices

addyosmani/web-quality-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4