Does this skill support the latest Tailwind CSS versions?

Yes, it is specifically optimized for Tailwind CSS v4 patterns, including custom design tokens and the latest utility class syntax.

How does this skill handle web accessibility?

The skill follows WCAG 2.1 AA standards by default, implementing semantic HTML, ARIA attributes, focus management, and keyboard navigation.

Is it limited to specific React frameworks?

While it excels with Vite and React environments using shadcn/ui, the design principles and Tailwind patterns are applicable across the entire React ecosystem.

Can I use this for complex form states?

Absolutely. It utilizes TanStack Form combined with Zod for robust, type-safe validation and complex form state management.

Professional UI/UX Designer

Name: Professional UI/UX Designer
Author: marcioaltoe

bymarcioaltoe

•

Design Tools

Designs and implements production-ready React interfaces using shadcn/ui, Tailwind CSS, and modern accessibility standards.

About

This skill transforms Claude into an expert UI/UX designer specialized in the modern React ecosystem, specifically leveraging shadcn/ui and Tailwind CSS. It provides domain-specific guidance for building responsive, accessible (WCAG 2.1 AA), and performant user interfaces, ranging from individual component architecture to full design systems. By incorporating best practices for dark mode, animations with Framer Motion, and robust form handling with TanStack Form, this skill ensures that generated code is not only visually stunning but also maintainable, responsive, and production-grade.

Key Features

Mobile-first responsive layouts using Tailwind CSS v4 utility classes
Advanced form architecture with TanStack Form and Zod validation
Seamless dark mode integration using CSS custom properties and design tokens
7 GitHub stars
WCAG 2.1 AA accessibility compliance with proper ARIA and keyboard support
Expert implementation of shadcn/ui and Radix UI component patterns

Use Cases

Building a custom component library based on shadcn/ui primitives
Designing complex, accessible dashboard layouts with interactive data visualizations
Refactoring legacy CSS into a modern, responsive Tailwind design system

About

Key Features

Mobile-first responsive layouts using Tailwind CSS v4 utility classes
Advanced form architecture with TanStack Form and Zod validation
Seamless dark mode integration using CSS custom properties and design tokens
7 GitHub stars
WCAG 2.1 AA accessibility compliance with proper ARIA and keyboard support
Expert implementation of shadcn/ui and Radix UI component patterns

Use Cases

Building a custom component library based on shadcn/ui primitives
Designing complex, accessible dashboard layouts with interactive data visualizations
Refactoring legacy CSS into a modern, responsive Tailwind design system