seo

While interface guidelines tell you what to build, Web Quality Skills tell you how to build it performantly, accessibly, and optimally for search engines. These skills encode the collective wisdom from:

• 150+ Lighthouse audits across Performance, Accessibility, SEO, and Best Practices
• Core Web Vitals optimization patterns (LCP, INP, CLS)
• Real-world performance engineering experience
• WCAG 2.1 accessibility standards
• Modern SEO requirements

| Skill | Description | Use when |

|-------|-------------|----------|

| [web-quality-audit](#web-quality-audit) | Comprehensive quality review across all categories | "Audit my site", "Review this for quality", "Check web quality" |

| [performance](#performance) | Loading speed, runtime efficiency, resource optimization | "Optimize performance", "Speed up my site", "Fix slow loading" |

| [core-web-vitals](#core-web-vitals) | LCP, INP, CLS specific optimizations | "Improve Core Web Vitals", "Fix LCP", "Reduce CLS" |

| [accessibility](#accessibility) | WCAG compliance, screen reader support, keyboard navigation | "Improve accessibility", "WCAG audit", "a11y review" |

| [seo](#seo) | Search engine optimization, crawlability, structured data | "Optimize for SEO", "Improve search ranking", "Fix meta tags" |

| [best-practices](#best-practices) | Security, modern APIs, code quality patterns | "Apply best practices", "Security audit", "Code quality review" |

Installation

add-skill is a powerful CLI tool that lets you install agent skills onto your coding agents from git repositories. Whether you're using OpenCode, Claude Code, Codex, or Cursor, the add-skill tool makes it simple to extend your agent's capabilities with specialized instruction sets. Use add-skill to automate release notes, create pull requests, integrate with external tools, and more. Simply run npx add-skill to get started.

```bash

npx add-skill addyosmani/web-quality-skills

```

Or manually:

```bash

cp -r skills/* ~/.claude/skills/

```

#### claude.ai

Add skills to your project knowledge or paste the SKILL.md contents into your conversation.

Usage

Skills activate automatically when your request matches their description. Examples:

```

Audit this page for web quality issues

```

```

Optimize performance and fix Core Web Vitals

```

```

Review accessibility and suggest improvements

```

```

Make this SEO-ready

```

web-quality-audit

The comprehensive skill that orchestrates all other skills. Use this for full-site audits or when you're unsure which specific area needs attention.

Trigger phrases: "audit my site", "quality review", "lighthouse audit", "check web quality"

What it checks:

• All Core Web Vitals metrics
• 50+ performance patterns
• 40+ accessibility rules
• 30+ SEO requirements
• 20+ security/best practice patterns

performance

Deep-dive into loading and runtime performance optimization.

Trigger phrases: "speed up", "optimize performance", "reduce load time", "fix slow"

Key optimizations:

• Critical rendering path
• JavaScript bundling and code splitting
• Image optimization (formats, sizing, lazy loading)
• Font loading strategies
• Caching and preloading
• Server response optimization

core-web-vitals

Specialized skill for the three Core Web Vitals that affect Google Search ranking.

Trigger phrases: "Core Web Vitals", "LCP", "INP", "CLS", "page experience"

Metrics covered:

• LCP (Largest Contentful Paint) < 2.5s
• INP (Interaction to N