addyosmani/web-quality-skills▌

Diagnose and fix the three Core Web Vitals metrics that impact search ranking and user experience. \n \n Covers LCP (Largest Contentful Paint), INP (Interaction to Next Paint), and CLS (Cumulative Layout Shift) with specific thresholds and optimization strategies for each \n Includes common causes, code examples, and debugging scripts for identifying bottlenecks in loading, interactivity, and visual stability \n Provides framework-specific quick fixes for Next.js, React, and Vue/Nuxt, plus measu

Audit and improve web accessibility following WCAG 2.2 guidelines and best practices. \n \n Covers all four WCAG principles (Perceivable, Operable, Understandable, Robust) with conformance levels A, AA, and AAA \n Includes code examples for text alternatives, color contrast, keyboard navigation, focus management, form labels, error handling, and ARIA usage \n Provides testing checklist with automated tools (Lighthouse, axe-core) and manual testing procedures for keyboard, screen reader, zoom, an

Comprehensive quality review covering performance, accessibility, SEO, and best practices across 150+ checks. \n \n Analyzes code and projects across four audit categories: Performance (Core Web Vitals, resource optimization, loading strategy), Accessibility (perceivable, operable, understandable, robust), SEO (crawlability, on-page, technical), and Best Practices (security, standards, UX patterns) \n Categorizes findings by severity (Critical, High, Medium, Low) with specific, actionable recomm

Technical SEO optimization covering crawlability, on-page elements, structured data, and mobile best practices. \n \n Addresses crawlability through robots.txt, meta robots tags, canonical URLs, and XML sitemaps with submission guidance \n Covers on-page optimization including title tags, meta descriptions, heading hierarchy, image SEO, and internal linking strategies \n Provides JSON-LD structured data templates for Organization, Article, Product, FAQ, and Breadcrumb schemas with validation too

Modern web development standards covering security, compatibility, and code quality patterns. \n \n Enforces HTTPS, Content Security Policy, and security headers to prevent XSS, clickjacking, and mixed-content vulnerabilities \n Addresses browser compatibility through proper doctype, charset, viewport configuration, and feature detection instead of user-agent sniffing \n Covers deprecated APIs (document.write, synchronous XHR, Application Cache) with modern replacements (dynamic script loading,

Lighthouse-based performance optimization with budgets, critical rendering path guidance, and Core Web Vitals alignment. \n \n Defines resource budgets (1.5 MB total, <300 KB JS, <100 KB CSS) and provides server response optimization (TTFB <800ms, HTTP/2, edge caching) \n Covers resource loading strategies: preconnect/preload directives, deferred CSS, script deferral patterns, and code splitting techniques \n Includes image optimization (AVIF/WebP selection, responsive markup, LCP