Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →modu-ai/moai-ref-react-patterns
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design, database modeling, DevOps, mobile apps.
Passed 19 of 22 test cases with the skill, and 17 of 22 without it.
2 fixed17 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
We are building a dashboard displaying server data fetched from a REST endpoint. Our backend engineer suggested putting fetched server data into a global Zustand store. What state management library should we choose for managing cached server data, background updates, and optimistic writes?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends React Query or TanStack Query for server state management. | Passed | Passed |
| Recommends onMutate callback for optimistic updates. | Missed | Passed |
The instructions your model reads when the skill loads.
Frontend domain work spawned via Agent(general-purpose) with frontend instructions - Applies these patterns directly to component design and state management.
Parent and child share implicit state via Context.
Suited for: Tab, Accordion, Dropdown, Select
Structure: <Select> + <Select.Trigger> + <Select.Option>
Extract state logic into reusable hooks.
Suited for: Form management, API calls, localStorage, debounce
Naming: use prefix required - useForm, useDebounce, useAuth
Separate data logic (Container) from UI (Presentational).
Suited for: Large apps, when testability is needed Container: Data fetch, state management, event handlers Presentational: Renders only from props, functionally pure
Provides behavior/state without UI.
Suited for: Design system-independent logic
Examples: headless useCombobox, useDialog, useTable
| State Type | Tool | Rationale |
|---|---|---|
| UI Local | useState, useReducer | Component-internal |
| Server State | React Query / TanStack Query | Caching, refetch, optimistic |
| Global Client | Zustand | Concise, minimal boilerplate |
test cases passed, vs 17 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.