Skills Overview
Web Quality Skills is a collection of specialized skills for improving web application quality based on Google Lighthouse guidelines. Each skill focuses on a specific aspect of web quality, providing targeted analysis and actionable recommendations.Available Skills
Web Quality Audit
Comprehensive quality review covering all aspects of web performance, accessibility, SEO, and best practices
Performance
Deep performance optimization for faster loading and better user experience
Core Web Vitals
Targeted optimization for LCP, INP, and CLS metrics that affect search ranking
Accessibility
WCAG 2.1 compliance and inclusive design patterns
SEO
Search engine optimization including technical SEO and structured data
Best Practices
Security, browser compatibility, and modern web standards
Skill Comparison
| Skill | Focus Area | When to Use | Typical Issues Found |
|---|---|---|---|
| Web Quality Audit | Comprehensive review | Full site audit, before launch | 150+ checks across all categories |
| Performance | Loading speed & runtime | ”Site is slow”, optimization | Resource loading, JavaScript optimization |
| Core Web Vitals | LCP, INP, CLS | Search ranking, page experience | Layout shifts, slow interactions |
| Accessibility | WCAG compliance | Inclusive design, legal compliance | Color contrast, keyboard access |
| SEO | Search visibility | Improve rankings, discoverability | Meta tags, structured data |
| Best Practices | Security & standards | Code quality, modernization | Vulnerabilities, deprecated APIs |
When to Use Each Skill
Web Quality Audit
Use when you need a comprehensive overview of all quality issues. This is the orchestrator skill that coordinates the other specialized skills. Trigger phrases:- “Audit my site”
- “Review web quality”
- “Run lighthouse audit”
- “Check page quality”
- “Optimize my website”
Performance
Use for deep performance optimization when you need to improve loading speed and runtime efficiency. Trigger phrases:- “Speed up my site”
- “Optimize performance”
- “Reduce load time”
- “Fix slow loading”
- “Performance audit”
Core Web Vitals
Use when specifically targeting Google’s Core Web Vitals metrics for search ranking. Trigger phrases:- “Improve Core Web Vitals”
- “Fix LCP”
- “Reduce CLS”
- “Optimize INP”
- “Fix layout shifts”
Accessibility
Use for WCAG compliance and ensuring your site is usable by everyone, including people with disabilities. Trigger phrases:- “Improve accessibility”
- “A11y audit”
- “WCAG compliance”
- “Screen reader support”
- “Keyboard navigation”
SEO
Use for improving search engine visibility and rankings. Trigger phrases:- “Improve SEO”
- “Optimize for search”
- “Fix meta tags”
- “Add structured data”
- “Sitemap optimization”
Best Practices
Use for security audits, code modernization, and ensuring compliance with web standards. Trigger phrases:- “Apply best practices”
- “Security audit”
- “Modernize code”
- “Code quality review”
- “Check for vulnerabilities”
How Skills Work Together
The Web Quality Audit skill acts as an orchestrator that coordinates all other skills:Skill Relationships
- Web Quality Audit → Runs comprehensive checks using guidelines from all other skills
- Core Web Vitals → Builds on Performance skill for specific metrics
- SEO → References Core Web Vitals since they affect search ranking
- All skills → Reference back to Web Quality Audit for comprehensive reviews
Severity Levels
All skills use consistent severity classifications:| Level | Description | Action | Examples |
|---|---|---|---|
| Critical | Security vulnerabilities, complete failures | Fix immediately | Mixed content, vulnerable libraries |
| High | Core Web Vitals failures, major barriers | Fix before launch | Poor LCP, missing alt text |
| Medium | Performance opportunities, SEO improvements | Fix within sprint | Unoptimized images, missing meta |
| Low | Minor optimizations, code quality | Fix when convenient | Code style, minor redundancies |
Quick Start Checklists
Before Every Deploy
- Core Web Vitals passing (LCP < 2.5s, INP < 200ms, CLS < 0.1)
- No accessibility errors (run axe or Lighthouse)
- No console errors
- HTTPS working correctly
- Meta tags present (title, description)
Weekly Review
- Check Search Console for issues
- Review Core Web Vitals trends
- Update dependencies (
npm audit) - Test with screen reader
Monthly Deep Dive
- Full Lighthouse audit
- Performance profiling
- Accessibility audit with real users
- SEO keyword review
Measurement Tools
| Tool | Purpose | Best For |
|---|---|---|
| Chrome DevTools | Live debugging | Development, profiling |
| Lighthouse | Comprehensive audits | All-in-one testing |
| PageSpeed Insights | Real user data + lab | Core Web Vitals |
| Search Console | Search performance | SEO, indexing |
| axe DevTools | Accessibility testing | WCAG compliance |
| WebPageTest | Detailed performance | Network analysis |
Next Steps
Run a Complete Audit
Start with a comprehensive quality review
Optimize Core Web Vitals
Focus on metrics that affect search ranking
Improve Performance
Make your site faster
Fix Accessibility
Ensure your site works for everyone