skills.rest
Khoatran1999
Khoatran1999COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI code violations against Web Interface Guidelines and propose remediation steps.

Updated Jan 24, 2026
Search Tags:#accessibility#a11y#semantic-html#design-review#color-contrast#ui-guidelines
One-click install
npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill web-design-guidelines-khoatran1999
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Khoatran1999/aquarium-commerce/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/Khoatran1999/aquarium-commerce --skill web-design-guidelines-khoatran1999

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guideline-checking skill helps teams ensure UI code conforms to Web Interface Guidelines, improving accessibility, usability, and consistency across products.

Core Features & Use Cases

  • Guideline Conformance: Automatically assess UI components, layouts, contrast, semantics, and keyboard accessibility for guideline compliance.
  • Audit & Remediation: Identify violations and provide concrete remediation guidance to improve accessibility and UX.
  • Use Case: Review a UI library or page set to verify accessible labels, color contrast AA compliance, semantic HTML usage, and responsive behavior.

Quick Start

Run a UI audit on the provided project and report any guideline violations.

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 to meet Web Interface Guidelines?▼

To audit UI code for Web Interface Guidelines, run an automated review against UI components, styles, and markup to identify accessibility, semantic HTML, and usability violations, generating actionable remediation steps.

What is semantic HTML and color contrast AA compliance checking for web design?▼

Semantic HTML and color contrast AA compliance checking is the process of verifying UI markup and styles against accessibility standards to ensure usable interfaces, identifying violations and providing remediation guidance for improved UX.

How do I fix accessibility violations in a UI library?▼

Fix accessibility violations in a UI library by auditing components for accessible labels, keyboard accessibility, and contrast, then applying the concrete remediation steps provided to correct markup and style deficiencies.

Can I use an automated design review to check keyboard accessibility and responsive behavior?▼

Yes, you can use an automated design review to check keyboard accessibility and responsive behavior, assessing layouts and components against guidelines to return actionable results for non-compliant markup.

Does this UI audit tool check color contrast and a11y compliance for multiple pages?▼

Yes, this UI audit tool checks color contrast and a11y compliance across a page set, verifying accessible labels and semantic correctness to return actionable remediation guidance for each violation found.

What are the limitations of automated UI code conformance checking?▼

Automated UI code conformance checking identifies structural and stylistic violations like missing semantic HTML or insufficient color contrast, but may require manual review to validate complex usability or keyboard accessibility edge cases.

Related Skills

Explore More Design & Creative Skills→
cattboycattboy

design-html

Convert approved design specs into semantic HTML and CSS with responsive layouts.

Community
Intermediate
Sir-chawakornSir-chawakorn
9

audit-accessibility-wcag

Audit and remediate JSX and HTML for WCAG 2.2 AA accessibility compliance.

Community
Advanced
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

Analyze web UI structure, semantics, and ARIA usage for accessibility gaps.

Community
Advanced