Przepisy dla Reacta

Przepisy dla Reacta to gotowe prompty dla agentów AI, dzięki którym Claude Code, Codex lub Cursor piszą produkcyjny kod w Reakcie 19. Każdy łączy prompt z bramką, która dowodzi wyniku: sprawdzeniem typów, regułami React Hooks, Vitestem z Testing Library i skanem dostępności w Playwright. Zacznij od przypięcia wersji bibliotek: agenci domyślnie sięgają po API, których już nie ma.

Ta strona jest dla programistów Reacta i tech leadów, którzy ustalają konwencje pracy z agentami w zespole. Prosisz agenta o tabelę danych, a on pisze useReactTable, którego TanStack Table v9 już nie eksportuje. Prosisz o formularz i dostajesz z.string().email(), oznaczone w Zod 4 jako przestarzałe. Kod wygląda idiomatycznie, diff ma 600 linii, a do piątku nie przeczytasz go w całości.

Co dają ci te przepisy dla Reacta

• Blok przypinający wersje do CLAUDE.md, AGENTS.md lub reguły Cursora, który powstrzymuje agenta przed pisaniem kodu pod TanStack Table v8, TanStack Query v4, Zod 3 czy Create React App
• Jedno polecenie „definicji ukończenia”, które agent uruchamia, zanim zgłosi sukces, więc przeglądasz zieloną bramkę zamiast każdej linii
• Osiem promptów do typowej pracy z Reactem: komponent z Figmy, tabele danych, stan serwerowy, optymistyczne UI, formularze, refaktoryzacja klas na hooki, wydajność i migracja z Create React App do Vite
• Tabelę, która pokazuje, jaka bramka łapie jaką klasę błędów i kto zatwierdza zmianę
• Typowe awarie kodu Reacta pisanego przez agenta i sposób wyjścia z każdej z nich

Sprawdzone wersje

Rejestr npm 2026-09-30: react 19.3.0, @tanstack/react-table 9.2.4, @tanstack/react-query 5.104.0, zustand 5.0.15, react-hook-form 7.89.0, @hookform/resolvers 5.9.1, zod 4.6.5, vite 8.3.1, vitest 5.0.3, @testing-library/react 16.3.3, eslint-plugin-react-hooks 7.1.1, @axe-core/playwright 4.13.0, msw 3.0.0 (wydanie główne z 2026-09-28; setupServer nadal zwraca server.resetHandlers(), więc opisane niżej wyjścia z problemów pozostają aktualne). CLI 2026-09-26: Claude Code 2.1.283, Codex CLI 0.157.1.

Najpierw przypnij stos Reacta w kontekście agenta

Agenci uczyli się Reacta na kodzie z wielu lat: z Reacta 16–18, TanStack Table v8 i tutoriali Create React App. Bez przypięcia wersji odtwarzają właśnie to. Wpisz wersje, zakazane API i polecenie kończące pracę tam, gdzie twoje narzędzie czyta instrukcje: do CLAUDE.md dla Claude Code, do AGENTS.md dla Codeksa i do reguły projektu dla Cursora. Claude Code od v2.1.277 czyta też AGENTS.md, gdy projekt nie ma CLAUDE.md.

## Frontend stack (React)
- React 19.3, TypeScript strict, Vite 8, Vitest 5 + Testing Library, Playwright for e2e.
- Server state: TanStack Query v5. Client state: Zustand 5. Forms: React Hook Form 7 + Zod 4
  via @hookform/resolvers. Tables: TanStack Table v9 (`useTable` + `tableFeatures`).
- Never write: useReactTable, cacheTime, `import { ReactComponent } from './x.svg'`,
  process.env.REACT_APP_*, z.string().email(), `as any`, useState+useEffect loading flags
  for server data.
- Before you say a task is done, run `npm run verify` and paste the last 20 lines of output.
- Tests query by role and label, never by class name or test id unless no role exists.

Zamienniki poniżej sprawdziliśmy w opublikowanych definicjach typów wersji z ramki powyżej:

Agent pisze	Stan na 2026-09-26	Pisz zamiast tego
useReactTable(options)	Nieeksportowane przez @tanstack/react-table 9.2.4; jest tylko useLegacyTable z /legacy, oznaczone jako przestarzałe	useTable({ ...options, features }) z tableFeatures()
cacheTime w zapytaniu	Brak w typach @tanstack/query-core v5	gcTime
z.string().email()	@deprecated Use z.email() instead w Zod 4.6.5	z.email()
import { ReactComponent } from './logo.svg'	Tylko Create React App	import Logo from './logo.svg?react' z vite-plugin-svgr 5
process.env.REACT_APP_API_URL	Tylko Create React App	import.meta.env.VITE_API_URL
Flagi ładowania i błędu w useState wokół fetch	Działa, ale dubluje to, co robi cache	hook useQuery na każdy endpoint

TanStack Table v9 ma własne skille dla agentów

Pakiet @tanstack/react-table 9.2.4 zawiera katalog skills/ z getting-started, migrate-v8-to-v9, table-state, create-table-hook, with-tanstack-query i with-tanstack-virtual. Każ agentowi przeczytać node_modules/@tanstack/react-table/skills/<name>/SKILL.md, zanim napisze kod tabeli. To lista kontrolna samego producenta, przypięta do zainstalowanej wersji.

Daj agentowi jedno polecenie, które dowodzi zmiany

Przepis jest tyle wart, ile sprawdzenie, które po nim następuje. Dodaj jeden skrypt łączący wszystkie bramki i każ agentowi uruchomić go, zanim zgłosi koniec pracy:

{
  "scripts": {
    "verify": "tsc --noEmit && eslint . --max-warnings 0 && vitest run && playwright test --grep @a11y"
  }
}

Użyj konfiguracji flat recommended z eslint-plugin-react-hooks 7 i podnieś react-hooks/exhaustive-deps do error: nieaktualne domknięcia to częsty błąd agentów, a ta reguła łapie je bez człowieka czytającego tablicę zależności. W v7 preset flat to reactHooks.configs.flat.recommended; ciąg plugin:react-hooks/recommended, który agenci często piszą, to starsza forma dla .eslintrc:

eslint.config.js

import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
  { rules: { 'react-hooks/exhaustive-deps': 'error' } },
]);

Testy Playwright oznaczone @a11y uruchamiają @axe-core/playwright na każdej stronie, której dotknęła zmiana.

To, jak zmusić agenta do uruchomienia verify, zależy od narzędzia:

Claude Code

Wpisz regułę do CLAUDE.md jak w bloku powyżej. Żeby ją egzekwować, a nie tylko o nią prosić, dodaj hook Stop do .claude/settings.json. Kod wyjścia 2 blokuje zakończenie i oddaje Claude’owi wynik bramki wysłany na stderr:

{
  "hooks": {
    "Stop": [{ "hooks": [{ "type": "command",
      "command": "jq -e '.stop_hook_active' >/dev/null && exit 0; npm run verify >&2 || exit 2" }] }]
  }
}

Sprawdzenie stop_hook_active przepuszcza zakończenie przy drugiej próbie, więc błąd, którego Claude nie umie naprawić, kończy turę i trafia do ciebie, zamiast kręcić się w pętli; Claude Code dodatkowo ogranicza wymuszone kontynuacje do ośmiu z rzędu. Wersję, która działa tylko przy zmienionym drzewie roboczym, znajdziesz w automatyzacji hookami. W CI ten sam prompt przyjmuje claude -p.

Codex

Wpisz regułę do AGENTS.md, który Codex wczytuje na starcie sesji. W CI codex exec uruchamia prompt bez interfejsu; uruchom npm run verify jako kolejny krok zadania CI, żeby zadanie kończyło się błędem razem z bramką, niezależnie od tego, co zgłosił agent.

Cursor

Zapisz to wymaganie w regule projektu Cursora. Hooki Cursora potrafią uruchomić skrypt w wybranych punktach pętli agenta, więc bramka nie zależy od tego, czy agent pamięta regułę. Bugbot przegląda potem pull request jako druga opinia, a nie jako bramka.

Zamień ramkę z Figmy na typowany komponent

Scenariusz: masz w Figmie ramkę karty cenowej i chcesz komponentu, który użyje istniejących Button i Card, zamiast wymyślać nowe.

Serwer Figma MCP daje agentowi układ ramki, zmienne i mapowania Code Connect. Plugin Figmy łączy zdalny serwer (https://mcp.figma.com/mcp) ze skillami do zamiany projektu na kod. Sprawdź swoją licencję (seat), zanim zaplanujesz na nim sprint: plany Starter oraz licencje View i Collab w planach płatnych mają do 6 wywołań narzędzi miesięcznie, a licencje Dev i Full w planach Professional, Organization i Enterprise dostają limity minutowe. Szczegóły w Figma MCP i projekt-do-kodu.

Claude Code

claude plugin install figma@claude-plugins-official
# albo sam serwer; potem w sesji uruchom /mcp, żeby się zalogować:
claude mcp add --transport http figma https://mcp.figma.com/mcp

Codex

codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma

Albo zainstaluj plugin Figmy, który łączy serwer ze skillami do zamiany projektu na kod:

codex plugin add figma@openai-curated

Cursor

Wpisz /add-plugin figma w czacie agenta (według README Figmy) albo dodaj serwer do .cursor/mcp.json:

{ "mcpServers": { "figma": { "url": "https://mcp.figma.com/mcp" } } }

Prompt do skopiowania: ramka z Figmy na komponent React

Implement this Figma frame as a React component: <paste the frame URL with node-id>.
Call get_design_context and get_screenshot first. Reuse Button, Card and Badge from
src/components/ui; do not create new primitives. Map Figma variables to our Tailwind
theme tokens; if a value has no token, list it instead of hard-coding a hex.
Output: PricingCard.tsx with an exported PricingCardProps interface, a Storybook story
with default, highlighted and disabled variants, and a Vitest test that finds the CTA
by role and asserts the price text. Run npm run verify and show the result.

Skąd wiesz, że zadziałało: lista wartości bez tokenu jest pusta albo wyjaśniona, verify świeci na zielono, a zrzut ze Storybooka obok zrzutu z Figmy zgadza się w twoich breakpointach. Te dwa obrazy porównuje projektant; nikt nie musi czytać klas Tailwinda.

Zbuduj tabelę danych na TanStack Table v9

Scenariusz: ekran administracyjny potrzebuje sortowanej, filtrowanej i stronicowanej tabeli 10 000 użytkowników z zaznaczaniem wierszy.

Prompt do skopiowania: tabela danych na TanStack Table v9

Read node_modules/@tanstack/react-table/skills/getting-started/SKILL.md and
node_modules/@tanstack/react-table/skills/table-state/SKILL.md before writing code. Build a generic DataTable<TData> in
src/components/data-table/ with @tanstack/react-table v9: useTable with tableFeatures
registering only row sorting, column filtering, pagination and row selection.
Do not use useReactTable or useLegacyTable. Props: data, columns, onSelectionChange.
Page sizes 10/25/50/100, a loading skeleton, an empty state, and a header button per
sortable column with aria-sort. Tests: sort toggles order, a filter narrows rows,
selection calls onSelectionChange with the selected rows, and the empty state renders.
Run npm run verify.

Skąd wiesz, że zadziałało: grep -r "useReactTable\|useLegacyTable" src nic nie zwraca, cztery testy przechodzą, a skan axe nie znajduje naruszeń na stronie. Przy stronicowaniu po stronie serwera wskaż agentowi skill with-tanstack-query z tego samego katalogu.

Przenieś stan serwerowy do TanStack Query v5

Scenariusz: 15 komponentów pobiera dane w useEffect i trzyma własne flagi loading i error. Po edycji na innym ekranie dane są nieaktualne.

Prompt do skopiowania: hooki TanStack Query v5 z testami na MSW

Replace every fetch-in-useEffect under src/features/users/ with TanStack Query v5.
Create src/lib/query-client.ts (staleTime 60s, gcTime 5 min, retry 2, no retry on 4xx)
and src/features/users/api.ts with a queryOptions factory per endpoint and hooks
useUsers(params), useUser(id), useCreateUser(), useUpdateUser(), useDeleteUser().
Mutations invalidate the list and detail keys they affect. Errors are typed from our
ApiError class. Use gcTime, never cacheTime. Tests: mock the HTTP layer with MSW,
not the hooks; one test per hook plus one that proves an update refreshes the list.
Keep Zustand only for UI state (theme, sidebar); move nothing server-owned into it.
Run npm run verify and list each component you changed.

Skąd wiesz, że zadziałało: grep -rn "useEffect" src/features/users nie pokazuje pobierania danych, test odświeżania listy przechodzi, a lista komponentów zgadza się z plikami w diffie. Mockowanie HTTP przez MSW zamiast mockowania hooków trzyma testy w ryzach: agent nie może ich „naprawić”, mockując to, co testuje.

Dodaj optymistyczne UI bez utraty danych

Scenariusz: przełączenie zadania czeka 400 ms na serwer, a użytkownicy klikają dwa razy.

Użyj useOptimistic z React 19, gdy aktualizacja pochodzi z akcji formularza, a stan jest lokalny dla jednego komponentu. Użyj onMutate / onError / onSettled z TanStack Query, gdy te same dane pojawiają się w kilku miejscach przez cache zapytań.

Prompt do skopiowania: optymistyczne aktualizacje z wycofaniem

Make add, toggle and delete in src/features/todos/ optimistic using TanStack Query v5.
In onMutate: cancel outgoing queries for ['todos'], snapshot the cache, apply the change
(new items get a temporary id from crypto.randomUUID() and a pending flag). In onError:
restore the snapshot and show a toast with the server message. In onSettled: invalidate
['todos']. Delete shows an Undo toast for 5 seconds. Tests with MSW: the UI updates
before the response resolves; a 500 restores the previous list; two fast toggles end in
the server's final state. Run npm run verify.

Skąd wiesz, że zadziałało: przechodzą test wycofania i test podwójnego przełączenia. To w tych dwóch przypadkach kod optymistyczny gubi dane i tylko ta część diffu jest warta ludzkiego spojrzenia.

Zbuduj formularze na React Hook Form i Zod 4

Scenariusz: formularz ustawień dostaje z serwera błędy walidacji, które lądują przy złym polu albo nigdzie.

Prompt do skopiowania: typowany formularz z błędami z serwera

Build the account settings form in src/features/settings/ with React Hook Form 7 and
Zod 4 through zodResolver from @hookform/resolvers. Define the schema once in
schema.ts and infer the form type with z.infer; use z.email() and z.url(), not the
deprecated string methods. Map a 422 response body { field, message }[] onto the
fields with setError. Every input has a visible label; errors are linked with
aria-describedby and announced. Tests with userEvent: empty submit shows errors, a
bad email shows the email message, a 422 lands on the right field, and a valid
submit sends the parsed values once. Run npm run verify.

Skąd wiesz, że zadziałało: cztery testy przechodzą, a skan axe jest czysty. Jeśli agent sięga po as any, żeby uciszyć typy resolvera, odrzuć zmianę: przypięcie wersji jest błędne albo resolver jest nieaktualny.

Przepisz komponent klasowy na hooki bez zmiany zachowania

Scenariusz: 400-liniowy komponent klasowy z logiką w componentDidUpdate, której nikt do końca nie rozumie, i bez testów.

Testy napisz przed refaktoryzacją. Refaktoryzacja, na której „brak zmiany zachowania” masz tylko słowo agenta, jest niezweryfikowana. Metodę opisuje strona o testach charakteryzujących.

Prompt do skopiowania: najpierw charakteryzuj, potem refaktoryzuj

Step 1, do not touch src/components/UserDashboard.tsx yet: write characterization
tests that pin its current behaviour - rendered output for three prop sets, every API
call it makes and when, and what happens when props change. Run them; they must pass
against the class version. Commit.
Step 2: convert UserDashboard to a function component, moving state logic into
useUserDashboard.ts. Do not edit the tests. Do not change props, markup or API calls.
Run npm run verify. If a characterization test fails, fix the component, not the test.
Commit.

Skąd wiesz, że zadziałało: pliki testów są identyczne w commitach z kroku 1 i kroku 2 (git diff HEAD~1 HEAD -- '*.test.tsx' jest pusty, gdy oba commity już istnieją) i przechodzą w obu. Ten diff to jedyna rzecz do sprawdzenia ręcznie.

Znajdź rendery, które naprawdę kosztują czas

Scenariusz: lista produktów reaguje na zmianę filtra po kilku sekundach. Odruch, ludzki czy agenta, to owinąć wszystko w memo, useMemo i useCallback.

Najpierw zmierz. Jeśli projekt już kompiluje się z React Compilerem (babel-plugin-react-compiler 1.0.0 w package.json), większość ręcznej memoizacji jest zbędna, a poprawką jest zwykle komponent, który kompilator pominął, albo kosztowne obliczenie w trakcie renderu. Chrome DevTools MCP daje agentowi ślad wydajności prawdziwej strony:

Claude Code

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Codex

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Cursor

{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest"] } } }

Serwer domyślnie wysyła statystyki użycia do Google; dodaj --no-usage-statistics, żeby z tego zrezygnować.

Prompt do skopiowania: poprawka wydajności poparta pomiarem

Start the dev server. With the chrome-devtools MCP, open http://localhost:5173/products,
start a performance trace, type "shoe" into the filter, stop the trace. Report the
three longest tasks and the components they belong to. Propose at most three fixes,
each tied to a number from the trace. Apply them, record the same trace again, and
show before/after durations in a table. Do not add memo, useMemo or useCallback
anywhere the trace does not point to. Run npm run verify.

Skąd wiesz, że zadziałało: tabela przed/po pokazuje szybszą interakcję w tym samym śladzie, a diff dotyka tylko komponentów wskazanych przez ślad. Patrz na profiler, nie na kod; jak zamienić tę liczbę w budżet w CI, opisuje strona o testach wydajności.

Przenieś projekt z Create React App na Vite

Scenariusz: projekt na Create React App wciąż stoi na react-scripts 5.0.1, ostatnim stabilnym wydaniu (kwiecień 2022), a jego serwer deweloperski startuje kilka minut.

Prompt do skopiowania: Create React App na Vite 8

Migrate this Create React App project to Vite 8 without changing app behaviour.
1. Record a baseline: run the current test suite and save the list of passing tests.
2. Add vite.config.ts with @vitejs/plugin-react, aliases from tsconfig paths, and
   vite-plugin-svgr for SVGs imported as components (import Logo from './logo.svg?react').
3. Move public/index.html to the project root with a module script entry.
4. Rename every REACT_APP_ variable to VITE_ in .env* files and replace
   process.env.REACT_APP_* with import.meta.env.VITE_* in code; add types in vite-env.d.ts.
5. Move Jest to Vitest with a jsdom environment; keep test bodies unchanged.
6. Remove react-scripts and react-app-rewired.
Finish by running npm run build and npm run verify, and compare the passing-test list
with the baseline. Report any test that changed status.

Skąd wiesz, że zadziałało: grep -rn "REACT_APP_\|react-scripts" src package.json .env* nic nie zwraca, a lista przechodzących testów zgadza się z punktem odniesienia. Większą wersję tego zadania opisuje strona o modernizacji starszego kodu.

Dodaj skill do przeglądu Reacta jako drugą opinię

Dwa skille z vercel-labs/agent-skills przeglądają kod Reacta według spisanych reguł i instalują się w Claude Code, Codex i Cursor przez to samo CLI. Wartość --skill to nazwa z frontmattera, nie nazwa katalogu:

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
npx skills add vercel-labs/agent-skills --skill web-design-guidelines

vercel-react-best-practices wskazuje kaskady pobierania danych, rozmiar paczki i problemy z renderami; web-design-guidelines zgłasza problemy z dostępnością, fokusem i formularzami jako znaleziska file:line. Używaj ich jako recenzentów po zielonym verify, a nie jako bramki. Więcej opcji znajdziesz na stronie o najlepszych skillach do frontendu.

Jak zweryfikować kod Reacta od agenta bez czytania każdej linii

Bramka	Co łapie	Gdzie działa	Kto zatwierdza
tsc --noEmit ze strict	Złe propsy, zgubione generyki, stare API bibliotek, które nie przechodzą sprawdzenia typów	pętla agenta, CI	automatycznie
eslint-plugin-react-hooks 7 z exhaustive-deps na error	Nieaktualne domknięcia (stale closures), warunkowe hooki, naruszenia Rules of React	pętla agenta, CI	automatycznie
Vitest + Testing Library + MSW	Zachowanie: co widzi użytkownik po każdej akcji, łącznie ze ścieżkami błędów	pętla agenta, CI	automatycznie; autor przegląda nazwy testów, nie ich treść
Testy charakteryzujące, niezmienione w trakcie refaktoryzacji	Dryf zachowania przy refaktoryzacji	pętla agenta, CI	autor sprawdza, że diff testów jest pusty
Playwright + @axe-core/playwright	Brakujące etykiety, pułapki fokusu, kontrast, role	CI	automatycznie; osoba odpowiedzialna za dostępność przegląda nowe wyjątki
Zrzut ze Storybooka obok Figmy	Wizualny dryf od projektu	pull request	projektant
Ślad wydajności przed/po	Regresje w zmienianej interakcji	pętla agenta z Chrome DevTools MCP	autor; budżet w CI, gdy to ważne

Człowiek przegląda to, czego bramki nie obejmą: kryteria akceptacji, nazwy testów i każdy diff w pliku testu. Kryteria akceptacji zapisz przed promptem; zobacz kryteria akceptacji. Nie pozwól agentowi edytować własnych testów, żeby przeszły; zobacz ochronę wyroczni testowej.

Kiedy kod Reacta od agenta się psuje

• Agent pisze API, którego zainstalowana wersja nie ma. Najczęściej useReactTable, cacheTime i z.string().email(). Wyjście: dodaj blok przypinający wersje, wskaż agentowi skill dołączony do biblioteki albo jej pliki .d.ts w node_modules, a resztę niech odrzuci tsc.
• Nieaktualne domknięcia (stale closures). useCallback lub useEffect czyta stan, którego nie ma w tablicy zależności, więc działa na starych wartościach. Wyjście: exhaustive-deps na error; nigdy nie pozwól agentowi uciszyć reguły komentarzem eslint-disable. Zakaż tego komentarza w review.
• Testy, które testują mocka. Agent mockuje hook, który sam napisał, i sprawdza, że mock zwrócił to, co mu kazano. Wyjście: mockuj na granicy HTTP przez MSW i odrzucaj testy, które robią vi.mock na testowanym module.
• Memoizacja na ślepo. memo na każdym komponencie dodaje koszt porównań i ukrywa prawdziwy problem. Wyjście: wymagaj liczby ze śladu dla każdej memoizacji, jak w prompcie o wydajności; przy włączonym React Compilerze usuń ręczną memoizację, której ślad nie uzasadnia.
• as any na granicach bibliotek. Generyczne tabele i resolvery formularzy gubią wnioskowanie typów, a agent rzutuje. Wyjście: traktuj as any jak nieprzechodzącą bramkę (@typescript-eslint/no-explicit-any na error) i proś o generyczną sygnaturę.
• Mocki przeciekające między testami. Test przechodzi sam, a pada w całym zestawie. Wyjście: ustaw restoreMocks: true w konfiguracji Vitesta i resetuj handlery MSW w afterEach.
• Dryf od projektu w Figmie. Agent wpisuje na sztywno kolor lub odstęp. Wyjście: prompt prosi o listę wartości bez tokenu, a projektant porównuje zrzuty ekranu, nie nazwy klas.

Dokąd dalej z Reactem i agentami

• Przegląd przepisów frontendowych z pozostałymi frameworkami tej sekcji
• Przepisy Next.js o Server Components, App Routerze i cache, które ta strona zostawia sąsiadowi
• Testy jednostkowe z agentami i testy dostępności o bramkach stojących za verify
• Playwright MCP i agent-browser, żeby agent sam sprawdzał działającą aplikację
• Wzorce React Native, gdy ten sam zespół wydaje aplikacje mobilne