verify-frontend-ui

To verify frontend UI components against shadcn/ui patterns and Tailwind CSS best practices, this Skill automates the validation of your code against design tokens, semantic classes, and established technical standards to ensure high-quality user experiences.

You can audit React components for ARIA roles and keyboard navigation accessibility by running this Skill, which checks for proper ARIA labels, roles, keyboard navigation, and focus management to enforce accessibility guidelines.

Yes, this UI verification tool checks dark mode compatibility and mobile responsiveness by validating mobile-first design principles and theming structures to ensure your frontend adapts correctly across different screen sizes and color schemes.

The best way to ensure design system compliance with HSL CSS variables and Tailwind semantic classes is to use this Skill, which automatically verifies that your frontend components adhere to established design tokens and styling conventions.

Yes, you can use this tool to check your Button.tsx component after modifying tailwind.config.ts, as it is specifically designed to confirm that component updates and theme modifications maintain accessibility, dark mode support, and design system adherence.

Frontend UI verification fails when testing responsiveness and theming if your components do not properly implement mobile-first design principles, lack dark mode compatibility, or deviate from the expected Tailwind CSS and shadcn/ui dark mode patterns.