skills.rest
michelve
michelveCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

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

Related Skills

Explore More Design & Creative Skills→
beemanbeeman
12

heroui-react

Implement HeroUI v3 components in React with Tailwind CSS v4 theming.

Community
Intermediate
devyan18devyan18

web-design-guidelines

Identify UI compliance issues with Web Interface Guidelines in file:line format.

Community
Intermediate
DITEKmaxDITEKmax

baseline-ui

Enforce Tailwind CSS UI and styling constraints for accessibility, animation, typography, and layout.

Community
Intermediate
angelgarciasolorzanoangelgarciasolorzano

shadcn

Generate design system guidelines for Shadcn UI components with WCAG 2.2 AA compliance.

Community
Advanced