skills.rest
BenavidesMichael
BenavidesMichaelCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Updated Jan 4, 2026
Search Tags:#ui#accessibility#audit#compliance#web#design-guidelines
One-click install
npx skills add https://github.com/BenavidesMichael/portfolio --skill web-design-guidelines-benavidesmichael
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/BenavidesMichael/portfolio/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/BenavidesMichael/portfolio --skill web-design-guidelines-benavidesmichael

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review UI code for Web Interface Guidelines compliance and help teams build accessible, consistent, and high-quality interfaces.

Core Features & Use Cases

  • Guideline Compliance Check: Scan UI files and components to verify adherence to the latest Web Interface Guidelines.
  • Accessibility Audits: Identify issues related to color contrast, semantic HTML, keyboard navigation, and ARIA usage.
  • Use Case: When asked to review a site's UI for accessibility or design best practices, run an audit against current guidelines and report findings.

Quick Start

Provide the UI files or patterns to review and let the skill fetch the latest guidelines and apply them to your codebase.

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 design compliance?▼

To audit UI code for accessibility and design compliance, provide your UI files or patterns. The skill fetches the latest Web Interface Guidelines and applies them to your codebase, outputting findings in a file:line format.

What specific accessibility issues does a UI code audit check for?▼

A UI code audit checks for color contrast, semantic HTML structure, keyboard navigation, and ARIA usage accessibility issues. It also evaluates responsive behavior and overall design quality against current Web Interface Guidelines.

Can I scan individual components or do I need to audit an entire site?▼

You can scan individual components, individual pages, or entire sites. The audit applies the latest Web Interface Guidelines to whatever UI files or patterns you specify, identifying accessibility and design compliance issues.

How does the accessibility audit stay current with web design guidelines?▼

The accessibility audit stays current by fetching the latest Web Interface Guidelines directly from the source URL. This ensures every scan evaluates your UI code against the most up-to-date accessibility and design compliance standards.

What format are accessibility and design compliance findings reported in?▼

Accessibility and design compliance findings are reported in a file:line format. This pinpoints exactly where issues exist in your UI code, highlighting problems with color contrast, semantic structure, and responsive behavior.

Related Skills

Explore More Design & Creative Skills→
julianromlijulianromli
141

web-design-guidelines

Audit UI code against Web Interface Guidelines and report non-conformities in file:line format.

Community
Intermediate
Tristan578Tristan578
5

web-accessibility

Implement WCAG 2.1-compliant web interfaces with semantic HTML and ARIA.

Community
Advanced
mbdeatonmbdeaton

epic-ui-guidelines

Guide UI/UX best practices, accessibility, and component usage in Epic Stack.

Community
Intermediate
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced