skills.rest
dirnbauer
dirnbauerCOMMUNITY
Explore all skills by this author →
Website𝕏@KDirnbauerGitHub

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

Related Skills

Explore More Design & Creative Skills→
jewbetchajewbetcha
115

web-design-guidelines

Automate UI compliance checks against Web Interface Guidelines.

Community
Basic
FindMalekFindMalek
9

web-design-guidelines

Audits frontend components for compliance with Web Interface Guidelines.

Community
Intermediate
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual

Generate and verify visual snapshots for frontend component states.

Community
Advanced
NVIDIANVIDIA
33

accessibility

Automate accessibility audits for web components using ESLint and axe-core.

Official
Advanced