skills.rest
hoanghd218
hoanghd218COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI compliance gaps in code against the Web Interface Guidelines.

1|Updated Jan 25, 2026
Search Tags:#ui#accessibility#a11y#usability#design-review#web-guidelines#component-review
One-click install
npx skills add https://github.com/hoanghd218/tranvanhoang.com --skill web-design-guidelines-hoanghd218
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hoanghd218/tranvanhoang.com/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/hoanghd218/tranvanhoang.com --skill web-design-guidelines-hoanghd218

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify UI compliance gaps in code against the Web Interface Guidelines to help teams improve accessibility, usability, and visual consistency.

Core Features & Use Cases

  • Automated UI code review against the latest Web Interface Guidelines to surface accessibility and UX issues.
  • Component and page-level checks for contrast, keyboard navigation, aria attributes, and semantic structure.
  • Use Case: When auditing a new design or performing a UI refresh, run this skill against your codebase to generate a concise compliance report.

Quick Start

Provide the UI files you want reviewed and allow the system to fetch the latest guidelines to generate a compliance 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 usability compliance?▼

Audit UI code by providing your HTML, CSS, or framework template files to check against the latest Web Interface Guidelines. The system identifies compliance gaps in accessibility, keyboard navigation, and semantic structure, outputting findings in a standard file:line format.

What does a web interface guidelines compliance check cover?▼

A web interface guidelines compliance check covers component and page-level UI elements including contrast, keyboard navigation, aria attributes, and semantic structure. It evaluates your code against the latest guidelines to identify accessibility and visual consistency issues.

Can I use this UI review tool with framework templates?▼

Yes, this UI review tool works with framework templates alongside standard HTML and CSS files. It applies component and page-wide UI checks to identify compliance gaps across various web project structures.

How do I check aria attributes and semantic structure in my components?▼

Check aria attributes and semantic structure by running a UI code review against the Web Interface Guidelines. The system reads your target component files and outputs findings in a standard file:line format to pinpoint exact compliance gaps.

What is the best way to generate an accessibility compliance report for a web project?▼

The best way to generate an accessibility compliance report is to run an automated UI code review against the latest Web Interface Guidelines. Provide your project files, and the system outputs a concise report detailing contrast, navigation, and semantic issues.

Related Skills

Explore More Design & Creative Skills→
omeragaakbasomeragaakbas

web-design-guidelines

Identify UI code violations in HTML, CSS, and JavaScript against Web Interface Guidelines.

Community
Intermediate
baskarajatibaskarajati

web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations in file:line format.

Community
Intermediate
t-stringst-strings

Global Coding Style

Enforce global coding style across codebases with linters and formatters.

Official
Basic
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate