Skip to main content
affpapa.org
RU EN
skill

web-quality-audit · davila7 — Claude Code skill for website checks

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.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --skill development/web-quality-audit
Open on GitHub

What web-quality-audit 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.

What it helps with

  • 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 for the agent

  • 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.

How to install web-quality-audit

1claude-code-templates

npx claude-code-templates@latest --skill development/web-quality-audit

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill web-quality-audit -a claude-code

3Manually: put the files in place

~/.claude/skills/web-quality-audit/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/web-quality-audit/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about web-quality-audit

How do I install web-quality-audit in Claude Code?

Run npx claude-code-templates@latest --skill development/web-quality-audit.

What does web-quality-audit do?

It reviews a project for performance, accessibility, SEO, and web best practices. Findings are ranked by severity and paired with suggested fixes.

Which accessibility checks does the skill cover?

It reviews image alternatives, contrast, keyboard use, visible focus, form labels, and ARIA usage.

Similar skills

All skills for Frontend and UI →

web-quality-audit by other authors comes first.

web-quality-audit web-quality-skills Runs an evidence-led web quality audit across performance, accessibility, SEO, and best practices using live browser telemetry and source code. CX Codex +1 32,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set495

The whole set →
documentation-templates This skill provides outlines and templates for READMEs, API references, code comments, and project records. Use it when starting documentation or bringing existing pages into a clearer structure. 305installs unity-project-setup Scaffolds a standardized Unity project with structured Assets directories, URP configs, core C# managers, and Git LFS tracking via Claude Code. 303installs agent-memory-mcp This skill runs an MCP server that gives your agent long-term memory: it stores decisions, architecture notes and patterns, then finds them again by search. 300installs setup-visual-testing A slash command that wires up visual regression testing: component and page snapshots, responsive breakpoints, accessibility checks. 300installs java-mcp-expert A subagent for building MCP servers in Java with the official SDK, Project Reactor and Spring Boot. Useful when you need tools, resources and prompts wired up. 291installs decision-tree-explorer Maps complex decision trees with probability scoring, expected value calculations, and risk modeling. Useful for sizing investments, operational pivots, or crisis responses. 291installs create-jtbd Generates a Jobs-to-be-Done analysis document for product features without technical implementation notes or time estimates. 290installs database-optimizer A Claude skill that digs into database bottlenecks: execution plans, indexes, N+1, caching and partitioning. Useful when queries are slow and the reason isn't obvious. 286installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor