Best practices

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

How to use it

Claude Code

Run the line below. It pulls the whole folder into ~/.claude/skills/best-practices, including the files SKILL.md points to.
Describe your job in plain words. Claude Code follows the skill from there.

Claude Code — installs the whole folder, not just SKILL.md

npx degit addyosmani/web-quality-skills/skills/best-practices#main ~/.claude/skills/best-practices

For one project only, change the path to .claude/skills/best-practices. This skill also uses heavy-library.js — copying SKILL.md alone won't be enough. See the folder on GitHub.

Claude (web or desktop app)

On this page open ⋯ → Download .md.
Save it as SKILL.md in a folder, zip the folder, then Customize → Skills → + → Create skill → Upload a skill.
Pick the file and Save. Claude shows the name and description and runs a security scan.
Check the skill is switched on.
Start a new chat and describe your job in plain words. The AI follows the skill from there.

ChatGPT or another app

ChatGPT: make a Project and paste it into Instructions.
Neither? Paste it at the top of a new chat — it works for that chat.

Not working?

Check which app you pasted it into — the steps above name the right one.
Some skills need the paid tier of Claude or ChatGPT.

Step-by-step guide with screenshots · Ask in the forum

Paste into Claude, ChatGPT or Cursor.

Show the full text481 lines

name	description	license	metadata
best-practices	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".	MIT	author: web-quality-skills version: "2.0

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:

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.
Inspect the listed console and network failures and fetch individual details only when they support a finding.
Supplement runtime evidence with dependency, header, configuration, and source inspection; Lighthouse is not a complete security assessment.
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 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

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

<!-- ✅ HTML5 doctype -->
<!DOCTYPE html>
<html lang="en">

Character encoding

<!-- ❌ Missing or late charset -->
<html>
<head>
  <title>Page</title>
  <meta charset="UTF-8">
</head>

<!-- ✅ Charset as first element in head -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Page</title>
</head>

Viewport meta tag

<!-- ❌ Missing viewport -->
<head>
  <title>Page</title>
</head>

<!-- ✅ Responsive viewport -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page</title>
</head>

Feature detection

// ❌ Browser detection (brittle)
if (navigator.userAgent.includes('Chrome')) {
  // Chrome-specific code
}

// ✅ Feature detection
if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Fallback
}

// ✅ Using @supports in CSS
@supports (display: grid) {
  .container {
    display: grid;
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
  }
}

Polyfills (when needed)

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

If 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):

<script>
  if (!('fetch' in window)) {
    const s = document.createElement('script');
    s.src = '/polyfills/fetch.js';
    s.defer = true;
    document.head.appendChild(s);
  }
</script>

Never load polyfills from a third-party CDN you don't control. The polyfill.io service was compromised in mid-2024 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) — and pin the version with Subresource Integrity.

Deprecated APIs

Avoid these

// ❌ document.write (blocks parsing)
document.write('<script src="..."></script>');

// ✅ Dynamic script loading
const script = document.createElement('script');
script.src = '...';
document.head.appendChild(script);

// ❌ Synchronous XHR (blocks main thread)
const xhr = new XMLHttpRequest();
xhr.open('GET', url, false); // false = synchronous

// ✅ Async fetch
const response = await fetch(url);

// ❌ Application Cache (deprecated)
<html manifest="cache.manifest">

// ✅ Service Workers
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Event listener passive

// ❌ Non-passive touch/wheel (may block scrolling)
element.addEventListener('touchstart', handler);
element.addEventListener('wheel', handler);

// ✅ Passive listeners (allows smooth scrolling)
element.addEventListener('touchstart', handler, { passive: true });
element.addEventListener('wheel', handler, { passive: true });

// ✅ If you need preventDefault, be explicit
element.addEventListener('touchstart', handler, { passive: false });

Console & errors

No console errors

// ❌ Errors in production
console.log('Debug info'); // Remove in production
throw new Error('Unhandled'); // Catch all errors

// ✅ Proper error handling
try {
  riskyOperation();
} catch (error) {
  // Log to error tracking service
  errorTracker.captureException(error);
  // Show user-friendly message
  showErrorMessage('Something went wrong. Please try again.');
}

Error boundaries (React)

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, info) {
    errorTracker.captureException(error, { extra: info });
  }
  
  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <App />
</ErrorBoundary>

Global error handler

// Catch unhandled errors
window.addEventListener('error', (event) => {
  errorTracker.captureException(event.error);
});

// Catch unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  errorTracker.captureException(event.reason);
});

Source maps

Production configuration

// ❌ Source maps exposed in production
// webpack.config.js
module.exports = {
  devtool: 'source-map', // Exposes source code
};

// ✅ Hidden source maps (uploaded to error tracker)
module.exports = {
  devtool: 'hidden-source-map',
};

// ✅ Or no source maps in production
module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
};

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.

For Vite, prefer sourcemap: 'hidden' over 'true' so the //# sourceMappingURL= comment isn't emitted into the bundle.

Performance best practices

Avoid blocking patterns

// ❌ Blocking script
<script src="heavy-library.js"></script>

// ✅ Deferred script
<script defer src="heavy-library.js"></script>

// ❌ Blocking CSS import
@import url('other-styles.css');

// ✅ Link tags (parallel loading)
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="other-styles.css">

Efficient event handlers

// ❌ Handler on every element
items.forEach(item => {
  item.addEventListener('click', handleClick);
});

// ✅ Event delegation
container.addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Memory management

// ❌ Memory leak (never removed)
const handler = () => { /* ... */ };
window.addEventListener('resize', handler);

// ✅ Cleanup when done
const handler = () => { /* ... */ };
window.addEventListener('resize', handler);

// Later, when component unmounts:
window.removeEventListener('resize', handler);

// ✅ Using AbortController
const controller = new AbortController();
window.addEventListener('resize', handler, { signal: controller.signal });

// Cleanup:
controller.abort();

Code quality

Valid HTML

<!-- ❌ Invalid HTML -->
<div id="header">
<div id="header"> <!-- Duplicate ID -->

<ul>
  <div>Item</div> <!-- Invalid child -->
</ul>

<a href="/"><button>Click</button></a> <!-- Invalid nesting -->

<!-- ✅ Valid HTML -->
<header id="site-header">
</header>

<ul>
  <li>Item</li>
</ul>

<a href="/" class="button">Click</a>

Semantic HTML

<!-- ❌ Non-semantic -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">Headline</div>
  </div>
</div>

<!-- ✅ Semantic HTML5 -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Headline</h1>
  </article>
</main>

Image aspect ratios

<!-- ❌ Distorted images -->
<img src="photo.jpg" width="300" height="100">
<!-- If actual ratio is 4:3, this squishes the image -->

<!-- ✅ Preserve aspect ratio -->
<img src="photo.jpg" width="300" height="225">
<!-- Actual 4:3 dimensions -->

<!-- ✅ CSS object-fit for flexibility -->
<img src="photo.jpg" style="width: 300px; height: 200px; object-fit: cover;">

Permissions & privacy

Request permissions properly

// ❌ Request on page load (bad UX, often denied)
navigator.geolocation.getCurrentPosition(success, error);

// ✅ Request in context, after user action
findNearbyButton.addEventListener('click', async () => {
  // Explain why you need it
  if (await showPermissionExplanation()) {
    navigator.geolocation.getCurrentPosition(success, error);
  }
});

Permissions policy

<!-- Restrict powerful features -->
<meta http-equiv="Permissions-Policy" 
      content="geolocation=(), camera=(), microphone=()">

<!-- Or allow for specific origins -->
<meta http-equiv="Permissions-Policy" 
      content="geolocation=(self 'https://maps.example.com')">

Audit checklist

Security (critical)

HTTPS enabled, no mixed content
No vulnerable dependencies (npm audit)
CSP headers configured (with frame-ancestors, base-uri, form-action)
require-trusted-types-for 'script' enforced (or report-only during rollout)
Third-party <script>/<link rel="stylesheet"> pinned with SRI hashes
Security headers present (HSTS, X-Content-Type-Options, Referrer-Policy)
No exposed source maps (and sourcesContent stripped from uploaded ones)

Compatibility

Valid HTML5 doctype
Charset declared first in head
Viewport meta tag present
No deprecated APIs used
Passive event listeners for scroll/touch

Code quality

No console errors
Valid HTML (no duplicate IDs)
Semantic HTML elements used
Proper error handling
Memory cleanup in components

UX

No intrusive interstitials
Permission requests in context
Clear error messages
Appropriate image aspect ratios

Tools

Tool	Purpose
`npm audit`	Dependency vulnerabilities
SecurityHeaders.com	Header analysis
W3C Validator	HTML validation
Live Lighthouse audit (Chrome DevTools MCP: `lighthouse_audit`)	Rendered Best Practices checks for agents
Lighthouse CLI	Best Practices audit fallback
Observatory	Security scan

References

1	---
2	name: best-practices
3	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".
4	license: MIT
5	metadata:
6	author: web-quality-skills
7	version: "2.0"
8	---
9
10	# Best practices
11
12	Modern web development standards based on Lighthouse best practices audits. Covers security, browser compatibility, and code quality patterns.
13
14	## Evidence-led audit workflow
15
16	When a rendered page is available:
17
18	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.
19	2. Inspect the listed console and network failures and fetch individual details only when they support a finding.
20	3. Supplement runtime evidence with dependency, header, configuration, and source inspection; Lighthouse is not a complete security assessment.
21	4. Fix the implicated code, re-run the same audit, and keep security findings separate from style preferences.
22
23	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.
24
25	## Security
26
27	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.
28
29	At minimum:
30
31	* Use HTTPS without mixed content. Add HSTS only after confirming every relevant subdomain supports HTTPS.
32	* Treat a strict CSP as defense in depth. Prefer nonces or hashes and test with report-only before enforcement.
33	* Sanitize untrusted HTML and protect DOM XSS sinks. Prefer text APIs when markup is not required.
34	* Pin and review third-party code. Use SRI where the delivery model supports it and keep dependencies patched.
35	* Verify response headers at runtime. Source configuration alone does not prove what the deployed page sends.
36
37	## Browser compatibility
38
39	### Doctype declaration
40
41	```html
42	<!-- ❌ Missing or invalid doctype -->
43	<HTML>
44	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
45
46	<!-- ✅ HTML5 doctype -->
47	<!DOCTYPE html>
48	<html lang="en">
49	```
50
51	### Character encoding
52
53	```html
54	<!-- ❌ Missing or late charset -->
55	<html>
56	<head>
57	<title>Page</title>
58	<meta charset="UTF-8">
59	</head>
60
61	<!-- ✅ Charset as first element in head -->
62	<html>
63	<head>
64	<meta charset="UTF-8">
65	<title>Page</title>
66	</head>
67	```
68
69	### Viewport meta tag
70
71	```html
72	<!-- ❌ Missing viewport -->
73	<head>
74	<title>Page</title>
75	</head>
76
77	<!-- ✅ Responsive viewport -->
78	<head>
79	<meta charset="UTF-8">
80	<meta name="viewport" content="width=device-width, initial-scale=1">
81	<title>Page</title>
82	</head>
83	```
84
85	### Feature detection
86
87	```javascript
88	// ❌ Browser detection (brittle)
89	if (navigator.userAgent.includes('Chrome')) {
90	// Chrome-specific code
91	}
92
93	// ✅ Feature detection
94	if ('IntersectionObserver' in window) {
95	// Use IntersectionObserver
96	} else {
97	// Fallback
98	}
99
100	// ✅ Using @supports in CSS
101	@supports (display: grid) {
102	.container {
103	display: grid;
104	}
105	}
106
107	@supports not (display: grid) {
108	.container {
109	display: flex;
110	}
111	}
112	```
113
114	### Polyfills (when needed)
115
116	Prefer 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.
117
118	If 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):
119
120	```html
121	<script>
122	if (!('fetch' in window)) {
123	const s = document.createElement('script');
124	s.src = '/polyfills/fetch.js';
125	s.defer = true;
126	document.head.appendChild(s);
127	}
128	</script>
129	```
130
131	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).
132
133	---
134
135	## Deprecated APIs
136
137	### Avoid these
138
139	```javascript
140	// ❌ document.write (blocks parsing)
141	document.write('<script src="..."></script>');
142
143	// ✅ Dynamic script loading
144	const script = document.createElement('script');
145	script.src = '...';
146	document.head.appendChild(script);
147
148	// ❌ Synchronous XHR (blocks main thread)
149	const xhr = new XMLHttpRequest();
150	xhr.open('GET', url, false); // false = synchronous
151
152	// ✅ Async fetch
153	const response = await fetch(url);
154
155	// ❌ Application Cache (deprecated)
156	<html manifest="cache.manifest">
157
158	// ✅ Service Workers
159	if ('serviceWorker' in navigator) {
160	navigator.serviceWorker.register('/sw.js');
161	}
162	```
163
164	### Event listener passive
165
166	```javascript
167	// ❌ Non-passive touch/wheel (may block scrolling)
168	element.addEventListener('touchstart', handler);
169	element.addEventListener('wheel', handler);
170
171	// ✅ Passive listeners (allows smooth scrolling)
172	element.addEventListener('touchstart', handler, { passive: true });
173	element.addEventListener('wheel', handler, { passive: true });
174
175	// ✅ If you need preventDefault, be explicit
176	element.addEventListener('touchstart', handler, { passive: false });
177	```
178
179	---
180
181	## Console & errors
182
183	### No console errors
184
185	```javascript
186	// ❌ Errors in production
187	console.log('Debug info'); // Remove in production
188	throw new Error('Unhandled'); // Catch all errors
189
190	// ✅ Proper error handling
191	try {
192	riskyOperation();
193	} catch (error) {
194	// Log to error tracking service
195	errorTracker.captureException(error);
196	// Show user-friendly message
197	showErrorMessage('Something went wrong. Please try again.');
198	}
199	```
200
201	### Error boundaries (React)
202
203	```jsx
204	class ErrorBoundary extends React.Component {
205	state = { hasError: false };
206
207	static getDerivedStateFromError(error) {
208	return { hasError: true };
209	}
210
211	componentDidCatch(error, info) {
212	errorTracker.captureException(error, { extra: info });
213	}
214
215	render() {
216	if (this.state.hasError) {
217	return <FallbackUI />;
218	}
219	return this.props.children;
220	}
221	}
222
223	// Usage
224	<ErrorBoundary>
225	<App />
226	</ErrorBoundary>
227	```
228
229	### Global error handler
230
231	```javascript
232	// Catch unhandled errors
233	window.addEventListener('error', (event) => {
234	errorTracker.captureException(event.error);
235	});
236
237	// Catch unhandled promise rejections
238	window.addEventListener('unhandledrejection', (event) => {
239	errorTracker.captureException(event.reason);
240	});
241	```
242
243	---
244
245	## Source maps
246
247	### Production configuration
248
249	```javascript
250	// ❌ Source maps exposed in production
251	// webpack.config.js
252	module.exports = {
253	devtool: 'source-map', // Exposes source code
254	};
255
256	// ✅ Hidden source maps (uploaded to error tracker)
257	module.exports = {
258	devtool: 'hidden-source-map',
259	};
260
261	// ✅ Or no source maps in production
262	module.exports = {
263	devtool: process.env.NODE_ENV === 'production' ? false : 'source-map',
264	};
265	```
266
267	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.
268
269	For Vite, prefer `sourcemap: 'hidden'` over `'true'` so the `//# sourceMappingURL=` comment isn't emitted into the bundle.
270
271	---
272
273	## Performance best practices
274
275	### Avoid blocking patterns
276
277	```javascript
278	// ❌ Blocking script
279	<script src="heavy-library.js"></script>
280
281	// ✅ Deferred script
282	<script defer src="heavy-library.js"></script>
283
284	// ❌ Blocking CSS import
285	@import url('other-styles.css');
286
287	// ✅ Link tags (parallel loading)
288	<link rel="stylesheet" href="styles.css">
289	<link rel="stylesheet" href="other-styles.css">
290	```
291
292	### Efficient event handlers
293
294	```javascript
295	// ❌ Handler on every element
296	items.forEach(item => {
297	item.addEventListener('click', handleClick);
298	});
299
300	// ✅ Event delegation
301	container.addEventListener('click', (e) => {
302	if (e.target.matches('.item')) {
303	handleClick(e);
304	}
305	});
306	```
307
308	### Memory management
309
310	```javascript
311	// ❌ Memory leak (never removed)
312	const handler = () => { /* ... */ };
313	window.addEventListener('resize', handler);
314
315	// ✅ Cleanup when done
316	const handler = () => { /* ... */ };
317	window.addEventListener('resize', handler);
318
319	// Later, when component unmounts:
320	window.removeEventListener('resize', handler);
321
322	// ✅ Using AbortController
323	const controller = new AbortController();
324	window.addEventListener('resize', handler, { signal: controller.signal });
325
326	// Cleanup:
327	controller.abort();
328	```
329
330	---
331
332	## Code quality
333
334	### Valid HTML
335
336	```html
337	<!-- ❌ Invalid HTML -->
338	<div id="header">
339	<div id="header"> <!-- Duplicate ID -->
340
341	<ul>
342	<div>Item</div> <!-- Invalid child -->
343	</ul>
344
345	<a href="/"><button>Click</button></a> <!-- Invalid nesting -->
346
347	<!-- ✅ Valid HTML -->
348	<header id="site-header">
349	</header>
350
351	<ul>
352	<li>Item</li>
353	</ul>
354
355	<a href="/" class="button">Click</a>
356	```
357
358	### Semantic HTML
359
360	```html
361	<!-- ❌ Non-semantic -->
362	<div class="header">
363	<div class="nav">
364	<div class="nav-item">Home</div>
365	</div>
366	</div>
367	<div class="main">
368	<div class="article">
369	<div class="title">Headline</div>
370	</div>
371	</div>
372
373	<!-- ✅ Semantic HTML5 -->
374	<header>
375	<nav>
376	<a href="/">Home</a>
377	</nav>
378	</header>
379	<main>
380	<article>
381	<h1>Headline</h1>
382	</article>
383	</main>
384	```
385
386	### Image aspect ratios
387
388	```html
389	<!-- ❌ Distorted images -->
390	<img src="photo.jpg" width="300" height="100">
391	<!-- If actual ratio is 4:3, this squishes the image -->
392
393	<!-- ✅ Preserve aspect ratio -->
394	<img src="photo.jpg" width="300" height="225">
395	<!-- Actual 4:3 dimensions -->
396
397	<!-- ✅ CSS object-fit for flexibility -->
398	<img src="photo.jpg" style="width: 300px; height: 200px; object-fit: cover;">
399	```
400
401	---
402
403	## Permissions & privacy
404
405	### Request permissions properly
406
407	```javascript
408	// ❌ Request on page load (bad UX, often denied)
409	navigator.geolocation.getCurrentPosition(success, error);
410
411	// ✅ Request in context, after user action
412	findNearbyButton.addEventListener('click', async () => {
413	// Explain why you need it
414	if (await showPermissionExplanation()) {
415	navigator.geolocation.getCurrentPosition(success, error);
416	}
417	});
418	```
419
420	### Permissions policy
421
422	```html
423	<!-- Restrict powerful features -->
424	<meta http-equiv="Permissions-Policy"
425	content="geolocation=(), camera=(), microphone=()">
426
427	<!-- Or allow for specific origins -->
428	<meta http-equiv="Permissions-Policy"
429	content="geolocation=(self 'https://maps.example.com')">
430	```
431
432	---
433
434	## Audit checklist
435
436	### Security (critical)
437	- [ ] HTTPS enabled, no mixed content
438	- [ ] No vulnerable dependencies (`npm audit`)
439	- [ ] CSP headers configured (with `frame-ancestors`, `base-uri`, `form-action`)
440	- [ ] `require-trusted-types-for 'script'` enforced (or report-only during rollout)
441	- [ ] Third-party `<script>`/`<link rel="stylesheet">` pinned with SRI hashes
442	- [ ] Security headers present (HSTS, X-Content-Type-Options, Referrer-Policy)
443	- [ ] No exposed source maps (and `sourcesContent` stripped from uploaded ones)
444
445	### Compatibility
446	- [ ] Valid HTML5 doctype
447	- [ ] Charset declared first in head
448	- [ ] Viewport meta tag present
449	- [ ] No deprecated APIs used
450	- [ ] Passive event listeners for scroll/touch
451
452	### Code quality
453	- [ ] No console errors
454	- [ ] Valid HTML (no duplicate IDs)
455	- [ ] Semantic HTML elements used
456	- [ ] Proper error handling
457	- [ ] Memory cleanup in components
458
459	### UX
460	- [ ] No intrusive interstitials
461	- [ ] Permission requests in context
462	- [ ] Clear error messages
463	- [ ] Appropriate image aspect ratios
464
465	## Tools
466
467	\| Tool \| Purpose \|
468	\|------\|---------\|
469	\| `npm audit` \| Dependency vulnerabilities \|
470	\| [SecurityHeaders.com](https://securityheaders.com) \| Header analysis \|
471	\| [W3C Validator](https://validator.w3.org) \| HTML validation \|
472	\| Live Lighthouse audit (Chrome DevTools MCP: `lighthouse_audit`) \| Rendered Best Practices checks for agents \|
473	\| Lighthouse CLI \| Best Practices audit fallback \|
474	\| [Observatory](https://observatory.mozilla.org) \| Security scan \|
475
476	## References
477
478	- [MDN Web Security](https://developer.mozilla.org/en-US/docs/Web/Security)
479	- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
480	- [Web Quality Audit](../web-quality-audit/SKILL.md)
481

Discussion

Alternatives

Also in SecuritySee all 533 in Development →

Ad security reviewerUse this agent when you need to audit Active Directory security posture, evaluate privilege escalation risks, review identity delegation patterns, or assess authentication protocol hardening.Coding · MIT Hallucination vulnerability prompt checkerIdentify structural openings in a prompt that may lead to hallucinated, fabricated, or over-assumed outputs.Coding · CC0-1.0 Repository Security & Architecture Audit FrameworkResearch-backed repository audit workflow covering OWASP Top 10, SOLID principles, DORA metrics, and Google SRE production readiness criteria as knowledge anchors. Generated by prompt-forge.Infrastructure & ops · CC0-1.0 Security guard image promptGenerate an image of a Latino private security guard wearing tactical helmet and communication radio on a bulletproof vest with the word 'FENASPE'.Creator · CC0-1.0

Browse more free Claude skills or everything in Development.

Best practices

How to use it

Source of Best practices

Best practices

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

Production configuration

Performance best practices

Avoid blocking patterns

Efficient event handlers

Memory management

Code quality

Valid HTML

Semantic HTML

Image aspect ratios

Permissions & privacy

Request permissions properly

Permissions policy

Audit checklist

Security (critical)

Compatibility

Code quality

UX

Tools

References

Discussion

Alternatives