web-design-guidelines

Audits UI files for accessibility, contrast, semantics, and performance compliance using official guidelines.

Updated Jan 22, 2026

Search Tags:#accessibility #frontend #UI #audit #design-review #web-guidelines

Ready to run

npx skills add https://github.com/emelleby/tc-vsme --skill web-design-guidelines-emelleby

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/emelleby/tc-vsme/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/emelleby/tc-vsme --skill web-design-guidelines-emelleby

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps design teams and frontend engineers ensure web interfaces comply with the latest Web Interface Guidelines by automatically validating UI assets against published rules and reporting non-conformance.

Core Features & Use Cases

Guideline-driven audits: fetches the latest rules from the official guidelines source and checks UI files for accessibility, contrast, semantics, and performance.
File-based review: operates on user-provided file patterns (e.g., src/components/**/*.tsx) to produce focused findings.
Use Case: run this skill before QA to verify accessibility and design compliance on a new UI component.

Quick Start

Use the web-design-guidelines skill to audit your attached UI files or a pattern like src/components/**/*.tsx.

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 frontend UI for accessibility and best practices?▼

To audit frontend UI for accessibility and best practices, fetch the latest Web Interface Guidelines from the official source and apply rule-based checks to your targeted files. This validates accessibility, contrast, semantics, and performance in your UI assets.

What is a UI accessibility audit for frontend projects?▼

A UI accessibility audit for frontend projects is a review process that checks web interfaces against published guidelines to verify compliance with accessibility, contrast, semantics, and performance rules, reporting any non-conformance found in the files.

Can I audit specific file patterns like src components for web design compliance?▼

Yes, you can audit specific file patterns like src/components/**/*.tsx for web design compliance. The audit operates on user-provided file patterns to produce focused findings on accessibility and best practice violations within those targeted UI assets.

When should I run an accessibility and design review on my web interface?▼

You should run an accessibility and design review on your web interface during code reviews, feature deliveries, or pre-release checks before QA. This ensures your new UI components comply with the latest Web Interface Guidelines prior to release.

Does the web design guidelines audit require fetching rules from an external source?▼

Yes, the web design guidelines audit requires fetching rules from the official guidelines source using WebFetch. This ensures the validation checks applied to your UI files always reflect the latest published accessibility and performance standards.

What are the limitations of using automated rule-based checks for UI accessibility?▼

A limitation of automated rule-based checks for UI accessibility is that they validate code-level conformance against published guidelines, but may not capture the full user experience. The audit operates strictly on provided file patterns to identify non-conformance in frontend assets.