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>
2.6 KiB
2.6 KiB
name
| 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)
- Local: Component-level state (suggest
- If
--patternspecified, skip detection and use requested pattern - Check
package.jsonfor 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 installcommand)
3. Generate Store
Context Pattern
- Create context file with typed state interface
- Create provider component with
useReducerfor 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
createAsyncThunkif 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