web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/Chai-Un/wedding --skill web-design-guidelines-chai-un
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Chai-Un/wedding/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Chai-Un/wedding --skill web-design-guidelines-chai-un

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure their UI code adheres to the latest Web Interface Guidelines, reducing accessibility and usability gaps during development.

Core Features & Use Cases

  • Guideline-driven auditing: fetches guidelines and checks files against rules.
  • Automated findings: outputs issues in a structured, machine-readable format.
  • Use Case: When a designer asks to review a UI for accessibility and UX consistency across pages.

Quick Start

Use the web-design-guidelines skill to review the target codebase by providing a file or pattern, e.g., "src/pages" or "components/".

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 design compliance?

You can audit UI code for web accessibility and design compliance by fetching the latest Web Interface Guidelines, reading target HTML, CSS, and JavaScript assets, and applying rules to generate structured findings. This identifies usability gaps during development.

What's the best way to perform a frontend design review across multiple pages?

A frontend design review across multiple pages is performed by checking files against fetched Web Interface Guidelines. Providing a file pattern like "src/pages" or "components/" allows the review to apply accessibility and UX consistency rules across the target assets.

Does this accessibility check work with my existing HTML and CSS assets?

Yes, this accessibility check works with your existing HTML, CSS, and JavaScript assets. It reads target files directly from your frontend project and applies Web Interface Guidelines to detect usability and accessibility issues.

How are web accessibility issues reported after a design review?

Web accessibility issues are reported as automated findings in a structured, machine-readable format after the design review. This output helps development teams systematically resolve compliance gaps found in the UI code.

Why do I need to fetch guidelines for a UI compliance audit?

You need to fetch guidelines for a UI compliance audit to ensure checks run against the latest Web Interface Guidelines. This guarantees the accessibility and UX consistency review accurately reflects current standards.

Can I review a specific component folder for UI guidelines compliance?

Yes, you can review a specific component folder for UI guidelines compliance by providing a directory path like "components/". The audit will read the HTML and CSS assets within that target scope and apply the rules to generate findings.