skills.rest
YouMingYeh
YouMingYehCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit web components and pages against current Web Interface Guidelines.

2|Updated Jan 12, 2026
Search Tags:#design#accessibility#audit#guidelines#web-design#ui-review
One-click install
npx skills add https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template --skill web-design-guidelines-youmingyeh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/YouMingYeh/shadcn-ui-supabase-docker-template --skill web-design-guidelines-youmingyeh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their web interfaces comply with the latest Web Interface Guidelines by identifying accessibility gaps, UX deviations, and consistency issues early in the design and development process.

Core Features & Use Cases

  • Automated UI guideline checks across code and design assets to surface violations against the current standard.
  • Accessibility and UX conformance auditing, including color contrast, semantic markup, keyboard navigation, and ARIA labeling.
  • Collaboration-ready reporting and guidance to fix issues quickly. Use Case: a product team reviews a landing page to verify color contrast meets WCAG and all interactive components have proper aria labels.

Quick Start

Provide the UI files or patterns you want reviewed, and the skill will fetch the latest guidelines and report any 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 for accessibility and web design compliance?▼

To audit UI for accessibility, provide your web components, pages, or assets for review. The skill fetches official web interface guidelines and outputs structured findings on violations like color contrast, semantic markup, and ARIA labeling.

What is checked during a web interface design review?▼

A web interface design review checks accessibility gaps, UX deviations, and consistency issues. It verifies WCAG color contrast, keyboard navigation, semantic markup, and ARIA labeling against the latest web interface guidelines.

How do I verify my site conformance with WCAG color contrast and ARIA labels?▼

To verify site conformance, submit your UI files to trigger an automated guideline check. The tool parses your code to identify WCAG color contrast failures and missing ARIA labels, generating a collaboration-ready report.

Can I use this to audit design assets across an entire project?▼

Yes, you can audit design assets across a project. The skill applies automated UI guideline checks to web components, pages, and assets specified by the user, surfacing compliance violations against current standards.

Do I need to manually provide the latest web interface guidelines for the audit?▼

No, you do not need to manually provide web interface guidelines. The skill implements rule-fetching directly from the official guideline source to ensure your accessibility and UX conformance audit uses the most up-to-date standards.

Related Skills

Explore More Design & Creative Skills→
misty-stepmisty-step
13

web-design-guidelines

Audit UI files against Web Interface Guidelines for accessibility and UX conformance.

Official
Intermediate
wonton-web-workswonton-web-works
1

mg-accessibility-review

Identify and document WCAG 2.1 AA/AAA accessibility violations in web interfaces.

Official
Advanced
mrsknetworkmrsknetwork

web-design-guidelines

Assess UI code against Web Interface Guidelines and accessibility standards.

Community
Intermediate
Rushtu99Rushtu99

web-design-guidelines

Identify UI code conformance to Web Interface Guidelines and output compliance findings.

Community
Intermediate