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>
81 lines
2.8 KiB
Markdown
81 lines
2.8 KiB
Markdown
---
|
|
name: react hook
|
|
---
|
|
|
|
# /react hook - Generate Custom Hook
|
|
|
|
## Skills to Load
|
|
- skills/typescript-patterns.md
|
|
- skills/component-patterns.md
|
|
- skills/visual-header.md
|
|
|
|
## Visual Output
|
|
|
|
Display header: `REACT-PLATFORM - Custom Hook`
|
|
|
|
## Usage
|
|
|
|
```
|
|
/react hook <hookName> [--type <data|ui|form|lifecycle>] [--no-test]
|
|
```
|
|
|
|
## Workflow
|
|
|
|
### 1. Validate Hook Name
|
|
- Must start with `use` (e.g., `useAuth`, `useDebounce`, `useLocalStorage`)
|
|
- Must be camelCase after the `use` prefix
|
|
- Check for existing hook with same name — prompt before overwriting
|
|
|
|
### 2. Determine Hook Type
|
|
- `data` (default): Hooks that manage data fetching, caching, or transformation
|
|
- Template includes: state for data/loading/error, fetch function, cleanup
|
|
- Example: `useUsers`, `useApiCall`, `useInfiniteScroll`
|
|
- `ui`: Hooks that manage UI state or DOM interactions
|
|
- Template includes: ref handling, event listeners, cleanup on unmount
|
|
- Example: `useMediaQuery`, `useClickOutside`, `useIntersectionObserver`
|
|
- `form`: Hooks that manage form state and validation
|
|
- Template includes: values state, errors state, handlers, validation, submit
|
|
- Example: `useForm`, `useFieldValidation`, `useMultiStepForm`
|
|
- `lifecycle`: Hooks that wrap React lifecycle patterns
|
|
- Template includes: effect with cleanup, dependency management
|
|
- Example: `useDebounce`, `useInterval`, `usePrevious`
|
|
|
|
### 3. Generate Hook File
|
|
- Create hook file in project's hooks directory (`src/hooks/` or `hooks/`)
|
|
- Include TypeScript generics where appropriate (e.g., `useLocalStorage<T>`)
|
|
- Include proper cleanup in `useEffect` return functions
|
|
- Follow React hooks rules: no conditional hooks, stable dependency arrays
|
|
- Include JSDoc with `@param`, `@returns`, and `@example`
|
|
|
|
### 4. Generate Test File
|
|
Unless `--no-test` specified:
|
|
- Create test file using `@testing-library/react-hooks` or `renderHook` from `@testing-library/react`
|
|
- Test initial state
|
|
- Test state transitions after actions
|
|
- Test cleanup behavior
|
|
- Test error states (for data hooks)
|
|
- Use `act()` wrapper for state updates
|
|
|
|
### 5. Generate Types
|
|
- Export hook parameter types and return type as named interfaces
|
|
- Use generics for reusable hooks (e.g., `useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void]`)
|
|
- Include discriminated union types for loading/error/success states
|
|
|
|
### 6. Update Barrel File
|
|
If hooks directory has `index.ts`:
|
|
- Add export for new hook
|
|
|
|
### 7. Summary
|
|
- Display created files
|
|
- Show usage example in a component
|
|
|
|
## Examples
|
|
|
|
```
|
|
/react hook useAuth --type data # Auth state management
|
|
/react hook useDebounce --type lifecycle # Debounced value hook
|
|
/react hook useClickOutside --type ui # Click outside detection
|
|
/react hook useContactForm --type form # Form with validation
|
|
/react hook useLocalStorage # Generic localStorage hook
|
|
```
|