web-design-guidelines

Review UI code against Web Interface Guidelines and generate a findings report.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure web interfaces comply with the Web Interface Guidelines by evaluating code against established accessibility and usability best practices, reducing design debt and improving user experience across projects.

Core Features & Use Cases

  • Guideline-based Review: Automatically assess UI code against the latest Web Interface Guidelines.
  • Accessibility Checks: Flag contrast issues, keyboard navigation gaps, and ARIA usage flaws.
  • UX & Design Audit: Verify consistency, typography, spacing, and responsive behavior across pages or components.
  • Use Case: When asked to "review my UI", "check accessibility", or "audit design", run a targeted review against your codebase and generate a concise report of findings with actionable recommendations.

Quick Start

Use the web-design-guidelines skill to review your UI files by providing a path or pattern (for example, 'src/**/*.tsx' or 'public/index.html'). The skill will fetch the latest guidelines and apply them to the specified files, then return a terse, rule-based report.

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 my UI code for accessibility and UX best practices?

To audit UI code for accessibility and UX, provide a file path or pattern like 'src/**/*.tsx' to the skill, which fetches official Web Interface Guidelines and applies them to generate a rule-based findings report.

What is a Web Interface Guidelines compliance review?

A Web Interface Guidelines compliance review evaluates UI code against established accessibility and usability best practices, flagging contrast issues, keyboard navigation gaps, and ARIA usage flaws to reduce design debt.

Can I check ARIA usage and keyboard navigation gaps in my web project?

Yes, you can check ARIA usage and keyboard navigation gaps by running a targeted review against your codebase, which applies fetched rules to specified files and returns actionable recommendations.

How do I verify design consistency for typography and spacing across components?

To verify design consistency for typography and spacing, audit your UI components against the latest Web Interface Guidelines, which assesses responsive behavior and visual uniformity across pages.

Does the accessibility audit work with specific file types?

Yes, the accessibility audit works with web project files like HTML and TSX, requiring a specified path or pattern to read files and apply fetched Web Interface Guidelines rules to them.

What limitations exist when checking web design accessibility automatically?

A limitation of checking web design accessibility automatically is that the review relies on fetching the latest guidelines and reading specified static files, meaning dynamic runtime state may not be evaluated.