web-design-guidelines

Audit HTML, CSS, and JS UI code against Web Interface Guidelines.

Updated Aug 12, 2025

Search Tags:#ui #accessibility #a11y #ux #web-design #semantic-html #aria

Ready to run

npx skills add https://github.com/EdWrld/config.files --skill web-design-guidelines-edwrld

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/EdWrld/config.files/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/EdWrld/config.files --skill web-design-guidelines-edwrld

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code adheres to Web Interface Guidelines by identifying accessibility, usability, and semantic issues across web interfaces.

Core Features & Use Cases

Accessibility checks for forms, buttons, images, and navigation.
Semantic and structure validation to promote proper HTML and predictable keyboard navigation.
Guidance on focus states, responsive behavior, and content readability with real-world examples.
Use Case: QA engineer validates a new component library against guidelines and receives actionable fixes.

Quick Start

Provide the UI files to review (HTML, CSS, and JS) and request a compliance report detailing issues and fixes.

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 HTML and CSS for accessibility issues?▼

To audit HTML and CSS for accessibility issues, provide your UI files to receive a compliance report. The analysis identifies semantic, usability, and a11y problems across components and outputs a concise list with actionable fixes.

How do I check if my web UI follows semantic HTML and ARIA guidelines?▼

Checking if your web UI follows semantic HTML and ARIA guidelines involves validating your code against Web Interface Guidelines. The audit reviews HTML, CSS, and JS assets to detect structural issues and provides concrete fixes for predictable keyboard navigation.

Can I validate a component library for usability and accessibility compliance?▼

Yes, you can validate a component library for usability and accessibility compliance. The audit checks forms, buttons, images, and navigation against web design guidelines, returning a findings list with actionable guidance to resolve issues.

What is the best way to find focus state and responsive behavior issues in web design?▼

The best way to find focus state and responsive behavior issues in web design is to audit your UI code against established guidelines. The process evaluates content readability and interaction patterns, generating concrete fixes and real-world examples.

Does this accessibility audit work with plain JavaScript and HTML assets?▼

Yes, this accessibility audit works with plain JavaScript and HTML assets. It evaluates HTML, CSS, and JS files across components, pages, and patterns to identify semantic and usability issues, outputting a concise findings list with actionable guidance.