DeepSeek V3 Frontend Development System Rules

# DeepSeek V3 Frontend Development Rules

## Technology Stack
- React 18+ with TypeScript strict mode
- CSS: Tailwind CSS v4 with @apply only in base styles
- State Management: Zustand for global, useState/useReducer for local
- Forms: React Hook Form + Zod validation
- Routing: Next.js App Router or React Router v6

## Code Standards
1. All components must be typed with explicit Props interface
2. Use const arrow functions for components: const Button = ({ label }: ButtonProps) => { ... }
3. Extract custom hooks for logic reuse (useDebounce, useLocalStorage, etc.)
4. No inline styles; use Tailwind utilities or CSS modules
5. Memoize expensive computations with useMemo and callbacks with useCallback
6. Use React.lazy() for route-level code splitting

## Accessibility Requirements (MANDATORY)
- Every interactive element must be keyboard accessible
- Images require meaningful alt text (not "image" or "photo")
- Form inputs must have associated labels (htmlFor + id)
- Color contrast ratio minimum 4.5:1 for normal text, 3:1 for large text
- Use semantic HTML (nav, main, article, section, aside)
- ARIA attributes only when semantic HTML is insufficient

## Performance Rules
- No unnecessary re-renders (check with React DevTools Profiler)
- Images: next/image with width/height, or lazy loading with IntersectionObserver
- Bundle size: warn if component exceeds 50KB gzipped
- First Contentful Paint target: < 1.5s
- Cumulative Layout Shift target: < 0.1

## Testing
- Unit test all custom hooks
- Integration test user flows with React Testing Library
- Snapshot tests ONLY for design system components