web-design-guidelines

Compare project files against Web Interface Guidelines and report UI non-conformance in file:line format.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams verify that web UI code complies with current Web Interface Guidelines, reducing accessibility and usability gaps.

Core Features & Use Cases

  • Fetch the latest guidelines from the source URL and apply them to your project files.
  • Read specified files or patterns, evaluate them against the rules, and output concise findings in a file:line format.
  • Use cases include validating accessibility, visual consistency, and adherence to best practices across UI components.

Quick Start

Provide the target UI files or patterns and run the checker to produce rule-compliant findings.

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 codebase for accessibility and UI design non-conformance?

To audit frontend code for accessibility, provide target UI files or patterns and the tool fetches latest Web Interface Guidelines, evaluates code against rules, and outputs findings in file:line format for visual consistency and usability gaps.

What is a UI accessibility audit and how does it identify design guideline violations?

A UI accessibility audit compares project files against Web Interface Guidelines to identify non-conformance, evaluating components, pages, and accessible patterns for visual consistency and usability issues reported in standardized file:line format.

Can I review specific UI components and pages for best-practice compliance without scanning the whole project?

Yes, you can specify target UI files or patterns for review, and the checker reads only those files, evaluates them against fetched guidelines, and outputs concise findings in file:line format for accessibility and best-practice compliance.

Do I need to manually provide web design guidelines or are they fetched automatically?

Web design guidelines are fetched automatically from a specified source URL before reading target files, ensuring audits always apply the latest rules for accessibility, visual consistency, and usability without manual guideline curation.

What's the best way to check frontend code for visual consistency and usability gaps across components?

The best way to check frontend code for visual consistency is running an audit that fetches current Web Interface Guidelines, reads specified files or patterns, and reports non-conformance findings in file:line format across all UI components and pages.

What are the limitations of automated UI accessibility audits for frontend codebases?

Automated UI accessibility audits are limited to comparing project files against fetched Web Interface Guidelines and reporting findings in file:line format, meaning complex interactive behaviors, dynamic runtime states, and context-specific usability issues may require additional manual review.