skills.rest
EdWrld
EdWrldCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/EdWrld/config.files --skill web-design-guidelines-edwrld
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Jackliu-miaoziJackliu-miaozi

web-design-guidelines

Enforce Vercel web UI guideline compliance across HTML/CSS/JS codebases.

Community
Basic
NotysotyNotysoty
9

Accessibility Audit Helper

Audit HTML, JSX, and React components for WCAG 2.1 violations with fixes.

Community
Intermediate
ilamanovilamanov

frontend-patterns

Guide UI component development with frontend and web design best practices for forms, buttons, and modals.

Community
Advanced
darthlinuxerdarthlinuxer

web-design-guidelines

Audit web frontend files against Web Interface Guidelines and output file:line findings.

Community
Intermediate