web-design-guidelines

Fetch current Web Interface Guidelines and evaluate UI code compliance.

Updated Mar 1, 2026
One-click install
npx skills add https://github.com/sao-coding/sao-blog --skill web-design-guidelines-sao-coding
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/sao-coding/sao-blog/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/sao-coding/sao-blog --skill web-design-guidelines-sao-coding

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that web UI code aligns with current Web Interface Guidelines, reducing accessibility gaps and UX inconsistencies across products.

Core Features & Use Cases

  • Guideline-driven review: fetch the latest rules and apply them to target UI files or patterns.
  • Automated checks: compare code against accessibility and design best practices to surface non-compliant patterns.
  • Use Case: when reviewing a new web interface, run checks against a specified set of files to generate a concise compliance report.

Quick Start

Use the web-design-guidelines skill to review the UI files in your project and report any guideline violations.

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 UI code for web interface guideline compliance?

To audit UI code for web interface guideline compliance, fetch current rules and evaluate target UI files to generate a concise compliance report identifying accessibility gaps and UX inconsistencies.

How do I check web accessibility issues in my UI files?

You can check web accessibility issues by running automated checks that compare your UI code against fetched design best practices, surfacing non-compliant patterns in a file:line format for review.

Can I review specific files for UX compliance instead of the whole project?

Yes, you can review specific files for UX compliance by providing a specific file list or file patterns, allowing the evaluation to target a defined set of UI files rather than the entire project.

What is the best way to ensure deterministic behavior during a UI review?

The best way to ensure deterministic behavior during a UI review is to fetch fresh web interface guidelines before each evaluation, ensuring checks apply the most current rules to the target files.

Does web design guideline compliance checking work without external dependencies?

Yes, web design guideline compliance checking operates without external dependencies, fetching the latest rules directly to evaluate target UI files and output results in the file:line format.

What limitations exist when evaluating UI code against web design guidelines?

Limitations include relying on fetched web interface guidelines for each review session, meaning checks are constrained to current rules and the provided file patterns or specific file lists for evaluation.