ui-styling

The ui-styling skill provides a professional, scalable framework for developing modern React interfaces. It enforces a component-first philosophy, ensuring that UI primitives like those from shadcn/ui are never used directly in feature code, but are instead wrapped in custom, reusable components. This approach establishes a single source of truth, drastically improving maintainability and ensuring consistent UX across complex applications. The skill is designed for developers building design systems, complex forms, or responsive dashboards who need to balance rapid prototyping with long-term codebase health.

• Advanced component composition using React, Tailwind CSS utility classes, and CVA (Class Variance Authority) for highly scalable variant management.

• Form integration workflows utilizing React Hook Form combined with Zod validation schemas for robust type-safe input handling.

• Mobile-first responsive design patterns, including touch-friendly component sizing and adaptive layouts using breakpoints.

• Comprehensive styling management via CSS variables, theming support, and modular file organization for primitives, custom wrappers, and feature-specific compositions.

• Accessibility-focused implementation based on Radix UI primitives, ensuring screen reader compatibility and keyboard navigation standards.

• Always wrap shadcn/ui primitives in custom components to allow for central styling updates and consistent props interface.

• Utilize the provided component organization structure: keep primitives in components/ui/, reuse logic in components/custom/, and isolate domain logic in components/features/.

• Prioritize touch-friendly minimum heights (min-h-11) for interactive elements to improve mobile usability.

• For complex form requirements, reference the integrated validation patterns using Zod and React Hook Form to ensure data consistency.

• When implementing polymorphic components, leverage the asChild pattern to maintain flexible rendering targets while preserving accessibility attributes.