web-design-guidelines

Analyze UI files against Web Interface Guidelines for accessibility and design issues.

Updated Aug 23, 2026

Search Tags:#accessibility #a11y #review #ui-design #ux #web-guidelines

Ready to run

npx skills add https://github.com/kimny1143/claude-code-template --skill web-design-guidelines-kimny1143

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines to catch accessibility, usability, and design inconsistencies early in development.

Core Features & Use Cases

Guideline Fetching: Retrieve the latest Web Interface Guidelines before review.
File Pattern Review: Check specified files or patterns for accessibility, responsive design, and semantic markup.
Report & Guidance: Output concise findings with actionable recommendations for fixes.
Use Case: A dev audits a new web app's UI for color contrast and keyboard navigation compliance.

Quick Start

Provide the target UI files or patterns and let the AI fetch the latest guidelines before producing 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 check my UI code for accessibility and web design compliance?▼

You can audit UI code for web design compliance by analyzing files against the latest Web Interface Guidelines to identify accessibility, responsive design, and semantic markup issues. This review targets individual files or entire projects to catch usability problems early.

What is the best way to automate a11y reviews for web apps?▼

The best way to automate a11y reviews is to fetch live web interface guidelines and apply them to your specified file patterns. This generates a concise, line-based report highlighting visual design inconsistencies and keyboard navigation issues for quick remediation.

Can I review an entire web project for color contrast and semantic markup?▼

Yes, you can review an entire web project for color contrast and semantic markup by providing file patterns for the audit. The system reads these patterns to evaluate accessibility and usability across the whole application efficiently.

Does the web design compliance check fetch live accessibility guidelines?▼

Yes, the web design compliance check fetches live accessibility rules directly from the Guidelines Source URL before reviewing your code. This ensures your UI design is always evaluated against the most current web interface standards.

What format does the UI code audit report use for design issues?▼

The UI code audit report outputs findings in a concise, line-based format. This structure provides actionable recommendations for fixing accessibility, usability, and visual design inconsistencies directly within your web app files.