web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and consistency.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/iinoshirozheng/SinoCloudChat --skill web-design-guidelines-iinoshirozheng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/iinoshirozheng/SinoCloudChat/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/iinoshirozheng/SinoCloudChat --skill web-design-guidelines-iinoshirozheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and engineers ensure web UI code adheres to standardized Web Interface Guidelines, catching accessibility, usability, and consistency issues early in the development process.

Core Features & Use Cases

  • Fetch the latest guidelines from the official source before performing reviews.
  • Read specified files or patterns to audit UI components, pages, and patterns against guidelines.
  • Apply all rules from the fetched guidelines and output concise findings in a terse, machine-friendly format.
  • Use Case: When reviewing a UI library or a page, run this skill to verify accessibility conformance, contrast ratios, keyboard navigation, and semantic structure.

Quick Start

Provide the UI files or patterns you want reviewed and run the skill to check conformance against the latest Web Interface Guidelines.

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 and consistency issues?

You can audit web UI code for accessibility and keyboard navigation by providing your component files or patterns to the skill, which fetches the latest Web Interface Guidelines and outputs concise findings on semantic markup and color contrast.

What does a web interface guidelines audit check for in pull requests?

A web interface guidelines audit in pull requests checks UI components for accessibility conformance, keyboard navigation, color contrast ratios, and semantic structure, ensuring consistency and usability across the design system.

Can I review a design system's UI library against standardized web guidelines?

Yes, you can review a UI library or design system by running the skill to verify conformance against the latest Web Interface Guidelines, checking accessibility, keyboard navigation, and semantic structure across your components.

How do I check color contrast and semantic markup in my web UI components?

You can check color contrast and semantic markup in web UI components by applying rules from a fetched live guidelines source to your specified files, receiving terse machine-friendly findings that highlight non-compliant contrast and markup failures.

Does the web UI audit output findings in a format suitable for automated code reviews?

Yes, the web UI audit outputs findings in a prescribed terse, machine-friendly format suitable for automated code reviews and pull requests, concisely reporting accessibility, usability, and consistency issues for design systems.

When do I need to fetch the latest guidelines before performing a UI accessibility audit?

You need to fetch the latest guidelines before performing a UI accessibility audit to ensure your code reviews validate against the most current Web Interface Guidelines for accessibility, keyboard navigation, and semantic markup compliance.