react-skills

• React 18.2 with StrictMode
• TypeScript 5.2+ for type safety
• TanStack Query v5 for server state management
• React Router v7 for client-side routing
• TailwindCSS with tailwind-merge and clsx for styling
• Radix UI primitives for accessible components
• Vite for build tooling
• Vitest + React Testing Library for testing

```

designer/src/

api/ # API service functions

components/ # React components (feature-organized)

contexts/ # React context providers

hooks/ # Custom hooks

lib/ # Utility functions (cn, etc.)

types/ # TypeScript type definitions

utils/ # Helper functions

test/ # Test utilities and mocks

```

Component Composition

• Use composition over inheritance
• Prefer small, focused components
• Use forwardRef for components that wrap DOM elements
• Apply displayName to forwardRef components for DevTools

State Management

• Local UI state: useState, useReducer
• Server state: TanStack Query (useQuery, useMutation)
• Shared UI state: React Context with custom hooks
• Form state: Controlled components with validation

Hooks

• Follow Rules of Hooks (top-level, consistent order)
• Create custom hooks for reusable logic
• Use query key factories for TanStack Query
• Memoize expensive computations with useMemo
• Stabilize callbacks with useCallback

Styling

• Use cn() from lib/utils to merge Tailwind classes
• Use cva (class-variance-authority) for component variants
• Follow dark mode conventions with dark: prefix

• [components.md](./components.md) - Component patterns
• [hooks.md](./hooks.md) - Hook patterns and rules
• [state.md](./state.md) - State management patterns
• [performance.md](./performance.md) - Performance optimization
• [security.md](./security.md) - Security best practices

```typescript

// Utility for merging Tailwind classes

import { cn } from '@/lib/utils'

cn('base-class', condition && 'conditional-class', className)

// Query key factory pattern

export const projectKeys = {

all: ['projects'] as const,

lists: () => [...projectKeys.all, 'list'] as const,

list: (ns: string) => [...projectKeys.lists(), ns] as const,

}

// Context with validation hook

const MyContext = createContext(undefined)

export function useMyContext() {

const ctx = useContext(MyContext)

if (!ctx) throw new Error('useMyContext must be within MyProvider')

return ctx

}

```

```typescript

import { renderWithProviders } from '@/test/utils'

import { screen } from '@testing-library/react'

test('renders component', () => {

renderWithProviders()

expect(screen.getByText('Hello')).toBeInTheDocument()

})

```