skills.rest
Shana-AE
Shana-AECOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against the latest Web Interface Guidelines.

2|Updated Jan 28, 2026
Search Tags:#ui#code review#accessibility#web design#ux#design guidelines
One-click install
npx skills add https://github.com/Shana-AE/.shanaae-configs --skill web-design-guidelines-shana-ae
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Shana-AE/.shanaae-configs/tree/main/ai/skills/vendor/web-design-guidelines
Command: npx skills add https://github.com/Shana-AE/.shanaae-configs --skill web-design-guidelines-shana-ae

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? Quickly verify that UI code adheres to up-to-date Web Interface Guidelines, reducing accessibility and usability gaps across projects.

## Core Features & Use Cases

  • Guideline-driven review: Compare project UI against the latest Web Interface Guidelines to surface accessibility, color contrast, and layout issues.
  • Scope-aware audits: Effective for reviews of components, pages, and small to large web apps to ensure consistent UX.
  • Use Case: When designing a new dashboard, run this skill to flag violations like insufficient contrast, missing ARIA labels, and poor keyboard navigation.

### Quick Start Use this skill to scan your project's UI files against the current guidelines and report 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 check my web UI code for accessibility and design guideline violations?▼

Web UI accessibility checks involve fetching the latest Web Interface Guidelines and applying them to your project files to identify conformance issues like missing ARIA labels, insufficient color contrast, and poor keyboard navigation.

What is a UI code review against web design guidelines?▼

A UI code review against web design guidelines is an audit mechanism that fetches current rules and applies them to specified files or patterns to verify UI conformance, reducing accessibility and usability gaps across the project.

Can I audit a large web app for UX compliance and consistent design?▼

Yes, you can audit large web apps for UX compliance. This scope-aware review effectively handles components, pages, and large web applications to ensure consistent UX and site-wide Web Interface Guidelines adherence.

How do I run a UX audit on dashboard components for color contrast and ARIA labels?▼

Running a UX audit on dashboard components involves fetching the latest Web Interface Guidelines and applying them to specified files or patterns to flag conformance issues like insufficient color contrast and missing ARIA labels.

Do I need to manually fetch web interface guidelines before reviewing UI code?▼

No, manual fetching is not required. The audit process automatically fetches the latest rules from the Guidelines Source and applies them to the specified UI files or patterns to identify current design conformance issues.

Related Skills

Explore More Design & Creative Skills→
vijaykpatelvijaykpatel

web-design-guidelines

Analyze UI code and assets for Web Interface Guidelines compliance and report violations.

Community
Intermediate
heyAyushhheyAyushh
3

web-design-guidelines

Identify UI accessibility, performance, and usability gaps using Web Interface Guidelines.

Community
Advanced
inbharataiinbharatai
22

accessibility-checker

Audit digital content for WCAG 2.2 compliance and accessibility issues.

Community
Intermediate
NVIDIANVIDIA
33

accessibility

Automate accessibility audits for web components using ESLint and axe-core.

Official
Advanced