Runs Google Lighthouse audits using Playwright for SEO, Performance, Accessibility, and Best Practices scoring. Supports both URLs and local HTML files. Use when user mentions "Lighthouse", "page speed", "performance audit", "Core Web Vitals", "CWV", or needs comprehensive web performance analysis.
/plugin marketplace add naporin0624/claude-web-audit-plugins/plugin install web-audit-tools@web-audit-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
dist/index.d.tsdist/index.jsdist/index.js.mappackage.jsonscripts/run-lighthouse.jsscripts/run-lighthouse.shsrc/cli.tssrc/index.tssrc/reporter.tssrc/runner.tssrc/server.tssrc/types.tstsconfig.jsonRuns Google Lighthouse audits via Playwright for comprehensive web quality assessment including SEO, Performance, Accessibility, and Best Practices.
cd ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner
npm install
npm run build
# Analyze a URL
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/src/index.ts https://example.com
# Analyze a local HTML file (auto-starts local server)
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/src/index.ts path/to/file.html
# Analyze a development server
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/src/index.ts http://localhost:3000
# Output JSON format
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/src/index.ts https://example.com --json
# Specify categories
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/src/index.ts https://example.com --categories=seo,accessibility
# After npm run build
node ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/dist/index.js https://example.com
| Category | Description | Key Metrics |
|---|---|---|
| Performance | Page load speed | LCP, FID, CLS, TTFB, Speed Index |
| SEO | Search engine optimization | Meta tags, crawlability, mobile |
| Accessibility | WCAG compliance | Color contrast, ARIA, keyboard |
| Best Practices | Web standards | HTTPS, console errors, image aspect |
| Score | Rating | Action |
|---|---|---|
| 90-100 | Good (Green) | Maintain |
| 50-89 | Needs Improvement (Orange) | Optimize |
| 0-49 | Poor (Red) | Priority fix |
# Lighthouse Report: https://example.com
## Scores
- Performance: 85/100 [########--]
- SEO: 95/100 [#########-]
- Accessibility: 78/100 [#######---]
- Best Practices: 92/100 [#########-]
## Core Web Vitals
- LCP: 2.1s [GOOD]
- FID: 45ms [GOOD]
- CLS: 0.050 [GOOD]
## Additional Metrics
- TTFB: 320ms
- Speed Index: 3.2s
- FCP: 1.8s
- TBT: 120ms
## Performance Issues
1. **Eliminate render-blocking resources** (45%)
3 resources blocking first paint
2. **Serve images in next-gen formats** (60%)
Use WebP or AVIF
{
"url": "https://example.com",
"timestamp": "2024-01-15T10:00:00Z",
"lighthouseVersion": "12.0.0",
"scores": {
"performance": 85,
"seo": 95,
"accessibility": 78,
"best-practices": 92
},
"metrics": {
"lcp": 2100,
"fid": 45,
"cls": 0.05,
"ttfb": 320,
"speedIndex": 3200,
"fcp": 1800,
"tbt": 120
},
"audits": {
"performance": [...],
"seo": [...],
"accessibility": [...],
"best-practices": [...]
}
}
When analyzing local HTML files, the runner:
serveNote: Local file analysis may not accurately reflect production performance due to:
For JavaScript frameworks, analyze the running development or production server:
# Start your dev server first
npm run dev # Starts at http://localhost:3000
# Then run Lighthouse against it
npx tsx src/index.ts http://localhost:3000
# For production build analysis
npm run build && npm run start
npx tsx src/index.ts http://localhost:3000
For comprehensive SEO analysis:
# Run static analysis first (fast)
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/seo-analyzer/src/index.ts file.html
# Then run Lighthouse (slower but comprehensive)
npx tsx ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner/src/index.ts http://localhost:3000
postinstall)If Playwright can't find Chromium:
cd ${CLAUDE_PLUGIN_ROOT}/skills/lighthouse-runner
npx playwright install chromium
For slow pages, increase the timeout:
npx tsx src/index.ts https://slow-site.com --timeout=120
On WSL or headless Linux, you may need additional dependencies:
# Install required libraries for Playwright
npx playwright install-deps chromium
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.