lmiranda
2d51df7a42
Phase 1b: Rename all ~94 commands across 12 plugins to /<noun> <action> sub-command pattern. Git-flow consolidated from 8→5 commands (commit variants absorbed into --push/--merge/--sync flags). Dispatch files, name: frontmatter, and cross-reference updates for all plugins. Phase 2: Design documents for 8 new plugins in docs/designs/. Phase 3: Scaffold 8 new plugins — saas-api-platform, saas-db-migrate, saas-react-platform, saas-test-pilot, data-seed, ops-release-manager, ops-deploy-pipeline, debug-mcp. Each with plugin.json, commands, agents, skills, README, and claude-md-integration. Marketplace grows from 12→20. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
78 lines
2.6 KiB
Markdown
78 lines
2.6 KiB
Markdown
---
|
|
name: react state
|
|
---
|
|
|
|
# /react state - State Management Setup
|
|
|
|
## Skills to Load
|
|
- skills/state-patterns.md
|
|
- skills/visual-header.md
|
|
|
|
## Visual Output
|
|
|
|
Display header: `REACT-PLATFORM - State Management`
|
|
|
|
## Usage
|
|
|
|
```
|
|
/react state <store-name> [--pattern <context|zustand|redux>] [--actions <action1,action2>]
|
|
```
|
|
|
|
## Workflow
|
|
|
|
### 1. Analyze State Requirements
|
|
- Ask user about the state scope:
|
|
- **Local**: Component-level state (suggest `useState`/`useReducer` — no scaffolding needed)
|
|
- **Shared**: Cross-component state within a feature (suggest Context or Zustand)
|
|
- **Global**: App-wide state with complex logic (suggest Redux Toolkit or Zustand)
|
|
- If `--pattern` specified, skip detection and use requested pattern
|
|
- Check `package.json` for existing state libraries
|
|
|
|
### 2. Select Pattern
|
|
Using `skills/state-patterns.md`:
|
|
- **React Context**: For simple shared state (theme, auth, locale). No additional dependencies.
|
|
- **Zustand**: For medium complexity. Minimal boilerplate, good DevTools support.
|
|
- **Redux Toolkit**: For complex state with middleware, async thunks, entity adapters.
|
|
- If library not installed, ask user to install it first (display exact `npm install` command)
|
|
|
|
### 3. Generate Store
|
|
|
|
#### Context Pattern
|
|
- Create context file with typed state interface
|
|
- Create provider component with `useReducer` for state + dispatch
|
|
- Create custom hook (`use<StoreName>`) with context validation
|
|
- Create action types and reducer function
|
|
|
|
#### Zustand Pattern
|
|
- Create store file with typed state and actions
|
|
- Include DevTools middleware (if zustand version supports it)
|
|
- Create selector hooks for computed/derived state
|
|
- Include persist middleware setup (optional, ask user)
|
|
|
|
#### Redux Toolkit Pattern
|
|
- Create slice file with `createSlice` (state, reducers, extraReducers)
|
|
- Create async thunks with `createAsyncThunk` if API calls needed
|
|
- Create typed hooks (`useAppDispatch`, `useAppSelector`) if not existing
|
|
- Add slice to root store configuration
|
|
- Create selector functions for memoized state access
|
|
|
|
### 4. Generate Actions
|
|
If `--actions` specified:
|
|
- Create action creators/reducers for each named action
|
|
- Type the action payloads
|
|
- Include in the store/slice definition
|
|
|
|
### 5. Summary
|
|
- Display created files
|
|
- Show usage example with import and hook usage
|
|
- List available actions/selectors
|
|
|
|
## Examples
|
|
|
|
```
|
|
/react state auth --pattern context --actions login,logout,setUser
|
|
/react state cart --pattern zustand --actions addItem,removeItem,clearCart
|
|
/react state products --pattern redux --actions fetchAll,fetchById,updateProduct
|
|
/react state theme --pattern context --actions toggle,setMode
|
|
```
|