web-design-guidelines

Audit web interface code for design and accessibility guideline compliance.

Updated Jul 20, 2026
One-click install
npx skills add https://github.com/alissonmds00/LostPets.v2 --skill web-design-guidelines-alissonmds00
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/alissonmds00/LostPets.v2/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/alissonmds00/LostPets.v2 --skill web-design-guidelines-alissonmds00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the inconsistency and accessibility issues often found in web interfaces by providing an automated audit against established design and accessibility standards.

Core Features & Use Cases

  • Automated UI Auditing: Scans your codebase for compliance with Web Interface Guidelines.
  • Accessibility Checks: Identifies potential accessibility gaps in your UI components.
  • Use Case: Use this tool during a code review to ensure that your new React components or CSS styles align with industry best practices before merging your pull request.

Quick Start

Ask the web-design-guidelines skill to review the files in the components directory for compliance with the latest interface standards.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit web interface code for compliance with design and accessibility standards?

To audit web interface code, you can use an automated tool that scans your codebase against established design and accessibility guidelines, identifying inconsistencies and accessibility gaps in your UI components.

What is the best way to check accessibility gaps in frontend components during a code review?

The best way to check accessibility gaps during a code review is to run an automated UI audit that scans your React components or CSS styles against industry best practices before merging your pull request.

How does an automated UI audit work for frontend development workflows?

An automated UI audit works by retrieving external rule sets via WebFetch to perform pattern-based file analysis on your codebase, checking your frontend code for compliance with established web interface guidelines.

Do I need WebFetch to perform pattern-based file analysis on my UI components?

Yes, you need WebFetch to perform pattern-based file analysis, as the audit requires retrieving external rule sets to evaluate your UI components against the latest interface and accessibility standards.

Can I use this UI audit tool to review CSS styles and React components before merging a pull request?

Yes, you can use this UI audit tool to review CSS styles and React components, ensuring your new frontend code aligns with industry best practices and accessibility standards before merging your pull request.

What are the limitations of automated accessibility checks for web interfaces?

Automated accessibility checks rely on pattern-based file analysis and external rule sets, meaning they may not catch complex, dynamic user interaction issues or context-specific usability problems outside established interface guidelines.