with one click
state-management
// Manage client and server state with Zustand stores and React Query patterns.
// Manage client and server state with Zustand stores and React Query patterns.
Client-side React performance optimization patterns.
Connect Query patterns for API calls. Use when working with mutations, queries, or data fetching.
TypeScript, React, and JavaScript best practices enforced by Ultracite/Biome.
Write and run Playwright E2E tests for Redpanda Console using testcontainers. Analyzes test failures, adds missing testids, and improves test stability. Use when user requests E2E tests, Playwright tests, integration tests, test failures, missing testids, or mentions 'test workflow', 'browser testing', 'end-to-end', or 'testcontainers'.
Refactor legacy forms to use modern Redpanda UI Registry Field components with react-hook-form and Zod validation. Use when user requests: (1) Form refactoring or modernization, (2) Converting Chakra UI or @redpanda-data/ui forms, (3) Updating forms to use Field components, (4) Migrating from legacy form patterns, (5) Implementing forms with react-hook-form and Zod validation.
Build UI with Redpanda Registry components, Tailwind v4, and accessibility best practices.
| name | state-management |
| description | Manage client and server state with Zustand stores and React Query patterns. |
Choose the right state solution for each use case.
| Action | Rule |
|---|---|
| Read from store | use-zustand-selectors.md |
| Persist state | use-zustand-persist.md |
| Fetch server data | use-react-query-for-server.md |
Is it server data (API response)?
āāā Yes ā React Query / Connect Query
ā (caching, refetching, invalidation)
āāā No ā Is it URL state?
āāā Yes ā React Router
ā (search params, path params)
āāā No ā Is it form state?
āāā Yes ā React Hook Form
ā (validation, submission)
āāā No ā Is it shared across components?
āāā Yes ā Zustand
ā (global, persisted)
āāā No ā useState / useReducer
(local component state)
See rules/ directory for detailed guidance.