web-design-guidelines

Analyze frontend interfaces for accessibility, semantic HTML, and responsive design issues.

33|6|Updated Jan 2, 2026

Search Tags:#accessibility #ARIA #WCAG #audit #responsive-design #semantic-html #keyboard-navigation

Ready to run

npx skills add https://github.com/dirnbauer/webconsulting-skills --skill web-design-guidelines-dirnbauer

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Review web interfaces for accessibility, usability, semantic HTML, ARIA patterns, keyboard navigation, and responsive design to ensure WCAG compliance and high-quality user experiences.

Core Features & Use Cases

Accessibility checks and color-contrast validation across components.
Semantic HTML and ARIA pattern verification to improve screen-reader support.
Keyboard navigation and focus management auditing for keyboard-first interfaces.
Responsive design evaluation for mobile and desktop parity.
Use case: QA teams auditing a web app during a design-review cycle to catch accessibility regressions early.

Quick Start

Use this skill to inspect the frontend codebase of a project and report accessibility and semantic HTML issues in a concise file:line format.

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 app for WCAG compliance and accessibility issues?▼

To audit web apps for WCAG compliance, you can analyze frontend codebases to identify accessibility regressions, validating color contrast, semantic HTML, ARIA patterns, and keyboard navigation using static analysis.

How do I check semantic HTML and ARIA patterns for screen-reader support?▼

Checking semantic HTML and ARIA patterns involves reviewing frontend interfaces to verify proper element usage and roles, ensuring screen readers correctly interpret components and report issues in a concise file:line format.

Can I validate responsive design and mobile parity across component libraries?▼

Yes, you can evaluate responsive design across component libraries and design systems, assessing mobile and desktop parity by applying static analysis and best-practice guidelines to frontend interfaces.

What is the best way to automate keyboard navigation and focus management checks?▼

Automating keyboard navigation and focus management checks is best achieved by auditing keyboard-first interfaces during pull requests, catching accessibility regressions early in the design-review cycle.

Does this accessibility audit require any specific testing frameworks or dependencies?▼

No specific testing frameworks or dependencies are required, as the accessibility audit applies static analysis and best-practice guidelines directly to web app codebases and UI reviews without external components.

When should I use an automated UI review for accessibility instead of manual testing?▼

Use an automated UI review for accessibility during design-review cycles or pull requests to catch regressions early, whereas manual testing remains necessary for complex user experience validations.