skills.rest
javi2481
javi2481COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and usability gaps.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#a11y#design-review#ux-audit#web-guidelines
One-click install
npx skills add https://github.com/javi2481/proyecto-data-x --skill web-design-guidelines-javi2481
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/javi2481/proyecto-data-x/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/javi2481/proyecto-data-x --skill web-design-guidelines-javi2481

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure that web UI implementations comply with established Web Interface Guidelines, reducing accessibility and usability risks by providing automated review feedback.

Core Features & Use Cases

  • Accessibility checks: Verify semantic HTML, contrast ratios, keyboard navigation, focus management, and ARIA usage across UI components.
  • Consistency & UX validation: Inspect typography, spacing, color tokens, and component usage to ensure design coherence with guidelines.
  • Use Case: When auditing a design system or a live interface, run reviews to surface non-conforming patterns and propose fixes.

Quick Start

Provide the UI files or patterns you want reviewed and I will compare them against the latest Web Interface Guidelines.

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 and usability gaps?▼

To audit UI code for accessibility and usability gaps, provide your UI files or patterns for review. The system fetches the latest Web Interface Guidelines, applies the rules to your code, and reports findings in a concise, structured format.

What is checked during a web interface design review?▼

A web interface design review checks semantic HTML, contrast ratios, keyboard navigation, focus management, and ARIA usage. It also inspects typography, spacing, color tokens, and component usage to ensure design coherence with established guidelines.

Can I use this for a design system UX validation?▼

Yes, you can use this for design system UX validation. It is applicable to UI code reviews, accessibility audits, UX validations, and design-quality assessments across web interfaces to surface non-conforming patterns and propose fixes.

How do I run an accessibility audit on specific UI files?▼

To run an accessibility audit on specific UI files, provide the files or patterns you want reviewed. The system will read the specified files, compare them against the latest Web Interface Guidelines, and report non-conforming patterns.

Do I need to manually provide the Web Interface Guidelines?▼

No, you do not need to manually provide the Web Interface Guidelines. The system requires fetching the latest guidelines automatically to ensure your UI code is reviewed against the most current accessibility and usability standards.

Related Skills

Explore More Design & Creative Skills→
yp717yp717

web-design-guidelines

Review UI code against fetched Web Interface Guidelines for compliance.

Community
Intermediate
chipoto69chipoto69
1

web-design-guidelines

Validate web UI code against Web Interface Guidelines and report violations.

Community
Intermediate
IFIR649IFIR649

visual-design-foundations

Build cohesive visual design systems with typography, color, spacing, and iconography tokens.

Community
Advanced
nimadorostkarnimadorostkar
25

accessibility

Audit web interfaces for WCAG 2.2 AA conformance.

Community
Advanced