web-design-guidelines

Validate UI code against Web Interface Guidelines and report compliance gaps.

Updated Aug 22, 2025
One-click install
npx skills add https://github.com/AnthonyCongHieu/voice_tool --skill web-design-guidelines-anthonyconghieu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/AnthonyCongHieu/voice_tool/tree/main/voice_tools_v1/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/AnthonyCongHieu/voice_tool --skill web-design-guidelines-anthonyconghieu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for compliance with Web Interface Guidelines, helping teams identify accessibility, performance, and design gaps early.

Core Features & Use Cases

  • Fetches the latest guidelines from a central source and applies them to the specified files or patterns.
  • Reports findings in the concise file:line format for rapid remediation.
  • Use Case: when you want to ensure new UI components meet accessibility and visual design standards before release.

Quick Start

Provide a quick UI review by loading the target files and the latest guidelines, then report any compliance gaps.

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 visual design compliance?

To audit UI code for accessibility and visual design compliance, target your codebase or specified file groups to validate them against Web Interface Guidelines. The tool fetches fresh rules, reads target files, and reports findings in a concise file:line format for rapid remediation.

What is the best way to enforce web design guidelines during a code review?

The best way to enforce web design guidelines during a code review is to validate UI code against centralized Web Interface Guidelines. It automatically applies accessibility, performance, and visual design checks across web interfaces and outputs precise file:line remediation targets.

Can I check specific file groups for accessibility and usability issues?

Yes, you can check specific file groups for accessibility and usability issues. The review process targets user-specified file groups or codebases, reads the target files, applies all relevant rules, and reports any compliance gaps it finds.

How do I ensure new UI components meet design standards before release?

To ensure new UI components meet design standards before release, fetch the latest guidelines from a central source and apply them to your target files. This validates accessibility, performance, and visual design compliance early in development.

Does the UI compliance audit use the latest web interface guidelines?

Yes, the UI compliance audit uses the latest web interface guidelines. It fetches fresh rules from a central source before reading your target files, ensuring that all accessibility, performance, and visual design checks reflect current standards.

What format does the accessibility audit use to report findings?

The accessibility audit reports findings in a concise file:line format. This structure pinpoints exact locations of accessibility, performance, and visual design gaps within your UI code, enabling rapid remediation of the identified issues.