skills.rest
chuxiaoguo
chuxiaoguoCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Fetches Web Interface Guidelines and verifies UI code compliance.

Updated Aug 27, 2026
Search Tags:#design#ui#accessibility#compliance#review#guidelines
One-click install
npx skills add https://github.com/chuxiaoguo/skills-repo --skill web-design-guidelines-chuxiaoguo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/chuxiaoguo/skills-repo/tree/main/skills-collection/web-design-guidelines
Command: npx skills add https://github.com/chuxiaoguo/skills-repo --skill web-design-guidelines-chuxiaoguo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI teams often struggle to ensure every page and component meets current Web Interface Guidelines. This Skill fetches the latest rules and applies them to your UI files to surface conformance gaps and recommended fixes.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines before review to ensure up-to-date conformance.
  • Apply rules to specified files or patterns to surface violations and suggested fixes.
  • Use for accessibility audits, UX conformance checks, and design-system compliance verification across projects.

Quick Start

Provide the files or patterns you want reviewed and I will fetch the latest guidelines and assess them.

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 accessibility compliance?▼

You can perform an accessibility audit by providing your UI files or code patterns for review. The system fetches the latest Web Interface Guidelines, evaluates your code against these rules, and generates a concise report identifying conformance gaps and suggested fixes.

What is a web interface design review and when do I need it?▼

A web interface design review verifies that your UI components and pages meet current accessibility and UX conformance standards. You need this process when validating design-system compliance, surfacing rule violations across projects, or ensuring site-wide accessibility before deployment.

How do I check UI files against the latest UX conformance guidelines?▼

Checking UI files against UX conformance guidelines involves fetching the latest Web Interface Guidelines from a specified source URL. You provide the target files or code patterns, and the system applies the updated rules to identify violations and output recommended fixes.

Does the accessibility review process work without external dependencies?▼

Yes, the accessibility review process works without external dependencies. It independently fetches the latest guidelines from a specified source URL and processes your provided files to surface design and accessibility compliance findings in a rule-based report.

What is the best way to automate site-wide design system compliance verification?▼

The best way to automate site-wide design system compliance verification is applying fetched Web Interface Guidelines to specified file patterns across your project. This surfaces conformance gaps and generates a concise rule-based report covering all UI components.

Related Skills

Explore More Design & Creative Skills→
BangjjackBangjjack

web-design-guidelines

Review UI code against Web Interface Guidelines and report findings in file:line format.

Official
Intermediate
jrmatherlyjrmatherly

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Community
Basic
spartDevspartDev
6

Design System Violation Detector

Detect design-system violations in React components against DESIGN_GUIDELINES.md.

Community
Advanced
vathymutvathymut

web-design-reviewer

Inspect websites for layout, responsive, accessibility, and visual consistency issues.

Community
Advanced