web-design-guidelines

Analyze UI code for Web Interface Guidelines compliance and report findings.

1|1|Updated May 1, 2026
One-click install
npx skills add https://github.com/funsaized/claude-and-codex-settings --skill web-design-guidelines-funsaized
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/funsaized/claude-and-codex-settings/tree/main/plugins/react-skills/skills/web-design-guidelines
Command: npx skills add https://github.com/funsaized/claude-and-codex-settings --skill web-design-guidelines-funsaized

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams ensure their web UIs comply with established Web Interface Guidelines, reducing accessibility and usability gaps across projects.

Core Features & Use Cases

  • Fetch latest Web Interface Guidelines from the source
  • Check target UI files against every rule in the guidelines
  • Output findings in concise file:line format
  • Use case: audit a production UI for accessibility compliance and design consistency

Quick Start

Provide the UI files or patterns to review and I will fetch the guidelines, evaluate them, and report findings.

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 web UI code for accessibility compliance?

Audit web UI code for accessibility compliance by analyzing target files against established Web Interface Guidelines. The tool fetches the latest rules, checks semantic structure and design consistency, and outputs concise findings in a file:line format.

What is the best way to check my UI implementation against web design guidelines?

Checking UI implementation against web design guidelines involves reading project files and comparing them to a fetched guidelines source. This process identifies accessibility gaps and usability issues, reporting findings in a concise file:line format.

How do I review semantic structure and design consistency in web projects?

Review semantic structure and design consistency by running a code analysis against Web Interface Guidelines. The evaluation fetches rules from the guidelines source and outputs findings in a file:line format, highlighting accessibility and compliance gaps.

Can I use this tool to check production UI files for a11y compliance?

Yes, you can check production UI files for a11y compliance. Provide the UI files or patterns to review, and the tool fetches the latest guidelines, evaluates the code, and reports accessibility and design compliance findings.

Does this accessibility audit require any dependencies or external libraries?

No dependencies or external libraries are required. The accessibility audit operates by fetching the latest guidelines from the source and reading specified files from the references to output compliance findings.

What format does the accessibility design review output use?

The accessibility design review outputs findings in a concise file:line format. This format points directly to the exact locations in the UI code where accessibility, semantic structure, or design consistency issues occur.