web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design compliance.

4|2|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/hiimtrung/coder --skill web-design-guidelines-hiimtrung
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hiimtrung/coder/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/hiimtrung/coder --skill web-design-guidelines-hiimtrung

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often fails accessibility and design consistency checks; this Skill automates auditing UI files against up-to-date web interface guidelines.

Core Features & Use Cases

  • Fetches the latest Web Interface Guidelines from the source and applies them to the target files.
  • Evaluates accessibility aspects including semantic HTML, color contrast, keyboard navigation, and ARIA usage.
  • Outputs findings in a concise file:line format suitable for code reviews or design critiques.
  • Use Case: when asked to review UI, audit design, or verify accessibility across a codebase.

Quick Start

Review the UI codebase against the latest Web Interface Guidelines to ensure accessibility and design compliance.

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 accessibility issues?

Accessibility auditing evaluates your UI code against the latest Web Interface Guidelines to detect semantic HTML, color contrast, keyboard navigation, and ARIA issues, outputting findings in a concise file:line format for review.

How do I check color contrast and responsive behavior in a web project?

Checking color contrast and responsive behavior applies the latest web guidelines to your UI files, generating precise file:line findings that pinpoint exactly where your frontend components fail visual compliance checks.

What is the best way to automate accessibility checks during a frontend code review?

Automating accessibility checks during a frontend code review requires fetching up-to-date web interface guidelines and applying them to your codebase, producing standardized file:line outputs that highlight semantic and ARIA failures for review.

Can I use this to verify ARIA usage and semantic HTML across my components?

Yes, you can verify ARIA usage and semantic HTML across your components. The Skill reads target UI files, evaluates them against fetched web guidelines, and returns a detailed file:line format critique of your accessibility implementation.

Do I need to provide my own accessibility rules to audit design assets?

No, you do not need to provide your own accessibility rules to audit design assets. The Skill fetches the latest Web Interface Guidelines directly from its specified source to evaluate your UI codebase automatically.

What are the limitations of using automated web design guidelines for UI audits?

A limitation of automated web design guideline audits is that while the Skill outputs precise file:line findings for semantic HTML and color contrast, complex keyboard navigation flows may still require manual verification.