skills.rest
ehmo
ehmoCOMMUNITY
Explore all skills by this author →
Website𝕏@synopsiGitHub

web-design-guidelines

Enforce WCAG 2.2, ARIA, and responsive design guidelines in web UI reviews.

486|29|Updated Feb 1, 2026
Search Tags:#design#ARIA#WCAG#web accessibility#responsive-design#semantic-html
One-click install
npx skills add https://github.com/ehmo/platform-design-skills --skill web-design-guidelines-ehmo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ehmo/platform-design-skills/tree/main/skills/web
Command: npx skills add https://github.com/ehmo/platform-design-skills --skill web-design-guidelines-ehmo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies web accessibility, responsive design, and semantic HTML guidelines to guide UI development.

Core Features & Use Cases

  • Framework-agnostic rules covering WCAG 2.2, semantic HTML, ARIA best practices, contrast, typography, theming, and navigation.
  • Use when auditing web interfaces, reviewing PRs, or validating components for accessibility and responsiveness.
  • Example: evaluate a page against WCAG criteria, generate a remediation checklist, and provide concrete code snippets or references.

Quick Start

Load the web-design-guidelines skill into your AI assistant and provide the HTML or URL to be analyzed; the AI will return accessibility and responsive-design checks, recommendations, and a prioritized task list.

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 my web UI for WCAG 2.2 compliance and ARIA best practices?▼

To audit web accessibility and WCAG 2.2 compliance, load your HTML or URL into an AI assistant with these guidelines to receive ARIA checks, contrast targets, and a prioritized remediation checklist.

How do I check responsive design behavior when reviewing PRs for web components?▼

Checking responsive design behavior during PR reviews involves validating component HTML and CSS against framework-agnostic rules, ensuring proper semantic structure and adaptable UI behavior across different screen sizes.

What is semantic HTML's role in enforcing web accessibility guidelines?▼

Semantic HTML provides the foundational structure required for web accessibility, enabling proper screen reader navigation and reducing the need for complex ARIA overrides when building or refactoring modern web interfaces.

Can I use these web accessibility guidelines to refactor existing JavaScript components?▼

Yes, you can apply these guidelines to refactor existing JavaScript components by validating their HTML output, correcting ARIA implementations, and generating concrete code snippets to fix accessibility and contrast issues.

Does this web design guideline tool work with specific frontend frameworks?▼

These web design guidelines are framework-agnostic, meaning they evaluate raw HTML, CSS, and JavaScript outputs directly without depending on any specific frontend framework or external libraries.

Why does my web interface fail color-contrast targets during accessibility audits?▼

Web interfaces fail color-contrast targets when foreground and background colors lack sufficient luminance difference, requiring CSS adjustments to meet WCAG 2.2 accessibility criteria for visual readability.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

accesslint-audit

Audit live URLs or HTML files for WCAG 2.2 accessibility issues.

Community
Advanced
ryan-nguyen-01ryan-nguyen-01
4

skill-ui-accessibility

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

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
thiagoooo34252thiagoooo34252
1

engineer-accessibility

Scan web applications for WCAG 2.2 violations using axe-core.

Community
Advanced