← ClaudeAtlas

tailwind-react-guidelineslisted

Frontend React 19 + TypeScript 5.7+ + TailwindCSS v4 + shadcn/ui dla Vite SPA. Komponenty, React Query, formularze (RHF + Zod), testowanie (Vitest + RTL + MSW), lazy loading, Suspense, Sonner. Używaj przy tworzeniu komponentów, stron, stylowaniu, data fetchingu, formularzach, testach, optymalizacji.
AIBiz-Automatyzacje/claude-cron · ★ 1 · Web & Frontend · score 67
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