web-design-guidelines

Audit UI code against Web Interface Guidelines and report file:line findings.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code adheres to established Web Interface Guidelines, surfacing accessibility and usability gaps early to improve quality and consistency.

Core Features & Use Cases

  • Guideline-driven UI audit: Automatically checks UI files against the latest Web Interface Guidelines.
  • Pattern-based review: Accepts file paths or patterns to scope the audit across multiple files.
  • Output clarity: Reports findings in a concise file:line format for quick triage. Use Case: When auditing a new UI component or an entire site, run this Skill to surface issues like color contrast, missing ARIA attributes, or navigation inconsistencies.

Quick Start

Provide the files you want reviewed and I will fetch the latest guidelines and audit them.

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 my frontend code for web accessibility and UI compliance?

To audit frontend code for web accessibility and UI compliance, provide your file paths or patterns and the tool fetches the latest Web Interface Guidelines to check your code, reporting issues like missing ARIA attributes in a concise file:line format.

What is a UI design review and how does it find accessibility gaps?

A UI design review identifies accessibility gaps by automatically checking your UI files against established Web Interface Guidelines, surfacing issues such as color contrast and navigation inconsistencies early to improve site-wide usability and consistency.

Can I scan multiple UI files at once for a site-wide design audit?

Yes, you can scan multiple UI files at once for a site-wide design audit by accepting file paths or patterns, allowing you to scope the conformance check across an entire project or a specific new UI component.

How do I check for missing ARIA attributes and color contrast issues in my web design?

To check for missing ARIA attributes and color contrast issues in web design, run a guideline-driven UI audit that reads your specified files and reports findings in a concise file:line format for quick triage.

Does this UI audit tool work without any external dependencies?

Yes, the UI audit tool works without external dependencies, but it requires an active connection to fetch the latest Web Interface Guidelines from a remote source before reading your user-specified files and reporting conformance findings.

What is the best way to surface UI code gaps during a frontend audit?

The best way to surface UI code gaps during a frontend audit is to run an automated guideline-driven review that fetches the latest standards, reads your files, and reports accessibility and usability findings in a file:line format for quick triage.