web-design-guidelines

Identify UI guideline violations in web code and assets.

Updated Aug 23, 2026

Search Tags:#ui #accessibility #review #guidelines #ux #web

Ready to run

npx skills add https://github.com/hanzoai/video --skill web-design-guidelines-hanzoai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hanzoai/video/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/hanzoai/video --skill web-design-guidelines-hanzoai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web teams often struggle to ensure UI code adheres to established guidelines, resulting in inconsistencies, accessibility gaps, and suboptimal UX. This Skill helps automate a rigorous review of UI files against the latest Web Interface Guidelines, reducing manual review time and improving conformance.

Core Features & Use Cases

Guideline retrieval: Fetch the latest Web Interface Guidelines from the official source before reviewing files.
Automated compliance checks: Analyze UI code and assets for accessibility, contrast, and UX alignment.
Report format: Output findings in the concise file:line format suitable for code reviews.
Use Case: Run on a UI codebase to surface accessibility violations and UX inconsistencies, then guide fixes.

Quick Start

Provide the UI files or a pattern to review and the skill will fetch the latest guidelines and return a compliance report.

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 web UI code for accessibility compliance?▼

To audit UI code for accessibility compliance, provide your web project files or a pattern to review. The tool fetches the latest Web Interface Guidelines, analyzes your codebase, and outputs violations in a concise file:line format suitable for code reviews.

What is automated UX guideline validation for web projects?▼

Automated UX guideline validation scans UI codebases against established web interface standards to detect accessibility gaps, contrast issues, and UX inconsistencies. It reduces manual review time by surfacing precise file:line violations for immediate fixes.

Can I review a UI codebase for contrast and UX alignment automatically?▼

Yes, you can review a UI codebase for contrast and UX alignment automatically. The validation process analyzes UI code and assets against the latest fetched guidelines to identify compliance violations and report findings in a terse file:line format.

Does the accessibility review tool require any dependencies or setup?▼

No dependencies or special setup are required. You simply provide the UI files or a file pattern to review, and the tool will automatically fetch the latest guidelines from the official source before returning a compliance report.

What's the best way to identify UI guideline violations in code?▼

The best way to identify UI guideline violations in code is to run an automated compliance check against the latest Web Interface Guidelines. It reviews UI files and assets for accessibility and UX alignment, reporting findings in a concise file:line format.

How are accessibility violations reported for code reviews?▼

Accessibility violations are reported in a terse file:line format suitable for direct integration into code reviews. This concise reporting style pinpoints exact locations of UI guideline failures within the codebase for immediate remediation.