web-design-guidelines

Audit websites for accessibility, UX, and performance compliance across defined categories.

62|9|Updated Jan 16, 2026

Search Tags:#accessibility #a11y #wcag #ux #web-design #a11y-testing

Ready to run

npx skills add https://github.com/AsyrafHussin/agent-skills --skill web-design-guidelines-asyrafhussin

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web designers and developers often struggle to ensure UI/UX quality, accessibility, and performance across websites. This guide consolidates best practices to help teams build inclusive, fast, and usable interfaces.

Core Features & Use Cases

Accessibility: Semantic HTML, ARIA labeling, keyboard navigation, focus management, color contrast, and skip links guidelines for product teams.
Form usability & validation: Proper labeling, autocomplete, error handling, and accessible feedback.
Performance & motion: Guidance on image optimization, lazy loading, and motion considerations, including reduced motion support.
Design polish: Typography, touch targets, internationalization, and accessibility testing.
Use Case: Audit a web page for WCAG compliance and generate a prioritized remediation plan.

Quick Start

Ask Claude to audit a page for accessibility, UX, and performance best practices.

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 a web page for WCAG compliance and UX issues?▼

To audit a web page for WCAG compliance and UX issues, you can analyze its design for semantic HTML, ARIA labeling, keyboard navigation, and color contrast. This generates structured audit findings across accessibility, form usability, motion, and performance categories.

What is the best way to check web accessibility and keyboard navigation?▼

The best way to check web accessibility and keyboard navigation is by enforcing checks for focus management, skip links, and ARIA labeling. This process evaluates interface inclusivity and produces a prioritized remediation plan for product teams.

How do I review form usability and validation for accessible feedback?▼

Reviewing form usability and validation for accessible feedback involves checking proper labeling, autocomplete implementation, and error handling. This ensures forms meet usability standards and deliver accessible feedback to all users.

Can I use this to audit performance best practices and responsive typography?▼

Yes, you can use this to audit performance best practices and responsive typography. It enforces checks for image optimization, lazy loading, and responsive typography, delivering structured findings for design polish and performance.

Does this web design audit support reduced motion and touch target guidelines?▼

Yes, this web design audit supports reduced motion and touch target guidelines. It provides guidance on motion considerations including reduced motion support, alongside touch target sizing and internationalization for design polish.

When do I need a structured accessibility audit for my website?▼

You need a structured accessibility audit for your website during UI reviews, design critiques, or code reviews. It enforces checks for semantic HTML and ARIA labeling, delivering categorized findings to help teams build inclusive interfaces.