web-design-guidelines

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

Review web interface code for WCAG 2.2 AA, shadcn/ui, and Tailwind CSS v4 compliance.

1|Updated Mar 16, 2026

Search Tags:#accessibility #react #shadcn/ui #tailwind css #web design #ui audit

Ready to run

npx skills add https://github.com/michelve/hugin-cowork --skill web-design-guidelines-michelve

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill ensures your web UI adheres to established best practices for accessibility, component usage, and modern styling, preventing common pitfalls and improving overall quality.

Core Features & Use Cases

Accessibility Audits: Checks for WCAG 2.2 AA compliance, including ARIA attributes, focus management, and target sizes.
Component Best Practices: Verifies the correct usage of shadcn/ui components and patterns.
Styling Compliance: Ensures adherence to Tailwind CSS v4 conventions and semantic theming.
Use Case: Before merging a new feature, run this skill on your React components to catch accessibility issues, incorrect shadcn/ui implementation, and Tailwind CSS anti-patterns.

Quick Start

Review the file src/components/UserProfile.tsx for Web Interface Guidelines compliance.

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 WCAG 2.2 AA accessibility compliance?▼

Audit React components for WCAG 2.2 AA compliance by reviewing interface code to check ARIA attributes, focus management, and target sizes. This skill analyzes files against accessibility rules and outputs findings in a terse file:line format.

How do I check shadcn/ui component usage and Tailwind CSS v4 styling for best practices?▼

Check shadcn/ui component usage and Tailwind CSS v4 styling by reviewing web interface code against best practice rules. The audit verifies correct component patterns and ensures adherence to Tailwind CSS v4 conventions and semantic theming.

What is the best way to catch UI accessibility and styling issues before merging a React feature?▼

The best way to catch UI accessibility and styling issues before merging is to run a web interface guidelines audit on your React components. It identifies accessibility failures, incorrect shadcn/ui implementation, and Tailwind CSS anti-patterns.

Can I use this UI audit skill with my existing React and Tailwind CSS project?▼

You can use this UI audit skill with existing React and Tailwind CSS projects. It analyzes your web interface code against established guidelines for accessibility, component usage, and modern styling without requiring additional dependencies.

What format does the UI audit output use for reporting guideline violations?▼

The UI audit outputs guideline violations in a terse file:line format. This directly maps each finding for accessibility, component usage, and styling compliance to the exact location in your web interface code.

When should I run a web interface guidelines audit on my codebase?▼

Run a web interface guidelines audit whenever you need to ensure web UI adheres to best practices for accessibility, component usage, and modern styling. It prevents common pitfalls and improves overall quality before merging new features.