React architecture -- components, state, performance, Server Components, testing.
From godmodenpx claudepluginhub arbazkhan971/godmodeThis skill uses the workspace's default tool permissions.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
/godmode:react, "React app", "component architecture"grep -E "react|zustand|jotai|redux|react-query" \
package.json 2>/dev/null
grep -r "use client\|use server" \
--include="*.tsx" -l 2>/dev/null | head -10
Framework: Next.js | Remix | Vite | CRA
React: 18 | 19+ | Rendering: SPA | SSR | SSG
Pain points: re-renders, prop drilling, bundle size
Composition (default): small focused components, slot pattern for layouts. Custom Hooks: extract stateful logic (useDebounce, useMediaQuery, useLocalStorage). Render Props: when parent controls rendering.
Hierarchy: Pages -> Features -> UI Components -> Atoms. Rules: one thing per component, small props, composition over configuration, feature folders over tech folders.
| Type | Solution |
|---|---|
| Server/async (API) | TanStack Query / SWR |
| URL (params) | useSearchParams / nuqs |
| Form | React Hook Form + Zod |
| Local UI | useState / useReducer |
| Shared UI | Zustand or Jotai |
| Complex global | Zustand or Redux Toolkit |
IF bundle >500KB: enable code splitting. IF re-renders >3 per interaction: add memoization.
GOLDEN RULE: measure before optimizing. Use React DevTools Profiler.
RSC: server-only, zero client JS, direct DB access. useTransition: non-urgent state updates. useDeferredValue: defer expensive re-renders.
Pyramid: E2E (Playwright) -> Integration (RTL) -> Unit. Query priority: getByRole > getByLabelText > getByText
getByTestId (last resort). Rules: test behavior not implementation. userEvent > fireEvent. MSW for API mocking.
[ ] Composition over prop drilling
[ ] Custom hooks for reusable logic
[ ] State management per category
[ ] memo/useMemo with evidence only
[ ] Code splitting at route level
[ ] Error boundaries
[ ] Tests with accessible queries
[ ] TypeScript strict
any. Use unknown + type guard.tsc --noEmit after changes.Append .godmode/react-results.tsv:
timestamp action components hooks test_status build_status notes
KEEP if: tsc passes AND tests pass AND no new
ESLint warnings AND bundle size stable.
DISCARD if: type errors OR test failures OR hooks
rules violated OR bundle regressed.
STOP when ALL of:
- tsc --noEmit exits 0
- All tests pass
- No ESLint react-hooks warnings
- Bundle within budget
On failure: git reset --hard HEAD~1. Never pause.
| Failure | Action |
|---|---|
| Infinite re-render | Check useEffect deps, stabilize refs |
| Hydration mismatch | useEffect for client-only code |
| Bundle too large | Analyze, lazy-load routes |
| State on unmounted | Cleanup in useEffect, AbortController |