# web-quality-audit

This skill reviews a project for performance, accessibility, SEO, and web best practices. Use it to find issues and get prioritized fixes with code examples.

- skill · `type=skill` · Claude Code · 294 installs
- Author: web-quality-skills
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/web-quality-audit
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/web-quality-audit

## What it does

The skill examines project code and sorts findings into four areas: performance, accessibility, SEO, and web best practices. Each finding gets a severity level, an explanation of its impact, and a suggested change. Code examples can accompany the fixes.

Checks cover Core Web Vitals, keyboard access, page metadata, heading structure, HTTPS, and console errors. The output groups findings by priority and ends with recommended next steps. Its guidance follows Lighthouse audit criteria, so it supports a project review rather than replacing checks in a live browser.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/web-quality-audit
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill web-quality-audit -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/web-quality-audit/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/web-quality-audit/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/web-quality-audit/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/web-quality-audit/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates web-quality-audit
```

2. **Manually: put the files in place**
- File: `.github/skills/web-quality-audit/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/web-quality-audit
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/web-quality-audit/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/web-quality-audit

## When to use it
- find causes of slow page loads
- check whether keyboard users can navigate an interface
- spot gaps in page metadata and heading structure
- prioritize fixes before a site launch

## Example prompts
- Review this project for performance issues and suggest fixes with code examples.
- Audit the pages for accessibility and group findings by severity.
- Check the site's SEO and web practices, then list the highest-priority fixes.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

## Other versions with the same name
- [web-quality-audit · addyosmani](https://affpapa.org/en/nevibecode/skills/web-quality-skills-web-quality-audit.md) — 32700 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md