frontend-design

Structure scalable React components by defining reusable, variant-driven component architectures using shadcn/ui and Tailwind CSS. This approach ensures maintainability and consistency across diverse user interfaces by standardizing UI patterns and enforcing strict TypeScript typing throughout the component hierarchy.

Manage state in a Vite and React application by utilizing hooks and context for local and global state, while efficiently handling server state with TanStack Query. This strategy ensures robust data handling, minimizes unnecessary re-renders, and maintains high performance across feature-rich interfaces.

Implement accessible form validation by integrating react-hook-form with zod for schema validation and applying ARIA roles. This establishes best practices for accessible forms, ensuring robust user input validation while maintaining compliance with accessibility standards across diverse user needs.

Yes, you can optimize performance in large React applications by applying strategies like code splitting, virtualization, and memoization. These techniques target high-performance UIs by reducing initial load times and preventing unnecessary component re-renders during complex user interactions.

You should reconsider using Tailwind CSS for component design when a project requires highly isolated, framework-agnostic custom styles without utility class dependencies. The provided guidelines emphasize variant-driven components and Tailwind utility patterns, which may not align with strict encapsulated CSS architectures.

The guide primarily supports efficient state management using hooks and context for local and global state, alongside TanStack Query for server state. While it leverages these specific tools for scalable UI solutions, basic local state can be handled purely with built-in React hooks.