web-quality-audit
A comprehensive web audit skill that evaluates performance, SEO, and accessibility based on Lighthouse metrics.
Install
mkdir -p .claude/skills/web-quality-audit && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1462" && unzip -o skill.zip -d .claude/skills/web-quality-audit && rm skill.zipInstalls to .claude/skills/web-quality-audit
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".Key capabilities
- →Performs 150+ quality checks across performance, accessibility, SEO, and best practices
- →Categorizes findings by severity levels from Critical to Low
- →Provides actionable code examples for identified issues
- →Evaluates Core Web Vitals including LCP, INP, and CLS
- →Validates technical SEO elements like canonical URLs and heading hierarchy
How it works
The tool analyzes the provided code or site against Google Lighthouse standards and categorizes results by severity. It then generates a structured report containing specific recommendations and code fixes.
Inputs & outputs
When to use web-quality-audit
- →Identify LCP and CLS issues
- →Optimize image assets
- →Improve accessibility compliance
- →Reduce JavaScript execution time
About this skill
Web quality audit
Comprehensive quality review based on Google Lighthouse audits. Covers Performance, Accessibility, SEO, and Best Practices across 150+ checks.
How it works
- Analyze the provided code/project for quality issues
- Categorize findings by severity (Critical, High, Medium, Low)
- Provide specific, actionable recommendations
- Include code examples for fixes
Audit categories
Performance (40% of typical issues)
Core Web Vitals — Must pass for good page experience:
- LCP (Largest Contentful Paint) < 2.5s. The largest visible element must render quickly. Optimize images, fonts, and server response time.
- INP (Interaction to Next Paint) < 200ms. User interactions must feel instant. Reduce JavaScript execution time and break up long tasks.
- CLS (Cumulative Layout Shift) < 0.1. Content must not jump around. Set explicit dimensions on images, embeds, and ads.
Resource Optimization:
- Compress images. Use WebP/AVIF with fallbacks. Serve correctly sized images via
srcset. - Minimize JavaScript. Remove unused code. Use code splitting. Defer non-critical scripts.
- Optimize CSS. Extract critical CSS. Remove unused styles. Avoid
@import. - Efficient fonts. Use
font-display: swap. Preload critical fonts. Subset to needed characters.
Loading Strategy:
- Preconnect to origins. Add
<link rel="preconnect">for third-party domains. - Preload critical assets. LCP images, fonts, and above-fold CSS.
- Lazy load below-fold content. Images, iframes, and heavy components.
- Cache effectively. Long cache TTLs for static assets. Immutable caching for hashed files.
Accessibility (30% of typical issues)
Perceivable:
- Text alternatives. Every
<img>has meaningfulalttext. Decorative images usealt="". - Color contrast. Minimum 4.5:1 for normal text, 3:1 for large text (WCAG AA).
- Don't rely on color alone. Use icons, patterns, or text alongside color indicators.
- Captions and transcripts. Video has captions. Audio has transcripts.
Operable:
- Keyboard accessible. All functionality available via keyboard. No keyboard traps.
- Focus visible. Clear focus indicators on all interactive elements.
- Skip links. Provide "Skip to main content" for keyboard users.
- Sufficient time. Users can extend time limits. No auto-advancing content without controls.
Understandable:
- Page language. Set
langattribute on<html>. - Consistent navigation. Same navigation structure across pages.
- Error identification. Form errors clearly described and associated with fields.
- Labels and instructions. All form inputs have associated labels.
Robust:
- Valid HTML. No duplicate IDs. Properly nested elements.
- ARIA used correctly. Prefer native elements. ARIA roles match behavior.
- Name, role, value. Interactive elements have accessible names and correct roles.
SEO (15% of typical issues)
Crawlability:
- Valid robots.txt. Doesn't block important resources.
- XML sitemap. Lists all important pages. Submitted to Search Console.
- Canonical URLs. Prevent duplicate content issues.
- No noindex on important pages. Check meta robots and headers.
On-Page SEO:
- Unique title tags. 50-60 characters. Primary keyword included.
- Meta descriptions. 150-160 characters. Compelling and unique.
- Heading hierarchy. Single
<h1>. Logical heading structure. - Descriptive link text. Not "click here" or "read more".
Technical SEO:
- Mobile-friendly. Responsive design. Tap targets ≥ 48px.
- HTTPS. Secure connection required.
- Fast loading. Performance directly impacts ranking.
- Structured data. JSON-LD for rich snippets (Article, Product, FAQ, etc.).
Best practices (15% of typical issues)
Security:
- HTTPS everywhere. No mixed content. HSTS enabled.
- No vulnerable libraries. Keep dependencies updated.
- CSP headers. Content Security Policy to prevent XSS.
- No exposed source maps. In production builds.
Modern Standards:
- No deprecated APIs. Replace
document.write, synchronous XHR, etc. - Valid doctype. Use
<!DOCTYPE html>. - Charset declared.
<meta charset="UTF-8">as first element in<head>. - No browser errors. Clean console. No CORS issues.
UX Patterns:
- No intrusive interstitials. Especially on mobile.
- Clear permission requests. Only ask when needed, with context.
- No misleading buttons. Buttons do what they say.
Severity levels
| Level | Description | Action |
|---|---|---|
| Critical | Security vulnerabilities, complete failures | Fix immediately |
| High | Core Web Vitals failures, major a11y barriers | Fix before launch |
| Medium | Performance opportunities, SEO improvements | Fix within sprint |
| Low | Minor optimizations, code quality | Fix when convenient |
Audit output format
When performing an audit, structure findings as:
## Audit results
### Critical issues (X found)
- **[Category]** Issue description. File: `path/to/file.js:123`
- **Impact:** Why this matters
- **Fix:** Specific code change or recommendation
### High priority (X found)
...
### Summary
- Performance: X issues (Y critical)
- Accessibility: X issues (Y critical)
- SEO: X issues
- Best Practices: X issues
### Recommended priority
1. First fix this because...
2. Then address...
3. Finally optimize...
Quick checklist
Before every deploy
- Core Web Vitals passing
- No accessibility errors (axe/Lighthouse)
- No console errors
- HTTPS working
- Meta tags present
Weekly review
- Check Search Console for issues
- Review Core Web Vitals trends
- Update dependencies
- Test with screen reader
Monthly deep dive
- Full Lighthouse audit
- Performance profiling
- Accessibility audit with real users
- SEO keyword review
References
For detailed guidelines on specific areas:
When not to use it
- →When the target site is not accessible via a public URL
- →When performing deep security penetration testing
Limitations
- →Requires manual verification for some accessibility checks
- →Performance metrics can vary based on network conditions
How it compares
Unlike manual checklists, this tool automates the detection of 150+ technical issues and provides direct code-level remediation examples.
Compared to similar skills
web-quality-audit side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| web-quality-audit (this skill) | 7 | 6mo | Review | Beginner |
| roier-seo | 4 | 6mo | Review | Intermediate |
| web-testing | 1 | 6mo | Review | Intermediate |
| webapp-testing | 0 | 2mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by davila7
View all by davila7 →You might also like
roier-seo
davila7
Technical SEO auditor and fixer. Runs Lighthouse/PageSpeed audits on websites or local dev servers, analyzes SEO/performance/accessibility scores, and automatically implements fixes for meta tags, structured data, Core Web Vitals, and accessibility issues.
web-testing
mrgoonie
Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.
webapp-testing
HaoNgo232
Web application testing principles. E2E, Playwright, deep audit strategies.
qa-only
ShaheerKhawaja
Report-only QA testing — produces structured report with health score, screenshots, and repro steps. No fixes applied.
full-review
Trophalaxeur
Analyse complète du repository Bismuth (Astro 6 / React / Tailwind v4). Détecte le code mort, fichiers inutilisés, mauvaises pratiques, problèmes qualité, SEO et accessibilité. Produit un fichier Markdown avec liens VSCode cliquables.
i-audit
yoshuawuyts
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.