Web Quality Skills — Plugin by addyosmani

Overview

Web Quality Skills gives coding agents a workflow for reviewing websites and making targeted fixes. It covers loading and responsiveness, accessibility, technical SEO and browser best practices across web frameworks. Live findings guide code inspection; findings from source inspection alone are treated as hypotheses.

Skills activate when your request matches their descriptions. In Claude Code, you can also invoke a specific skill, such as /web-quality-skills:performance. Chrome DevTools MCP supplies optional browser measurements and is installed separately; the skills can fall back to other audit tools, manual checks or source inspection.

Install

Use Cases

Review a redesign before release

Ask for a web quality audit of representative pages and key journeys. The audit workflow prioritizes findings by user impact and confidence, then calls for repeat checks after fixes.

Trace a slow or unstable page

Investigate slow loading, delayed interactions or unexpected layout shifts. The performance skills use real-user data where available to prioritize problems, then browser traces to locate causes and compare fixes under matching conditions.

Make forms and menus accessible

Trace missing labels, hidden focus or keyboard traps to the affected components, then recheck the flow with keyboard and screen-reader tests. Automated audit scores alone do not establish WCAG conformance.

Investigate pages missing from search

Review crawl and index controls, redirects, canonical URLs, metadata and structured data to find technical obstacles. Indexing and ranking outcomes still require search-engine validation.

Check a deployment for browser failures

Use console and network findings to focus checks of HTTPS, headers, dependencies and deprecated APIs. The best-practices workflow combines browser evidence with source review; Lighthouse alone is not a full security assessment.

Components

Skills

This plugin's skills 6

web-quality-audit

Prioritize findings across performance, accessibility, SEO, browser standards and agentic browsing.

core-web-vitals

Diagnose slow loading, delayed interactions and layout shifts using field and lab evidence.

performance

Find loading and runtime bottlenecks in scripts, images, fonts and resource delivery.

accessibility

Find accessibility barriers in keyboard navigation, forms, contrast and screen-reader support.

best-practices

Review security headers, dependencies, deprecated APIs and browser errors.

seo

Check crawlability, indexing controls, metadata, canonical URLs and structured data.

Install

In Claude Code or Codex CLI, add the marketplace and install Web Quality Skills as a whole. Skills CLI is a skills-only alternative: it does not register the plugin or install hooks, commands or MCP servers.

Claude Code

01
Inside your Claude Code session, add the plugin marketplace.
/plugin marketplace add addyosmani/web-quality-skills
02
In the same session, install Web Quality Skills. Choose the installation scope in the plugin panel and follow its activation instructions.
/plugin install web-quality-skills@addy-web-quality-skills
03
Check availability by invoking /web-quality-skills:performance with a brief request to review a page's performance. Installed skills use the web-quality-skills namespace.

This installs skill files for Claude Code without registering the plugin. Skills CLI installs to the current project by default.

04
From a terminal in your project folder, use Skills CLI to install the skills you want to use in Claude Code.
npx skills add addyosmani/web-quality-skills
05
Open Claude Code in that project. Type / and look for an installed skill by name, such as performance if you selected it. If the new skills do not appear, restart Claude Code.

This installs skill files for Cursor without registering a plugin. Skills CLI installs to the current project by default.

04
From a terminal in your project folder, use Skills CLI to install the skills you want to use in Cursor.
npx skills add addyosmani/web-quality-skills
05
Start Cursor with that project open. In Agent chat, type / and search for an installed skill by name.

Use Codex CLI v0.122 or later. This route installs the whole plugin; plugins are unavailable in the Codex IDE extension.

04
Add the marketplace from GitHub or a local clone.
Marketplace source
Run this in your terminal.
codex plugin marketplace add addyosmani/web-quality-skills
Use a local clone of the repository. If symlinks do not work on your machine, replace the clone's codex/skills symlink with a real copy of its skills folder. Keep this change local.
In your terminal, replace /path/to/your/clone with the full path to that clone.
codex plugin marketplace add /path/to/your/clone
05
In Codex CLI's plugin browser, install Web Quality Skills from the web-quality-skills marketplace.
06
Start a new Codex session. Type $ in the chat input and confirm that the bundled skills, such as performance and accessibility, are available.

This installs standalone skills without registering the plugin. Standalone skills work in Codex CLI, the ChatGPT desktop app and the Codex IDE extension. Skills CLI installs to the current project by default.

04
From a terminal in your project folder, use Skills CLI to install the skills you want to use in Codex.
npx skills add addyosmani/web-quality-skills
05
Open that project in Codex. In the CLI or IDE extension, type $ and look for an installed skill by name; in the desktop app, open Skills in the sidebar. If the new skills do not appear, restart Codex.

This installs skill files for OpenCode without registering an OpenCode package plugin. Skills CLI installs to the current project by default.

04
From a terminal in your project folder, use Skills CLI to install the skills you want to use in OpenCode.
npx skills add addyosmani/web-quality-skills
05
Check that the installed skill folders contain SKILL.md files in a directory OpenCode reads for skills, such as the project's .agents/skills/ directory.