audit-website

Name: audit-website
Author: PramodDutta

182stars17forks

How to install audit-website?

pramoddutta/qaskills/audit-website

$npx -y skills add PramodDutta/qaskills --skill audit-website

Installs into the current project.

Summary

Comprehensive website auditing skill using Lighthouse, PageSpeed Insights, and web performance APIs to audit performance, accessibility, SEO, best practices, and security.

Files · 1

View on GitHub

SKILL.md

1	# Website Audit Skill
2
3	You are an expert web performance and quality engineer specializing in comprehensive website audits. When the user asks you to audit, analyze, or optimize websites, follow these detailed instructions.
4
5	## Core Principles
6
7	1. Measure first, optimize second -- Collect baseline metrics before making changes.
8	2. Focus on Core Web Vitals -- LCP, FID/INP, and CLS are critical user experience metrics.
9	3. Automate audits in CI/CD -- Prevent performance and quality regressions before deployment.
10	4. Test on real devices -- Lab tests are useful, but field data is the truth.
11	5. Holistic approach -- Performance, accessibility, SEO, and security are interconnected.
12
13	## Project Structure
14
15	```
16	audits/
17	scripts/
18	lighthouse-audit.ts
19	performance-budget.ts
20	accessibility-audit.ts
21	seo-audit.ts
22	security-audit.ts
23	config/
24	lighthouse.config.ts
25	budgets.json
26	reports/
27	html/
28	json/
29	csv/
30	utils/
31	metrics-collector.ts
32	report-generator.ts
33	threshold-checker.ts
34	tests/
35	audit.spec.ts
36	playwright.config.ts
37	package.json
38	```
39
40	## Installation
41
42	```bash
43	npm install --save-dev lighthouse lighthouse-ci playwright @playwright/test
44	npm install --save-dev web-vitals puppeteer chrome-launcher
45	```
46
47	## Lighthouse Audit with Playwright
48
49	### Basic Lighthouse Audit
50
51	```typescript
52	import { test } from '@playwright/test';
53	import { playAudit } from 'playwright-lighthouse';
54	import lighthouse from 'lighthouse';
55	import * as chromeLauncher from 'chrome-launcher';
56
57	test.describe('Lighthouse Audits', () => {
58	test('should pass Lighthouse audit for homepage', async ({ page }) => {
59	await page.goto('https://example.com');
60
61	await playAudit({
62	page,
63	thresholds: {
64	performance: 90,
65	accessibility: 100,
66	'best-practices': 90,
67	seo: 90,
68	pwa: 50,
69	},
70	port: 9222,
71	});
72	});
73
74	test('should audit with custom Lighthouse config', async () => {
75	const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
76	const options = {
77	logLevel: 'info' as const,
78	output: 'json' as const,
79	onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
80	port: chrome.port,
81	};
82
83	const runnerResult = await lighthouse('https://example.com', options);
84	await chrome.kill();
85
86	const { categories } = runnerResult.lhr;
87
88	expect(categories.performance.score).toBeGreaterThan(0.9);
89	expect(categories.accessibility.score).toBe(1);
90	expect(categories['best-practices'].score).toBeGreaterThan(0.9);
91	expect(categories.seo.score).toBeGreaterThan(0.9);
92	});
93	});
94	```
95
96	### Lighthouse Configuration
97
98	```typescript
99	// config/lighthouse.config.ts
100	import { Config } from 'lighthouse';
101
102	export const lighthouseConfig: Config = {
103	extends: 'lighthouse:default',
104	settings: {
105	onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
106	formFactor: 'mobile',
107	throttling: {
108	rttMs: 150,
109	throughputKbps: 1638.4,
110	cpuSlowdownMultiplier: 4,
111	},
112	screenEmulation: {
113	mobile: true,
114	width: 375,
115	height: 667,
116	deviceScaleFactor: 2,
117	disabled: false,
118	},
119	},
120	};
121
122	export const desktopConfig: Config = {
123	extends: 'lighthouse:default',
124	settings: {
125	onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
126	formFactor: 'desktop',
127	throttling: {
128	rttMs: 40,
129	throughputKbps: 10240,
130	cpuSlowdownMultiplier: 1,
131	},
132	screenEmulation: {
133	mobile: false,
134	width: 1920,
135	height: 1080,
136	deviceScaleFactor: 1,
137	disabled: false,
138	},
139	},
140	};
141	```
142
143	## Performance Auditing
144
145	### Core Web Vitals
146
147	```typescript
148	import { test, expect } from '@playwright/test';
149
150	test.describe('Core Web Vitals', () => {
151	test('should measure and validate Core Web Vitals', async ({ page }) => {
152	await page.goto('https://example.com');
153
154	// Measure LCP (Largest Contentful Paint)
155	const lcp = await page.evaluate(() => {
156	return new Promise((resolve) => {
157	new PerformanceObserver((list) => {
158	const entries = list.getEntries();
159	const lastEntry = entries[entries.length - 1];
160	resolve(lastEntry.renderTime \|\| lastEntry.loadTime);
161	}).observe({ entryTypes: ['largest-contentful-paint'] });
162
163	setTimeout(() => resolve(0), 10000);
164	});
165	});
166
167	// Mea

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

audit-website

182stars17forks

View on GitHub

How to install audit-website?

pramoddutta/qaskills/audit-website

$npx -y skills add PramodDutta/qaskills --skill audit-website

Installs into the current project.

Summary

Comprehensive website auditing skill using Lighthouse, PageSpeed Insights, and web performance APIs to audit performance, accessibility, SEO, best practices, and security.

Files · 1

View on GitHub

SKILL.md

1	# Website Audit Skill
2
3	You are an expert web performance and quality engineer specializing in comprehensive website audits. When the user asks you to audit, analyze, or optimize websites, follow these detailed instructions.
4
5	## Core Principles
6
7	1. Measure first, optimize second -- Collect baseline metrics before making changes.
8	2. Focus on Core Web Vitals -- LCP, FID/INP, and CLS are critical user experience metrics.
9	3. Automate audits in CI/CD -- Prevent performance and quality regressions before deployment.
10	4. Test on real devices -- Lab tests are useful, but field data is the truth.
11	5. Holistic approach -- Performance, accessibility, SEO, and security are interconnected.
12
13	## Project Structure
14
15	```
16	audits/
17	scripts/
18	lighthouse-audit.ts
19	performance-budget.ts
20	accessibility-audit.ts
21	seo-audit.ts
22	security-audit.ts
23	config/
24	lighthouse.config.ts
25	budgets.json
26	reports/
27	html/
28	json/
29	csv/
30	utils/
31	metrics-collector.ts
32	report-generator.ts
33	threshold-checker.ts
34	tests/
35	audit.spec.ts
36	playwright.config.ts
37	package.json
38	```
39
40	## Installation
41
42	```bash
43	npm install --save-dev lighthouse lighthouse-ci playwright @playwright/test
44	npm install --save-dev web-vitals puppeteer chrome-launcher
45	```
46
47	## Lighthouse Audit with Playwright
48
49	### Basic Lighthouse Audit
50
51	```typescript
52	import { test } from '@playwright/test';
53	import { playAudit } from 'playwright-lighthouse';
54	import lighthouse from 'lighthouse';
55	import * as chromeLauncher from 'chrome-launcher';
56
57	test.describe('Lighthouse Audits', () => {
58	test('should pass Lighthouse audit for homepage', async ({ page }) => {
59	await page.goto('https://example.com');
60
61	await playAudit({
62	page,
63	thresholds: {
64	performance: 90,
65	accessibility: 100,
66	'best-practices': 90,
67	seo: 90,
68	pwa: 50,
69	},
70	port: 9222,
71	});
72	});
73
74	test('should audit with custom Lighthouse config', async () => {
75	const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
76	const options = {
77	logLevel: 'info' as const,
78	output: 'json' as const,
79	onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
80	port: chrome.port,
81	};
82
83	const runnerResult = await lighthouse('https://example.com', options);
84	await chrome.kill();
85
86	const { categories } = runnerResult.lhr;
87
88	expect(categories.performance.score).toBeGreaterThan(0.9);
89	expect(categories.accessibility.score).toBe(1);
90	expect(categories['best-practices'].score).toBeGreaterThan(0.9);
91	expect(categories.seo.score).toBeGreaterThan(0.9);
92	});
93	});
94	```
95
96	### Lighthouse Configuration
97
98	```typescript
99	// config/lighthouse.config.ts
100	import { Config } from 'lighthouse';
101
102	export const lighthouseConfig: Config = {
103	extends: 'lighthouse:default',
104	settings: {
105	onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
106	formFactor: 'mobile',
107	throttling: {
108	rttMs: 150,
109	throughputKbps: 1638.4,
110	cpuSlowdownMultiplier: 4,
111	},
112	screenEmulation: {
113	mobile: true,
114	width: 375,
115	height: 667,
116	deviceScaleFactor: 2,
117	disabled: false,
118	},
119	},
120	};
121
122	export const desktopConfig: Config = {
123	extends: 'lighthouse:default',
124	settings: {
125	onlyCategories: ['performance', 'accessibility', 'best-practices', 'seo'],
126	formFactor: 'desktop',
127	throttling: {
128	rttMs: 40,
129	throughputKbps: 10240,
130	cpuSlowdownMultiplier: 1,
131	},
132	screenEmulation: {
133	mobile: false,
134	width: 1920,
135	height: 1080,
136	deviceScaleFactor: 1,
137	disabled: false,
138	},
139	},
140	};
141	```
142
143	## Performance Auditing
144
145	### Core Web Vitals
146
147	```typescript
148	import { test, expect } from '@playwright/test';
149
150	test.describe('Core Web Vitals', () => {
151	test('should measure and validate Core Web Vitals', async ({ page }) => {
152	await page.goto('https://example.com');
153
154	// Measure LCP (Largest Contentful Paint)
155	const lcp = await page.evaluate(() => {
156	return new Promise((resolve) => {
157	new PerformanceObserver((list) => {
158	const entries = list.getEntries();
159	const lastEntry = entries[entries.length - 1];
160	resolve(lastEntry.renderTime \|\| lastEntry.loadTime);
161	}).observe({ entryTypes: ['largest-contentful-paint'] });
162
163	setTimeout(() => resolve(0), 10000);
164	});
165	});
166
167	// Mea

People who liked this also viewed

6 picks

Type