# Best Practices

Apply modern web development best practices for security, compatibility, and code quality.

- Repository: https://github.com/addyosmani/web-quality-skills (3022 stars)
- Category: Security
- License: MIT
- Last updated: 2026-08-24
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add addyosmani/web-quality-skills --skill best-practices -g -a claude-code -y`
Codex: `npx skills add addyosmani/web-quality-skills --skill best-practices -g -a codex -y`
Cursor: `npx skills add addyosmani/web-quality-skills --skill best-practices -g -a cursor -y`
Gemini CLI: `npx skills add addyosmani/web-quality-skills --skill best-practices -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add addyosmani/web-quality-skills`

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Best practices

Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.

## Evidence-led audit workflow

When a rendered page is available:

1. 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.
2. Inspect the listed console and network failures and fetch individual details only when they support a finding.
3. Supplement runtime evidence with dependency, header, configuration, and source inspection; Lighthouse is not a complete security assessment.
4. Fix the implicated code, re-run the same audit, and keep security findings separate from style preferences.

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

## Security

Read [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.

At minimum:

* **Use HTTPS without mixed content.** Add HSTS only after confirming every relevant subdomain supports HTTPS.
* **Treat a strict CSP as defense in depth.** Prefer nonces or hashes and test with report-only before enforcement.
* **Sanitize untrusted HTML and protect DOM XSS sinks.** Prefer text APIs when markup is not required.
* **Pin and review third-party code.** Use SRI where the delivery model supports it and keep dependencies patched.
* **Verify response headers at runtime.** Source configuration alone does not prove what the deployed page sends.

## Browser compatibility

### Doctype declaration

```html
<!-- ❌ Missing or invalid doctype -->
<HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

The rest: https://github.com/addyosmani/web-quality-skills/blob/HEAD/skills/best-practices/SKILL.md