web-design-guidelines

Audit web UI files against official Web Interface Guidelines and report findings in file:line format.

Updated Feb 28, 2026
One-click install
npx skills add https://github.com/raphaelmans/agent-skills --skill web-design-guidelines-raphaelmans
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/raphaelmans/agent-skills/tree/main/web-design-guidelines
Command: npx skills add https://github.com/raphaelmans/agent-skills --skill web-design-guidelines-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web UI projects often drift from established interface guidelines, leading to inconsistencies and accessibility gaps. This Skill automates fetching the latest rules, applying them to your code, and surfacing actionable findings so teams can maintain alignment with best practices.

Core Features & Use Cases

  • Fetch latest guidelines from the source URL before review.
  • Read the specified files or patterns and evaluate them against the guidelines.
  • Output findings in the file:line format for quick triage.
  • Use Case: When asked to review UI, check accessibility, audit design, or ensure site compliance with best practices.

Quick Start

Provide the target files or a pattern, and run the checker to compare them against the latest guidelines.

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 UI components for accessibility and compliance?

You can audit web UI components for accessibility by providing target files to the checker, which fetches the latest official web interface guidelines, evaluates the code, and outputs findings in a concise file:line format for triage.

What is the best way to check codebases for UX consistency against web guidelines?

The best way to check codebases for UX consistency is to run an automated review that fetches the latest rules from the guidelines source, reads your specified files, applies all rules, and reports actionable findings to maintain alignment with best practices.

How does automated UI code review handle guideline updates?

Automated UI code review handles guideline updates by fetching the latest rules directly from the source URL before evaluating your target files, ensuring your site or component library is always checked against current best practices.

Can I use a pattern to audit multiple UI files for site compliance?

Yes, you can use a file pattern to audit multiple UI files for site compliance. The checker reads the specified patterns, applies the fetched web interface rules, and reports findings across the matched codebase.

Do I need external dependencies to perform a web accessibility audit?

No external dependencies are required to perform a web accessibility audit. The checker operates independently to fetch the latest web interface guidelines, read target UI files, and report compliance findings.

What format are UI guideline violations reported in?

UI guideline violations are reported in a concise file:line format, allowing for quick triage and direct navigation to the exact code locations needing review or validation.