feat(marketplace): command consolidation + 8 new plugins (v8.1.0 → v9.0.0) [BREAKING]

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>
2026-02-06 14:52:11 -05:00
parent 5098422858
commit 2d51df7a42
321 changed files with 13582 additions and 1019 deletions
--- a/plugins/saas-react-platform/commands/react-component.md
+++ b/plugins/saas-react-platform/commands/react-component.md
@@ -0,0 +1,74 @@
+---
+name: react component
+---
+
+# /react component - Scaffold React Component
+
+## Skills to Load
+- skills/component-patterns.md
+- skills/typescript-patterns.md
+- skills/visual-header.md
+
+## Visual Output
+
+Display header: `REACT-PLATFORM - Component`
+
+## Usage
+
+```
+/react component <ComponentName> [--type <ui|page|layout|form>] [--props <prop1:type,prop2:type>] [--no-test]
+```
+
+## Workflow
+
+### 1. Validate Component Name
+- Must be PascalCase (e.g., `UserProfile`, `DataTable`)
+- Reject reserved React names (`Component`, `Fragment`, `Suspense`)
+- Check for existing component with same name — prompt before overwriting
+
+### 2. Determine Component Type
+- `ui` (default): Presentational component — props in, JSX out, no side effects
+- `page`: Page-level component with data fetching, loading/error states
+- `layout`: Layout wrapper with children prop and optional sidebar/header slots
+- `form`: Form component with controlled inputs, validation, submit handler
+
+### 3. Generate Component File
+Using `skills/component-patterns.md` and `skills/typescript-patterns.md`:
+- Create functional component with typed props interface
+- Apply component type template (ui, page, layout, form)
+- Use project's CSS approach (Tailwind classes, CSS modules import, styled-components)
+- Include JSDoc comment block with `@component` and `@example`
+- Export according to project convention (default or named)
+
+### 4. Generate Test File
+Unless `--no-test` specified:
+- Create co-located test file (`ComponentName.test.tsx`)
+- Include basic render test
+- Include props variation tests for each required prop
+- Include accessibility test if `@testing-library/jest-dom` is available
+- Use project's test runner (Jest or Vitest)
+
+### 5. Generate Types File (if complex props)
+If more than 5 props or nested types:
+- Create separate types file (`ComponentName.types.ts`)
+- Export props interface and any supporting types
+- Import types in component file
+
+### 6. Update Barrel File
+If project uses barrel files (`index.ts`):
+- Add export to nearest `index.ts`
+- Create `index.ts` if component is in its own directory
+
+### 7. Summary
+- Display created files with paths
+- Show component usage example in JSX
+
+## Examples
+
+```
+/react component Button                                 # Basic UI component
+/react component UserProfile --type page                # Page with data fetching
+/react component DashboardLayout --type layout          # Layout wrapper
+/react component LoginForm --type form                  # Form with validation
+/react component DataTable --props data:T[],columns:Column[],onSort:Function
+```
--- a/plugins/saas-react-platform/commands/react-hook.md
+++ b/plugins/saas-react-platform/commands/react-hook.md
@@ -0,0 +1,80 @@
+---
+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
+```
--- a/plugins/saas-react-platform/commands/react-lint.md
+++ b/plugins/saas-react-platform/commands/react-lint.md
@@ -0,0 +1,127 @@
+---
+name: react lint
+---
+
+# /react lint - Component Tree Analysis
+
+## Skills to Load
+- skills/component-patterns.md
+- skills/typescript-patterns.md
+- skills/visual-header.md
+
+## Visual Output
+
+Display header: `REACT-PLATFORM - Lint`
+
+## Usage
+
+```
+/react lint [path] [--fix] [--strict]
+```
+
+## Workflow
+
+### 1. Scan Target
+- Default path: project root (all `.tsx`, `.ts`, `.jsx`, `.js` files)
+- If specific path provided, scan only that directory/file
+- Exclude: `node_modules/`, `dist/`, `build/`, `.next/`, `coverage/`
+
+### 2. Component Structure Analysis
+Check each component file for:
+
+| Check | Severity | Description |
+|-------|----------|-------------|
+| Missing prop types | FAIL | Components without TypeScript interface or PropTypes |
+| Unused props | WARN | Props declared in interface but never used in JSX |
+| Missing display name | INFO | Components without `displayName` (matters for DevTools) |
+| Inline function props | WARN | Functions defined inline in JSX (`onClick={() => ...}`) |
+| Missing key prop | FAIL | List rendering without `key` prop |
+| Index as key | WARN | Using array index as `key` in dynamic lists |
+| Large component | WARN | Component exceeds 200 lines (suggest splitting) |
+| Mixed concerns | WARN | Data fetching + rendering in same component |
+| Missing error boundary | INFO | Page components without error boundary |
+
+### 3. Hook Analysis
+Check custom hooks for:
+
+| Check | Severity | Description |
+|-------|----------|-------------|
+| Missing cleanup | WARN | `useEffect` with subscription/listener but no cleanup return |
+| Stale closure | WARN | State variables used in effect without being in dependency array |
+| Conditional hook call | FAIL | Hook called inside condition, loop, or after early return |
+| Missing dependency | WARN | Values used in effect but missing from dependency array |
+
+### 4. State Management Analysis
+Check state patterns for:
+
+| Check | Severity | Description |
+|-------|----------|-------------|
+| Prop drilling | WARN | Same prop passed through 3+ component levels |
+| Unnecessary state | INFO | State that could be derived from existing state or props |
+| Multiple setState calls | INFO | Sequential `setState` calls that could be a single update |
+| Context overuse | WARN | Context provider wrapping entire app for localized state |
+
+### 5. TypeScript Analysis (--strict mode)
+Additional checks when `--strict` enabled:
+
+| Check | Severity | Description |
+|-------|----------|-------------|
+| `any` type usage | WARN | Explicit or implicit `any` in component code |
+| Missing return type | INFO | Components without explicit return type |
+| Non-null assertion | WARN | Use of `!` operator instead of proper null checking |
+| Type assertion overuse | WARN | Frequent `as` casts suggesting type design issues |
+
+### 6. Report
+
+```
+----------------------------------------------------------------------+
+|  REACT-PLATFORM - Lint                                               |
+|  /src/components                                                     |
+----------------------------------------------------------------------+
+
+Files Scanned: 24
+Components Analyzed: 18
+Hooks Analyzed: 6
+
+FAIL (2)
+  1. [src/components/UserList.tsx:45] Missing key prop
+     Found: <UserCard user={user} /> inside .map()
+     Fix: Add key={user.id} to <UserCard>
+
+  2. [src/hooks/useData.ts:12] Conditional hook call
+     Found: if (enabled) { useState(...) }
+     Fix: Move hook before condition, use enabled as guard inside
+
+WARN (3)
+  1. [src/components/Dashboard.tsx] Large component (287 lines)
+     Suggestion: Extract chart section into DashboardCharts component
+
+  2. [src/components/Form.tsx:23] Inline function prop
+     Found: onChange={() => setValue(e.target.value)}
+     Suggestion: Extract to named handler function
+
+  3. [src/hooks/useWebSocket.ts:18] Missing cleanup
+     Found: useEffect with addEventListener but no removeEventListener
+     Fix: Return cleanup function from useEffect
+
+INFO (1)
+  1. [src/components/Card.tsx] Missing displayName
+     Suggestion: Add Card.displayName = 'Card'
+
+SUMMARY
+  Components: 16 clean, 2 with issues
+  Hooks: 5 clean, 1 with issues
+  Anti-patterns: 0 FAIL, 3 WARN, 1 INFO
+
+VERDICT: FAIL (2 blocking issues)
+```
+
+## Examples
+
+```
+/react lint                              # Lint entire project
+/react lint src/components/              # Lint specific directory
+/react lint src/components/Form.tsx      # Lint single file
+/react lint --strict                     # Include TypeScript checks
+/react lint --fix                        # Auto-fix where possible
+```
--- a/plugins/saas-react-platform/commands/react-route.md
+++ b/plugins/saas-react-platform/commands/react-route.md
@@ -0,0 +1,78 @@
+---
+name: react route
+---
+
+# /react route - Add Route
+
+## Skills to Load
+- skills/routing-conventions.md
+- skills/framework-detection.md
+- skills/visual-header.md
+
+## Visual Output
+
+Display header: `REACT-PLATFORM - Route`
+
+## Usage
+
+```
+/react route <path> [--dynamic <param>] [--layout <LayoutName>] [--protected] [--error-boundary]
+```
+
+## Workflow
+
+### 1. Detect Routing System
+Using `skills/framework-detection.md` and `skills/routing-conventions.md`:
+- Next.js App Router: file-based routing in `app/` directory
+- Next.js Pages Router: file-based routing in `pages/` directory
+- React Router (Vite/CRA): route definitions in router config
+- Remix: file-based routing with loader/action conventions
+
+### 2. Create Page Component
+- Generate page component file at the correct path for the routing system:
+  - App Router: `app/<path>/page.tsx`
+  - Pages Router: `pages/<path>.tsx` or `pages/<path>/index.tsx`
+  - React Router: `src/pages/<Path>.tsx`
+- Include loading and error state handling
+- If `--dynamic <param>`: create dynamic route segment (`[param]` or `:param`)
+- If `--protected`: wrap with authentication check or redirect
+
+### 3. Create Layout (if requested)
+If `--layout` specified:
+- App Router: create `app/<path>/layout.tsx`
+- Pages Router: create layout component and wrap page
+- React Router: create layout route component with `<Outlet />`
+
+### 4. Create Error Boundary
+If `--error-boundary` or for page-type routes by default:
+- App Router: create `app/<path>/error.tsx`
+- Other frameworks: create ErrorBoundary wrapper component
+- Include fallback UI with retry action
+- Log errors to console (placeholder for error reporting service)
+
+### 5. Create Loading State
+For App Router projects:
+- Create `app/<path>/loading.tsx` with skeleton UI
+For other frameworks:
+- Include Suspense boundary in page component
+
+### 6. Update Router Config (if applicable)
+For React Router projects:
+- Add route entry to router configuration file
+- Include lazy loading with `React.lazy()` for code splitting
+- Wire up layout if specified
+
+### 7. Summary
+- Display created files with paths
+- Show route URL pattern
+- Note any manual steps required (e.g., adding navigation links)
+
+## Examples
+
+```
+/react route dashboard                              # /dashboard page
+/react route users --dynamic id                     # /users/:id dynamic route
+/react route settings --layout SettingsLayout       # /settings with layout
+/react route admin --protected                      # /admin with auth guard
+/react route products --dynamic slug --error-boundary  # Full setup
+```
--- a/plugins/saas-react-platform/commands/react-setup.md
+++ b/plugins/saas-react-platform/commands/react-setup.md
@@ -0,0 +1,65 @@
+---
+name: react setup
+---
+
+# /react setup - React Project Setup Wizard
+
+## Skills to Load
+- skills/framework-detection.md
+- skills/visual-header.md
+
+## Visual Output
+
+Display header: `REACT-PLATFORM - Setup Wizard`
+
+## Usage
+
+```
+/react setup
+```
+
+## Workflow
+
+### Phase 1: Framework Detection
+- Scan for `package.json` to confirm Node.js project
+- Detect framework using `skills/framework-detection.md`:
+  - Next.js (check for `next` in dependencies, `next.config.*`)
+  - Vite + React (check for `vite` and `@vitejs/plugin-react`)
+  - Create React App (check for `react-scripts`)
+  - Remix (check for `@remix-run/react`)
+- Detect App Router vs Pages Router for Next.js projects
+- Identify TypeScript usage (`tsconfig.json`, `.tsx` files)
+
+### Phase 2: Project Structure Analysis
+- Scan directory structure for existing patterns:
+  - Component directory: `src/components/`, `components/`, `app/components/`
+  - Page directory: `src/pages/`, `app/`, `src/app/`
+  - Hook directory: `src/hooks/`, `hooks/`
+  - Test patterns: `__tests__/`, `*.test.tsx`, `*.spec.tsx`
+- Detect existing barrel files (`index.ts` re-exports)
+- Check for existing state management (Redux store, Zustand stores, Context providers)
+
+### Phase 3: Convention Configuration
+- Confirm or override detected patterns:
+  - Component naming: PascalCase (default)
+  - File naming: PascalCase (`Button.tsx`) or kebab-case (`button.tsx`)
+  - Test co-location: same directory (`Button.test.tsx`) or `__tests__/` subdirectory
+  - CSS approach: CSS Modules, Tailwind, styled-components, vanilla extract
+  - Export style: named exports, default exports, or barrel files
+
+### Phase 4: Summary
+- Display detected configuration:
+  - Framework and version
+  - TypeScript: yes/no
+  - Component directory
+  - Routing pattern
+  - State management (if detected)
+  - CSS approach
+  - Test runner (Jest, Vitest)
+- Store configuration for future commands
+
+## Important Notes
+
+- Uses Bash, Read, Write, AskUserQuestion tools
+- Does not install packages — only detects and configures
+- Configuration stored in project for consistent scaffolding
--- a/plugins/saas-react-platform/commands/react-state.md
+++ b/plugins/saas-react-platform/commands/react-state.md
@@ -0,0 +1,77 @@
+---
+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
+```
--- a/plugins/saas-react-platform/commands/react.md
+++ b/plugins/saas-react-platform/commands/react.md
@@ -0,0 +1,18 @@
+---
+description: React development toolkit — component scaffolding, routing, state management, and linting
+---
+
+# /react
+
+React frontend development toolkit with component scaffolding, routing, state management, and anti-pattern detection.
+
+## Sub-commands
+
+| Sub-command | Description |
+|-------------|-------------|
+| `/react setup` | Setup wizard for React project detection and configuration |
+| `/react component` | Scaffold component with props, types, and tests |
+| `/react route` | Add route with page component and error boundary |
+| `/react state` | Set up state management pattern (Context, Zustand, Redux Toolkit) |
+| `/react hook` | Generate custom hook with types and tests |
+| `/react lint` | Validate component tree and detect anti-patterns |