web-design-guidelines

Identifies UI code compliance gaps using official Web Interface Guidelines, outputting findings as file:line references.

1|Updated Feb 24, 2026
One-click install
npx skills add https://github.com/wchen02/wchen-ai --skill web-design-guidelines-wchen02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/wchen02/wchen-ai/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/wchen02/wchen-ai --skill web-design-guidelines-wchen02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with the Web Interface Guidelines to help ensure accessibility, UX consistency, and visual quality across web interfaces during reviews.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines from the official source before performing checks.
  • Reads one or more UI files or patterns provided by the user and applies the guidelines to each target.
  • Outputs concise findings in the standard file:line format for quick remediation guidance.
  • Use Case: When evaluating a new UI component for accessibility and design best practices before release.

Quick Start

Provide the UI files or pattern to review; I will fetch guidelines and report any non-conformities.

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

You can check UI code for accessibility and UX consistency by applying the latest Web Interface Guidelines to your local files. The tool reads your specified patterns and outputs precise file:line findings for any non-conformities found.

What is the best way to review web interface components for UX consistency before release?

Reviewing components for UX consistency involves comparing local UI files against the latest Web Interface Guidelines. This identifies visual design and accessibility gaps, outputting precise remediation guidance in a file:line format.

Do I need to install any dependencies to check UI files against web design guidelines?

No dependencies are required to check UI files against web design guidelines. You simply provide your local UI files or patterns, and the tool fetches the official Web Interface Guidelines directly to perform the accessibility and design compliance review.

How does a web design guideline review handle multiple UI files or patterns?

A web design guideline review handles multiple UI files by reading each specified target pattern you provide. It applies the fetched Web Interface Guidelines to each file individually and reports all accessibility and visual non-conformities in the required file:line format.

Can I use this approach to check visual design compliance across an entire web project?

Yes, you can check visual design compliance across a web project by providing the relevant UI files or patterns. The tool applies the Web Interface Guidelines to evaluate accessibility, UX consistency, and visual quality across your components and pages.