tailwind-react-guidelineslisted
Install: claude install-skill AIBiz-Automatyzacje/claude-cron
# Tailwind React Guidelines
## Cel
Przewodnik dla Vite + React 19 SPA - nowoczesny stack zgodny ze standardami Marzec 2026.
## Kiedy Używać Tego Skilla
- Tworzenie nowych komponentów React
- Stylowanie z TailwindCSS v4 + shadcn/ui
- Data fetching z React Query
- Formularze z React Hook Form + Zod
- Testowanie z Vitest + React Testing Library + MSW
- Routing z React Router
- Obsługa błędów i loading states
- Optymalizacja wydajności
---
## Quick Start Checklist
### Nowy Komponent
- [ ] TypeScript interface dla props
- [ ] Funkcja (nie `React.FC`)
- [ ] Ref jako prop (nie forwardRef) - React 19
- [ ] Import aliasy: `@/components`, `@/lib`, `@/hooks`
- [ ] TailwindCSS utility classes
- [ ] Default export na dole (dla lazy loading)
### Memoizacja
- [ ] **React Compiler 1.0 (rekomendowany):** Nie używaj useCallback/useMemo - Compiler optymalizuje automatycznie
- [ ] **Bez React Compiler:** useCallback tylko gdy przekazujesz handler do `memo()` child
### Data Fetching
- [ ] React Query (`useQuery`, `useMutation`) - nie useEffect
- [ ] `useSuspenseQuery` dla Suspense-based data fetching (data zawsze zdefiniowane)
- [ ] `queryOptions()` helper dla reużywalnych query configs
- [ ] Early returns: loading → error → empty → data
- [ ] `toast.promise()` dla feedback użytkownika
### Formularze
- [ ] React Hook Form + Zod (`zodResolver`) — złożone formularze
- [ ] `useActionState` (React 19) — proste formularze bez RHF
- [ ] `aria-invalid` i `aria-describedby` dla a11y
- [ ] `useM