web-design-guidelines

Compare UI files against Web Interface Guidelines for compliance issues.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify UI code against Web Interface Guidelines to ensure accessibility, usability, and consistency across web interfaces, reducing design debt and QA time.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines and compares specified UI files for conformance.
  • Checks for accessibility, responsive behavior, semantic structure, and UX best practices.
  • Use Case: When auditing a site or component library, run this skill to surface issues like color contrast failures or missing aria attributes.

Quick Start

Provide the UI files to review, and I will fetch the latest guidelines and assess them for accessibility and design compliance.

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

To audit UI for accessibility and compliance, provide your UI files for review. The system fetches the latest Web Interface Guidelines and checks them for accessibility, responsive behavior, and UX best practices to identify conformance issues.

What is a UI design audit and when do I need one?

A UI design audit verifies UI code against Web Interface Guidelines to ensure accessibility, usability, and consistency. You need one when auditing a site or component library to surface issues like color contrast failures or missing aria attributes.

How do I check my web components for missing aria attributes?

To check web components for missing aria attributes, submit your UI files for a design audit. The system applies semantic structure checks and reports accessibility noncompliance in a concise, actionable format for rapid remediation.

Does this design audit check responsive behavior and color contrast?

Yes, the design audit checks responsive behavior and color contrast. It compares your specified UI files against the latest Web Interface Guidelines, applying checks for accessibility, semantic structure, and design consistency across components.

Can I review an entire component library for UX best practices?

Yes, you can review an entire component library for UX best practices. Provide the UI files to review, and the system will assess them for conformance, surfacing compliance issues and reducing design debt and QA time.

What format are UI compliance issues reported in?

UI compliance issues are reported in a concise, actionable format suitable for rapid remediation. The audit findings identify specific accessibility, responsive behavior, and design consistency failures found within your provided UI files.