web-design-guidelines

Name: web-design-guidelines
Availability: InStock
Author: mbriggsy

Audit React UI code against Web Interface Guidelines for accessibility and quality.

Updated Feb 22, 2026

Search Tags:#accessibility #a11y #frontend #react #usability #web-standards #ui-guidelines

Ready to run

npx skills add https://github.com/mbriggsy/ai-learning-journey --skill web-design-guidelines-mbriggsy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mbriggsy/ai-learning-journey/tree/main/projects/the-back-nine/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/mbriggsy/ai-learning-journey --skill web-design-guidelines-mbriggsy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures UI code adheres to established Web Interface Guidelines, surfacing accessibility, focus management, typography, animation, performance, and content issues before they reach users.

Core Features & Use Cases

Accessibility rules: verify aria-labels, keyboard navigation, semantic HTML, alt text, and skip links.
Focus and interaction: ensure visible focus states, proper keyboard handlers, and avoidance of outline-none without replacements.
Content and typography: check headings, quotes, whitespace, hyphenation, and language consistency; ensure image sizing and loading priorities.
Performance and layout: flag layout thrashes, excessive transitions, and missing preconnects/resource hints.
Use Case: use this guideline when reviewing UI changes across components, pages, or patterns before user-facing deployment.

Quick Start

Audit the current UI files against the guidelines and report any accessibility or quality issues.

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 React components for accessibility and UI quality?▼

Audit React components for accessibility by checking aria-labels, keyboard navigation, semantic HTML, and focus styles against documented Web Interface Guidelines. This process verifies interactive surfaces for accessibility, typography, performance, and content consistency before deployment.

What accessibility checks should I run on my frontend UI code?▼

Run accessibility checks on frontend UI code to verify aria-labels, keyboard navigation, semantic HTML, alt text, skip links, and visible focus states. Ensure proper keyboard handlers exist and avoid outline-none without accessible replacements.

Does this UI audit work with plain HTML or only React components?▼

This UI audit applies to React components, pages, and interactive surfaces across projects. It enforces checks for semantic HTML, aria labels, and keyboard interactions per documented web standards, ensuring consistent typography and accessibility.

How do I check my web app for typography and performance issues?▼

Check web apps for typography and performance issues by reviewing headings, quotes, whitespace, hyphenation, and language consistency. The audit also flags layout thrashes, excessive transitions, missing preconnects, and improper image loading priorities.

Why does my interactive UI surface fail keyboard interaction guidelines?▼

Interactive UI surfaces fail keyboard interaction guidelines when they lack proper keyboard handlers, have missing visible focus states, or use outline-none without replacements. Auditing verifies semantic HTML and proper focus management to resolve these usability issues.