skills.rest
mbriggsy
mbriggsyCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

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

Related Skills

Explore More Design & Creative Skills→
kvokovkvokov
4

uiux

Update design-system tokens and component overrides for React, Next.js, Tailwind, React Native, and Flutter.

Community
Advanced
Shaarav4795Shaarav4795

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus, contrast, and forms.

Community
Intermediate
alongor666alongor666
1

accessibility-standards

Implement WCAG 2.1 AA accessibility standards in Vue 3 applications.

Community
Basic
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced