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>
This commit is contained in:
26
plugins/saas-react-platform/.claude-plugin/plugin.json
Normal file
26
plugins/saas-react-platform/.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "saas-react-platform",
|
||||
"version": "1.0.0",
|
||||
"description": "React frontend development toolkit with component scaffolding, routing, and state management",
|
||||
"author": {
|
||||
"name": "Leo Miranda",
|
||||
"email": "leobmiranda@gmail.com"
|
||||
},
|
||||
"homepage": "https://gitea.hotserv.cloud/personal-projects/leo-claude-mktplace/src/branch/main/plugins/saas-react-platform/README.md",
|
||||
"repository": "https://gitea.hotserv.cloud/personal-projects/leo-claude-mktplace.git",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"react",
|
||||
"nextjs",
|
||||
"vite",
|
||||
"typescript",
|
||||
"components",
|
||||
"routing",
|
||||
"state-management",
|
||||
"frontend"
|
||||
],
|
||||
"commands": [
|
||||
"./commands/"
|
||||
],
|
||||
"domain": "saas"
|
||||
}
|
||||
73
plugins/saas-react-platform/README.md
Normal file
73
plugins/saas-react-platform/README.md
Normal file
@@ -0,0 +1,73 @@
|
||||
# saas-react-platform Plugin
|
||||
|
||||
React frontend development toolkit with component scaffolding, routing, state management, and anti-pattern detection for Claude Code.
|
||||
|
||||
## Overview
|
||||
|
||||
The saas-react-platform plugin provides a complete React development toolkit that adapts to your project's framework (Next.js, Vite, CRA, Remix). It generates TypeScript-first components, configures routing, sets up state management patterns, and audits your component tree for anti-patterns.
|
||||
|
||||
Key features:
|
||||
- **Framework-aware**: Detects Next.js (App Router/Pages Router), Vite, CRA, Remix
|
||||
- **TypeScript-first**: Every generated file includes proper types, generics, and interfaces
|
||||
- **Component scaffolding**: UI, page, layout, and form component templates with tests
|
||||
- **Routing setup**: File-based routing (Next.js) and client-side routing (React Router)
|
||||
- **State patterns**: Context, Zustand, and Redux Toolkit with guided selection
|
||||
- **Anti-pattern detection**: Component tree analysis, hook compliance, TypeScript strictness
|
||||
|
||||
## Installation
|
||||
|
||||
This plugin is part of the Leo Claude Marketplace. Install via the marketplace or copy the `plugins/saas-react-platform/` directory to your Claude Code plugins path.
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `/react setup` | Setup wizard — detect framework, TypeScript, CSS approach |
|
||||
| `/react component` | Scaffold component with props, types, and tests |
|
||||
| `/react route` | Add route with page component, layout, and error boundary |
|
||||
| `/react state` | Set up state management (Context, Zustand, Redux Toolkit) |
|
||||
| `/react hook` | Generate custom hook with types and tests |
|
||||
| `/react lint` | Validate component tree and detect anti-patterns |
|
||||
|
||||
## Quick Start
|
||||
|
||||
```
|
||||
/react setup # Detect project configuration
|
||||
/react component UserProfile --type page # Scaffold a page component
|
||||
/react route dashboard --protected # Add protected route
|
||||
/react state auth --pattern context # Set up auth context
|
||||
/react hook useDebounce --type lifecycle # Generate custom hook
|
||||
/react lint # Audit component tree
|
||||
```
|
||||
|
||||
## Agents
|
||||
|
||||
| Agent | Model | Role |
|
||||
|-------|-------|------|
|
||||
| `react-architect` | Sonnet | Component design, routing, state management, hook generation |
|
||||
| `react-auditor` | Haiku | Read-only component tree analysis and anti-pattern detection |
|
||||
|
||||
## Skills
|
||||
|
||||
| Skill | Purpose |
|
||||
|-------|---------|
|
||||
| `framework-detection` | Detect Next.js, Vite, CRA, Remix, TypeScript, CSS approach |
|
||||
| `component-patterns` | Functional components, prop typing, exports, co-located tests |
|
||||
| `state-patterns` | React Context, Zustand, Redux Toolkit selection and templates |
|
||||
| `routing-conventions` | File-based and client-side routing patterns |
|
||||
| `typescript-patterns` | Utility types, generics, discriminated unions for React |
|
||||
| `visual-header` | Standard visual output formatting |
|
||||
|
||||
## Supported Frameworks
|
||||
|
||||
| Framework | Version | Routing | Status |
|
||||
|-----------|---------|---------|--------|
|
||||
| Next.js (App Router) | 13.4+ | File-based (`app/`) | Full support |
|
||||
| Next.js (Pages Router) | 12+ | File-based (`pages/`) | Full support |
|
||||
| Vite + React | 4+ | React Router | Full support |
|
||||
| Create React App | 5+ | React Router | Full support |
|
||||
| Remix | 2+ | File-based (`routes/`) | Basic support |
|
||||
|
||||
## License
|
||||
|
||||
MIT License — Part of the Leo Claude Marketplace.
|
||||
115
plugins/saas-react-platform/agents/react-architect.md
Normal file
115
plugins/saas-react-platform/agents/react-architect.md
Normal file
@@ -0,0 +1,115 @@
|
||||
---
|
||||
name: react-architect
|
||||
description: Component design, routing setup, and state management for React projects. Use when scaffolding components, adding routes, setting up state patterns, or generating custom hooks.
|
||||
model: sonnet
|
||||
permissionMode: default
|
||||
---
|
||||
|
||||
# React Architect Agent
|
||||
|
||||
You are a React frontend architecture specialist. Your role is to scaffold components, configure routing, set up state management patterns, and generate custom hooks following modern React best practices with full TypeScript support.
|
||||
|
||||
## Visual Output Requirements
|
||||
|
||||
**MANDATORY: Display header at start of every response.**
|
||||
|
||||
```
|
||||
+----------------------------------------------------------------------+
|
||||
| REACT-PLATFORM - [Command Name] |
|
||||
| [Context Line] |
|
||||
+----------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
## Trigger Conditions
|
||||
|
||||
Activate this agent when:
|
||||
- User runs `/react setup`
|
||||
- User runs `/react component <name>`
|
||||
- User runs `/react route <path>`
|
||||
- User runs `/react state <store>`
|
||||
- User runs `/react hook <name>`
|
||||
|
||||
## Skills to Load
|
||||
|
||||
- skills/framework-detection.md
|
||||
- skills/component-patterns.md
|
||||
- skills/state-patterns.md
|
||||
- skills/routing-conventions.md
|
||||
- skills/typescript-patterns.md
|
||||
- skills/visual-header.md
|
||||
|
||||
## Core Principles
|
||||
|
||||
### Framework Awareness
|
||||
Always adapt output to the detected framework:
|
||||
- Next.js App Router: server components by default, `'use client'` directive when needed
|
||||
- Next.js Pages Router: `getServerSideProps`/`getStaticProps` for data fetching
|
||||
- Vite + React: client-side routing with React Router or TanStack Router
|
||||
- Use project-specific conventions detected during `/react setup`
|
||||
|
||||
### TypeScript First
|
||||
- Every component gets a typed props interface
|
||||
- Every hook gets typed parameters and return values
|
||||
- Use generics for reusable patterns (e.g., `useLocalStorage<T>`)
|
||||
- Prefer discriminated unions over optional props for variant states
|
||||
- Avoid `any` — use `unknown` with type guards when type is uncertain
|
||||
|
||||
### Co-location
|
||||
- Tests next to components (`Button.test.tsx` beside `Button.tsx`)
|
||||
- Types in same file unless complex (then `Button.types.ts`)
|
||||
- Styles co-located (CSS Modules, Tailwind, or styled-components)
|
||||
- Stories co-located if Storybook detected (`Button.stories.tsx`)
|
||||
|
||||
### Composition Over Inheritance
|
||||
- Functional components exclusively (no class components)
|
||||
- Composition via `children` prop and render props
|
||||
- Custom hooks for shared logic extraction
|
||||
- Higher-order components only as last resort (prefer hooks)
|
||||
|
||||
### Performance by Default
|
||||
- Use `React.memo` for expensive pure components
|
||||
- Use `useCallback` for handlers passed as props to memoized children
|
||||
- Use `useMemo` for expensive computations
|
||||
- Lazy load page components with `React.lazy()` and `Suspense`
|
||||
- Avoid unnecessary re-renders: extract static JSX outside component
|
||||
|
||||
## Operating Modes
|
||||
|
||||
### Setup Mode
|
||||
- Detect framework, TypeScript, CSS approach, test runner
|
||||
- Analyze existing project structure and conventions
|
||||
- Store configuration for consistent scaffolding
|
||||
|
||||
### Component Mode
|
||||
- Generate component file with typed props
|
||||
- Generate test file with render and interaction tests
|
||||
- Update barrel files if applicable
|
||||
|
||||
### Route Mode
|
||||
- Create page component at correct path for routing system
|
||||
- Add layout, error boundary, loading state as needed
|
||||
- Update router config for client-side routing
|
||||
|
||||
### State Mode
|
||||
- Scaffold Context, Zustand, or Redux Toolkit store
|
||||
- Generate typed actions, selectors, hooks
|
||||
- Wire into application provider tree
|
||||
|
||||
### Hook Mode
|
||||
- Generate custom hook with full TypeScript types
|
||||
- Include cleanup, error handling, loading states
|
||||
- Generate test with renderHook
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Error | Response |
|
||||
|-------|----------|
|
||||
| Not a React project | "No React dependency found in package.json. Run `npm create vite@latest` or `npx create-next-app` first." |
|
||||
| TypeScript not configured | WARN: generate `.jsx` files, suggest adding TypeScript |
|
||||
| Component name conflict | Ask user to confirm overwrite or choose different name |
|
||||
| Unknown CSS framework | Default to inline styles, suggest configuring via `/react setup` |
|
||||
| State library not installed | Display install command, ask user to install first |
|
||||
|
||||
## Communication Style
|
||||
|
||||
Practical and instructive. Show the generated code with clear comments explaining each section. After scaffolding, display a usage example showing how to import and use the created component/hook/route in the project. Mention any manual steps required (e.g., adding navigation links, installing dependencies).
|
||||
119
plugins/saas-react-platform/agents/react-auditor.md
Normal file
119
plugins/saas-react-platform/agents/react-auditor.md
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
name: react-auditor
|
||||
description: Read-only analysis of React component tree and anti-pattern detection. Use when linting components, detecting code smells, or auditing TypeScript usage.
|
||||
model: haiku
|
||||
permissionMode: plan
|
||||
disallowedTools: Write, Edit, MultiEdit
|
||||
---
|
||||
|
||||
# React Auditor Agent
|
||||
|
||||
You are a strict React code quality auditor. Your role is to analyze component trees, detect anti-patterns, validate TypeScript usage, and report issues with actionable fixes. You never modify files — analysis and reporting only.
|
||||
|
||||
## Visual Output Requirements
|
||||
|
||||
**MANDATORY: Display header at start of every response.**
|
||||
|
||||
```
|
||||
+----------------------------------------------------------------------+
|
||||
| REACT-PLATFORM - Lint |
|
||||
| [Target Path] |
|
||||
+----------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
## Trigger Conditions
|
||||
|
||||
Activate this agent when:
|
||||
- User runs `/react lint [path]`
|
||||
- Architect agent requests component tree validation
|
||||
|
||||
## Skills to Load
|
||||
|
||||
- skills/component-patterns.md
|
||||
- skills/typescript-patterns.md
|
||||
- skills/visual-header.md
|
||||
|
||||
## Audit Categories
|
||||
|
||||
### Component Quality (Always Checked)
|
||||
- Missing or incomplete prop types
|
||||
- Missing key prop in list rendering
|
||||
- Index used as key in dynamic lists
|
||||
- Inline function definitions in JSX props
|
||||
- Components exceeding 200 lines
|
||||
- Mixed concerns (data fetching + rendering in one component)
|
||||
- Missing error boundaries on page components
|
||||
- Unused props declared but never referenced
|
||||
|
||||
### Hook Compliance (Always Checked)
|
||||
- Hooks called conditionally or inside loops
|
||||
- Missing cleanup functions in effects with subscriptions
|
||||
- Stale closures from missing dependency array entries
|
||||
- Over-specified dependency arrays causing unnecessary re-renders
|
||||
|
||||
### State Architecture (Always Checked)
|
||||
- Prop drilling (same prop through 3+ levels)
|
||||
- State that could be derived from other state/props
|
||||
- Multiple sequential setState calls in event handlers
|
||||
- Context providers wrapping entire app for localized state
|
||||
- Unnecessary global state for ephemeral UI values
|
||||
|
||||
### TypeScript Strictness (--strict Mode Only)
|
||||
- Explicit or implicit `any` usage
|
||||
- Components without explicit return type annotation
|
||||
- Non-null assertion operator (`!`) usage
|
||||
- Excessive type assertions (`as`) indicating design issues
|
||||
- Missing generic constraints on reusable components
|
||||
|
||||
## Severity Definitions
|
||||
|
||||
| Level | Criteria | Action Required |
|
||||
|-------|----------|-----------------|
|
||||
| **FAIL** | Missing key prop, conditional hook calls, broken Rules of Hooks | Must fix — these cause runtime errors |
|
||||
| **WARN** | Inline functions, large components, prop drilling, missing cleanup | Should fix — affects performance or maintainability |
|
||||
| **INFO** | Missing displayName, missing return type, derived state opportunities | Consider for improvement |
|
||||
|
||||
## Report Format
|
||||
|
||||
```
|
||||
+----------------------------------------------------------------------+
|
||||
| REACT-PLATFORM - Lint |
|
||||
| [path] |
|
||||
+----------------------------------------------------------------------+
|
||||
|
||||
Files Scanned: N
|
||||
Components Analyzed: N
|
||||
Hooks Analyzed: N
|
||||
|
||||
FAIL (N)
|
||||
1. [file:line] Description
|
||||
Found: problematic code
|
||||
Fix: corrective action
|
||||
|
||||
WARN (N)
|
||||
1. [file:line] Description
|
||||
Suggestion: improvement
|
||||
|
||||
INFO (N)
|
||||
1. [file] Description
|
||||
Note: context
|
||||
|
||||
SUMMARY
|
||||
Components: N clean, N with issues
|
||||
Hooks: N clean, N with issues
|
||||
|
||||
VERDICT: PASS | FAIL (N blocking issues)
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Error | Response |
|
||||
|-------|----------|
|
||||
| No React files found | "No .tsx/.jsx files found in target path." |
|
||||
| Invalid path | "Path not found: {path}" |
|
||||
| Parse error in file | WARN: "Could not parse {file}: {error}" — skip file, continue |
|
||||
| Empty directory | "No files to analyze in {path}" |
|
||||
|
||||
## Communication Style
|
||||
|
||||
Precise and actionable. Every finding includes: exact file and line, what was found, and how to fix it. Group findings by severity. Prioritize FAIL issues that cause runtime errors over style issues. Include a clear PASS/FAIL verdict at the end.
|
||||
81
plugins/saas-react-platform/claude-md-integration.md
Normal file
81
plugins/saas-react-platform/claude-md-integration.md
Normal file
@@ -0,0 +1,81 @@
|
||||
# saas-react-platform Plugin - CLAUDE.md Integration
|
||||
|
||||
Add this section to your project's CLAUDE.md to enable saas-react-platform plugin features.
|
||||
|
||||
## Suggested CLAUDE.md Section
|
||||
|
||||
```markdown
|
||||
## React Development (saas-react-platform)
|
||||
|
||||
This project uses the saas-react-platform plugin for React frontend development.
|
||||
|
||||
### Configuration
|
||||
|
||||
**Framework**: Auto-detected from package.json and project structure
|
||||
**TypeScript**: Auto-detected from tsconfig.json
|
||||
**CSS Approach**: Auto-detected (Tailwind, CSS Modules, styled-components)
|
||||
|
||||
### Available Commands
|
||||
|
||||
| Command | Purpose |
|
||||
|---------|---------|
|
||||
| `/react setup` | Configure framework detection and conventions |
|
||||
| `/react component` | Scaffold component with types and tests |
|
||||
| `/react route` | Add route with page, layout, error boundary |
|
||||
| `/react state` | Set up state management pattern |
|
||||
| `/react hook` | Generate custom hook with types and tests |
|
||||
| `/react lint` | Audit component tree for anti-patterns |
|
||||
|
||||
### Component Conventions
|
||||
|
||||
- Functional components only (no class components)
|
||||
- TypeScript interfaces for all props
|
||||
- Co-located tests (`Component.test.tsx` beside `Component.tsx`)
|
||||
- Barrel files (`index.ts`) for clean imports
|
||||
|
||||
### State Management Guide
|
||||
|
||||
| Complexity | Pattern | Example |
|
||||
|------------|---------|---------|
|
||||
| Simple (theme, locale) | React Context | `/react state theme --pattern context` |
|
||||
| Medium (cart, filters) | Zustand | `/react state cart --pattern zustand` |
|
||||
| Complex (entities, async) | Redux Toolkit | `/react state products --pattern redux` |
|
||||
|
||||
### Typical Workflow
|
||||
|
||||
```
|
||||
/react setup # First-time detection
|
||||
/react component DataTable --type ui # Scaffold component
|
||||
/react route dashboard --layout DashboardLayout # Add route
|
||||
/react lint src/components/ # Check for issues
|
||||
```
|
||||
```
|
||||
|
||||
## Environment Variables
|
||||
|
||||
No environment variables required. All configuration is auto-detected from the project structure.
|
||||
|
||||
## Typical Workflows
|
||||
|
||||
### New Feature Development
|
||||
```
|
||||
/react component FeatureName --type page # Create page component
|
||||
/react route feature-name --layout MainLayout # Add route
|
||||
/react state featureData --pattern zustand # Set up state
|
||||
/react hook useFeatureData --type data # Create data hook
|
||||
/react lint src/features/feature-name/ # Validate
|
||||
```
|
||||
|
||||
### Component Library
|
||||
```
|
||||
/react component Button --type ui # Presentational component
|
||||
/react component Modal --type ui # Another component
|
||||
/react lint src/components/ # Audit all components
|
||||
```
|
||||
|
||||
### Form Development
|
||||
```
|
||||
/react component ContactForm --type form # Form with validation
|
||||
/react hook useContactForm --type form # Form logic hook
|
||||
/react lint src/components/ContactForm/ # Check form patterns
|
||||
```
|
||||
74
plugins/saas-react-platform/commands/react-component.md
Normal file
74
plugins/saas-react-platform/commands/react-component.md
Normal file
@@ -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
|
||||
```
|
||||
80
plugins/saas-react-platform/commands/react-hook.md
Normal file
80
plugins/saas-react-platform/commands/react-hook.md
Normal file
@@ -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
|
||||
```
|
||||
127
plugins/saas-react-platform/commands/react-lint.md
Normal file
127
plugins/saas-react-platform/commands/react-lint.md
Normal file
@@ -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
|
||||
```
|
||||
78
plugins/saas-react-platform/commands/react-route.md
Normal file
78
plugins/saas-react-platform/commands/react-route.md
Normal file
@@ -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
|
||||
```
|
||||
65
plugins/saas-react-platform/commands/react-setup.md
Normal file
65
plugins/saas-react-platform/commands/react-setup.md
Normal file
@@ -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
|
||||
77
plugins/saas-react-platform/commands/react-state.md
Normal file
77
plugins/saas-react-platform/commands/react-state.md
Normal file
@@ -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
|
||||
```
|
||||
18
plugins/saas-react-platform/commands/react.md
Normal file
18
plugins/saas-react-platform/commands/react.md
Normal file
@@ -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 |
|
||||
134
plugins/saas-react-platform/skills/component-patterns.md
Normal file
134
plugins/saas-react-platform/skills/component-patterns.md
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
name: component-patterns
|
||||
description: Component structure conventions including functional components, prop typing, exports, and co-located tests
|
||||
---
|
||||
|
||||
# Component Patterns
|
||||
|
||||
## Purpose
|
||||
|
||||
Define standard patterns for React component scaffolding. This skill ensures all generated components follow consistent structure, typing, export conventions, and test co-location.
|
||||
|
||||
---
|
||||
|
||||
## Component File Structure
|
||||
|
||||
Every component file follows this order:
|
||||
|
||||
```typescript
|
||||
// 1. Imports (external first, then internal, then styles)
|
||||
import { type FC } from 'react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import styles from './ComponentName.module.css';
|
||||
|
||||
// 2. Types (inline for simple, separate file for complex)
|
||||
interface ComponentNameProps {
|
||||
title: string;
|
||||
onAction: () => void;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
// 3. Component definition
|
||||
/**
|
||||
* Brief description of what this component does.
|
||||
*
|
||||
* @component
|
||||
* @example
|
||||
* <ComponentName title="Hello" onAction={() => console.log('clicked')} />
|
||||
*/
|
||||
const ComponentName: FC<ComponentNameProps> = ({ title, onAction, children }) => {
|
||||
return (
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
{children}
|
||||
<button onClick={onAction}>Action</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 4. Display name (for DevTools)
|
||||
ComponentName.displayName = 'ComponentName';
|
||||
|
||||
// 5. Export
|
||||
export default ComponentName;
|
||||
```
|
||||
|
||||
## Component Type Templates
|
||||
|
||||
### UI Component (presentational)
|
||||
- Props in, JSX out — no side effects, no data fetching
|
||||
- Pure function: same props always produce same output
|
||||
- Accept `className` prop for style override flexibility
|
||||
- Accept `children` if component is a container/wrapper
|
||||
|
||||
### Page Component
|
||||
- Includes data fetching (server component in App Router, `useEffect` in client)
|
||||
- Loading state with skeleton placeholder
|
||||
- Error state with retry action
|
||||
- `'use client'` directive only if client interactivity required (App Router)
|
||||
|
||||
### Layout Component
|
||||
- Accepts `children: React.ReactNode` as required prop
|
||||
- Optional slot props for sidebar, header, footer
|
||||
- Handles responsive behavior
|
||||
- Wraps with error boundary
|
||||
|
||||
### Form Component
|
||||
- Controlled inputs with `useState` or form library (`react-hook-form`)
|
||||
- Typed form values interface
|
||||
- Validation schema (Zod recommended)
|
||||
- Submit handler with loading state
|
||||
- Error display per field and form-level
|
||||
|
||||
## Test Co-location Patterns
|
||||
|
||||
Test file sits next to component file:
|
||||
|
||||
```
|
||||
src/components/Button/
|
||||
Button.tsx
|
||||
Button.test.tsx
|
||||
Button.module.css (if CSS Modules)
|
||||
index.ts (barrel file)
|
||||
```
|
||||
|
||||
### Minimum Test Coverage
|
||||
|
||||
```typescript
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import ComponentName from './ComponentName';
|
||||
|
||||
describe('ComponentName', () => {
|
||||
it('renders without crashing', () => {
|
||||
render(<ComponentName title="Test" onAction={() => {}} />);
|
||||
expect(screen.getByText('Test')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onAction when button clicked', async () => {
|
||||
const onAction = vi.fn();
|
||||
render(<ComponentName title="Test" onAction={onAction} />);
|
||||
await userEvent.click(screen.getByRole('button'));
|
||||
expect(onAction).toHaveBeenCalledOnce();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Barrel File Convention
|
||||
|
||||
Each component directory exports through `index.ts`:
|
||||
|
||||
```typescript
|
||||
export { default as ComponentName } from './ComponentName';
|
||||
export type { ComponentNameProps } from './ComponentName';
|
||||
```
|
||||
|
||||
## Anti-Patterns to Avoid
|
||||
|
||||
| Pattern | Why | Alternative |
|
||||
|---------|-----|-------------|
|
||||
| Class components | Legacy API, verbose | Functional components + hooks |
|
||||
| `React.FC` with children | Children always optional, incorrect type narrowing | Explicit `children` prop in interface |
|
||||
| Prop spreading `{...props}` | Obscures expected interface | Explicitly destructure needed props |
|
||||
| `useEffect` for derived state | Unnecessary render cycle | Compute during render or `useMemo` |
|
||||
| `forwardRef` without `displayName` | Unnamed in DevTools | Always set `displayName` |
|
||||
96
plugins/saas-react-platform/skills/framework-detection.md
Normal file
96
plugins/saas-react-platform/skills/framework-detection.md
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
name: framework-detection
|
||||
description: Detect React framework, TypeScript configuration, routing structure, and project conventions
|
||||
---
|
||||
|
||||
# Framework Detection
|
||||
|
||||
## Purpose
|
||||
|
||||
Analyze a project's `package.json`, configuration files, and directory structure to determine the React framework, TypeScript usage, routing pattern, and CSS approach. This skill is loaded at the start of setup and routing commands to adapt output to the project's specific toolchain.
|
||||
|
||||
---
|
||||
|
||||
## Framework Detection Rules
|
||||
|
||||
Check `package.json` dependencies and devDependencies in this order (first match wins):
|
||||
|
||||
| Framework | Detection Criteria | Routing |
|
||||
|-----------|-------------------|---------|
|
||||
| **Next.js (App Router)** | `next` in deps + `app/` directory exists | File-based (`app/page.tsx`) |
|
||||
| **Next.js (Pages Router)** | `next` in deps + `pages/` directory exists (no `app/`) | File-based (`pages/index.tsx`) |
|
||||
| **Remix** | `@remix-run/react` in deps | File-based with loaders (`routes/`) |
|
||||
| **Vite + React** | `vite` in deps + `@vitejs/plugin-react` | Client-side (react-router or tanstack-router) |
|
||||
| **Create React App** | `react-scripts` in deps | Client-side (react-router) |
|
||||
| **Gatsby** | `gatsby` in deps | File-based (`src/pages/`) |
|
||||
|
||||
## TypeScript Detection
|
||||
|
||||
| Signal | Conclusion |
|
||||
|--------|------------|
|
||||
| `tsconfig.json` exists | TypeScript project |
|
||||
| `typescript` in devDependencies | TypeScript project |
|
||||
| `.tsx` files in `src/` or `app/` | TypeScript project |
|
||||
| None of the above | JavaScript project — generate `.jsx` files |
|
||||
|
||||
## CSS Approach Detection
|
||||
|
||||
Check in order:
|
||||
|
||||
| Signal | Approach |
|
||||
|--------|----------|
|
||||
| `tailwindcss` in deps + `tailwind.config.*` | Tailwind CSS |
|
||||
| `*.module.css` or `*.module.scss` files exist | CSS Modules |
|
||||
| `styled-components` in deps | styled-components |
|
||||
| `@emotion/react` in deps | Emotion |
|
||||
| `vanilla-extract` in deps | Vanilla Extract |
|
||||
| None detected | Plain CSS or inline styles |
|
||||
|
||||
## Test Runner Detection
|
||||
|
||||
| Signal | Runner |
|
||||
|--------|--------|
|
||||
| `vitest` in devDependencies | Vitest |
|
||||
| `jest` in devDependencies or `jest.config.*` exists | Jest |
|
||||
| `@testing-library/react` in deps | Testing Library (works with both) |
|
||||
| `cypress` in deps | Cypress (E2E, not unit) |
|
||||
|
||||
## State Management Detection
|
||||
|
||||
| Signal | Library |
|
||||
|--------|---------|
|
||||
| `zustand` in dependencies | Zustand |
|
||||
| `@reduxjs/toolkit` in dependencies | Redux Toolkit |
|
||||
| `recoil` in dependencies | Recoil |
|
||||
| `jotai` in dependencies | Jotai |
|
||||
| `mobx-react` in dependencies | MobX |
|
||||
| Files with `createContext` + `useReducer` pattern | React Context (built-in) |
|
||||
|
||||
## Directory Structure Patterns
|
||||
|
||||
Common patterns to detect and respect:
|
||||
|
||||
| Pattern | Typical Path | Detection |
|
||||
|---------|-------------|-----------|
|
||||
| Feature-based | `src/features/<feature>/components/` | `features/` directory with subdirectories |
|
||||
| Component-based | `src/components/<Component>/` | `components/` with PascalCase subdirectories |
|
||||
| Flat components | `src/components/*.tsx` | `components/` with files only, no subdirectories |
|
||||
| Atomic design | `src/components/atoms/`, `molecules/`, `organisms/` | Atomic naming directories |
|
||||
|
||||
## Output
|
||||
|
||||
Store detected configuration as a reference object for other skills:
|
||||
|
||||
```json
|
||||
{
|
||||
"framework": "nextjs-app",
|
||||
"typescript": true,
|
||||
"css_approach": "tailwind",
|
||||
"test_runner": "vitest",
|
||||
"state_management": "zustand",
|
||||
"component_dir": "src/components",
|
||||
"pages_dir": "app",
|
||||
"hooks_dir": "src/hooks",
|
||||
"structure_pattern": "feature-based"
|
||||
}
|
||||
```
|
||||
174
plugins/saas-react-platform/skills/routing-conventions.md
Normal file
174
plugins/saas-react-platform/skills/routing-conventions.md
Normal file
@@ -0,0 +1,174 @@
|
||||
---
|
||||
name: routing-conventions
|
||||
description: File-based routing (Next.js), react-router conventions, dynamic routes, layouts, and middleware
|
||||
---
|
||||
|
||||
# Routing Conventions
|
||||
|
||||
## Purpose
|
||||
|
||||
Define routing patterns for each supported framework. This skill ensures route scaffolding produces the correct file structure, naming conventions, and framework-specific boilerplate.
|
||||
|
||||
---
|
||||
|
||||
## Next.js App Router (v13.4+)
|
||||
|
||||
### File Conventions
|
||||
|
||||
| File | Purpose |
|
||||
|------|---------|
|
||||
| `page.tsx` | Route UI — required to make segment publicly accessible |
|
||||
| `layout.tsx` | Shared layout wrapping child pages — persists across navigations |
|
||||
| `loading.tsx` | Loading UI shown while page is loading (Suspense boundary) |
|
||||
| `error.tsx` | Error UI shown when page throws (must be client component) |
|
||||
| `not-found.tsx` | 404 UI for segment |
|
||||
| `route.ts` | API route handler (GET, POST, etc.) |
|
||||
|
||||
### Route Patterns
|
||||
|
||||
```
|
||||
app/
|
||||
page.tsx # /
|
||||
about/page.tsx # /about
|
||||
blog/page.tsx # /blog
|
||||
blog/[slug]/page.tsx # /blog/:slug (dynamic)
|
||||
dashboard/
|
||||
layout.tsx # Shared dashboard layout
|
||||
page.tsx # /dashboard
|
||||
settings/page.tsx # /dashboard/settings
|
||||
(marketing)/ # Route group (no URL segment)
|
||||
pricing/page.tsx # /pricing
|
||||
```
|
||||
|
||||
### Dynamic Routes
|
||||
|
||||
| Pattern | File Path | URL Match |
|
||||
|---------|-----------|-----------|
|
||||
| Dynamic segment | `[id]/page.tsx` | `/users/123` |
|
||||
| Catch-all | `[...slug]/page.tsx` | `/docs/a/b/c` |
|
||||
| Optional catch-all | `[[...slug]]/page.tsx` | `/docs` or `/docs/a/b` |
|
||||
|
||||
### Server vs Client Components
|
||||
|
||||
- Pages are Server Components by default
|
||||
- Add `'use client'` directive only when using: `useState`, `useEffect`, `onClick`, browser APIs
|
||||
- Pass data from server to client via props, not through context
|
||||
|
||||
## Next.js Pages Router (Legacy)
|
||||
|
||||
### File Conventions
|
||||
|
||||
```
|
||||
pages/
|
||||
index.tsx # /
|
||||
about.tsx # /about
|
||||
blog/index.tsx # /blog
|
||||
blog/[slug].tsx # /blog/:slug
|
||||
_app.tsx # App wrapper (layouts)
|
||||
_document.tsx # HTML document customization
|
||||
404.tsx # Custom 404 page
|
||||
api/users.ts # API route: /api/users
|
||||
```
|
||||
|
||||
### Data Fetching
|
||||
|
||||
| Method | When | Use Case |
|
||||
|--------|------|----------|
|
||||
| `getServerSideProps` | Every request | Dynamic data, auth-gated pages |
|
||||
| `getStaticProps` | Build time | Blog posts, marketing pages |
|
||||
| `getStaticPaths` | Build time | Dynamic routes with static generation |
|
||||
|
||||
## React Router (v6+)
|
||||
|
||||
### Route Definition
|
||||
|
||||
```typescript
|
||||
// router.tsx
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
|
||||
import { lazy, Suspense } from 'react';
|
||||
|
||||
const Dashboard = lazy(() => import('./pages/Dashboard'));
|
||||
const Settings = lazy(() => import('./pages/Settings'));
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <RootLayout />,
|
||||
errorElement: <ErrorBoundary />,
|
||||
children: [
|
||||
{ index: true, element: <Home /> },
|
||||
{
|
||||
path: 'dashboard',
|
||||
element: <Suspense fallback={<Loading />}><Dashboard /></Suspense>,
|
||||
},
|
||||
{
|
||||
path: 'users/:id',
|
||||
element: <UserProfile />,
|
||||
loader: userLoader,
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
### Layout Pattern
|
||||
|
||||
```typescript
|
||||
// layouts/RootLayout.tsx
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
export function RootLayout() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<main>
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Protected Routes
|
||||
|
||||
### Pattern: Auth Guard Component
|
||||
|
||||
```typescript
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const { isAuthenticated, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) return <LoadingSkeleton />;
|
||||
if (!isAuthenticated) return <Navigate to="/login" replace />;
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
```
|
||||
|
||||
### App Router: Middleware
|
||||
|
||||
```typescript
|
||||
// middleware.ts (project root)
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const token = request.cookies.get('session');
|
||||
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
|
||||
return NextResponse.redirect(new URL('/login', request.url));
|
||||
}
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = { matcher: ['/dashboard/:path*'] };
|
||||
```
|
||||
|
||||
## Error Boundaries
|
||||
|
||||
Every page route should have an error boundary:
|
||||
|
||||
- App Router: `error.tsx` file in route segment (automatically client component)
|
||||
- React Router: `errorElement` prop on route definition
|
||||
- Fallback: Generic `ErrorBoundary` component wrapping page content
|
||||
|
||||
Include retry functionality and user-friendly error message. Log error details to console (placeholder for error reporting service).
|
||||
203
plugins/saas-react-platform/skills/state-patterns.md
Normal file
203
plugins/saas-react-platform/skills/state-patterns.md
Normal file
@@ -0,0 +1,203 @@
|
||||
---
|
||||
name: state-patterns
|
||||
description: State management patterns — React Context for simple, Zustand for medium, Redux Toolkit for complex
|
||||
---
|
||||
|
||||
# State Management Patterns
|
||||
|
||||
## Purpose
|
||||
|
||||
Guide state management decisions and provide scaffolding templates for React Context, Zustand, and Redux Toolkit. This skill helps select the right pattern based on complexity and generates consistent store implementations.
|
||||
|
||||
---
|
||||
|
||||
## Decision Framework
|
||||
|
||||
| Criteria | Context | Zustand | Redux Toolkit |
|
||||
|----------|---------|---------|---------------|
|
||||
| **Scope** | Single feature, few consumers | Multiple features, medium consumers | App-wide, many consumers |
|
||||
| **Complexity** | Simple values (theme, locale, auth) | Medium (cart, form wizard, filters) | Complex (normalized entities, async workflows) |
|
||||
| **Async logic** | Manual with `useEffect` | Built-in with async actions | `createAsyncThunk` with lifecycle |
|
||||
| **DevTools** | None built-in | Optional middleware | Full Redux DevTools integration |
|
||||
| **Dependencies** | None (built-in React) | ~2KB, zero config | ~12KB, more boilerplate |
|
||||
| **Learning curve** | Low | Low | Medium-High |
|
||||
|
||||
### Quick Decision
|
||||
|
||||
- Need to share a simple value across a few components? **Context**
|
||||
- Need a store with some async logic and moderate complexity? **Zustand**
|
||||
- Need normalized state, middleware, complex async flows, or strict patterns? **Redux Toolkit**
|
||||
|
||||
## React Context Template
|
||||
|
||||
```typescript
|
||||
// stores/auth-context.tsx
|
||||
import { createContext, useContext, useReducer, type ReactNode } from 'react';
|
||||
|
||||
// State type
|
||||
interface AuthState {
|
||||
user: User | null;
|
||||
isAuthenticated: boolean;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
// Action types
|
||||
type AuthAction =
|
||||
| { type: 'LOGIN'; payload: User }
|
||||
| { type: 'LOGOUT' }
|
||||
| { type: 'SET_LOADING'; payload: boolean };
|
||||
|
||||
// Initial state
|
||||
const initialState: AuthState = {
|
||||
user: null,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
};
|
||||
|
||||
// Reducer
|
||||
function authReducer(state: AuthState, action: AuthAction): AuthState {
|
||||
switch (action.type) {
|
||||
case 'LOGIN':
|
||||
return { ...state, user: action.payload, isAuthenticated: true, isLoading: false };
|
||||
case 'LOGOUT':
|
||||
return { ...state, user: null, isAuthenticated: false };
|
||||
case 'SET_LOADING':
|
||||
return { ...state, isLoading: action.payload };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// Context
|
||||
const AuthContext = createContext<{
|
||||
state: AuthState;
|
||||
dispatch: React.Dispatch<AuthAction>;
|
||||
} | null>(null);
|
||||
|
||||
// Provider
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [state, dispatch] = useReducer(authReducer, initialState);
|
||||
return (
|
||||
<AuthContext.Provider value={{ state, dispatch }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// Hook with validation
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error('useAuth must be used within AuthProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
```
|
||||
|
||||
## Zustand Template
|
||||
|
||||
```typescript
|
||||
// stores/cart-store.ts
|
||||
import { create } from 'zustand';
|
||||
import { devtools, persist } from 'zustand/middleware';
|
||||
|
||||
interface CartItem {
|
||||
id: string;
|
||||
name: string;
|
||||
price: number;
|
||||
quantity: number;
|
||||
}
|
||||
|
||||
interface CartState {
|
||||
items: CartItem[];
|
||||
addItem: (item: Omit<CartItem, 'quantity'>) => void;
|
||||
removeItem: (id: string) => void;
|
||||
clearCart: () => void;
|
||||
totalPrice: () => number;
|
||||
}
|
||||
|
||||
export const useCartStore = create<CartState>()(
|
||||
devtools(
|
||||
persist(
|
||||
(set, get) => ({
|
||||
items: [],
|
||||
addItem: (item) => set((state) => {
|
||||
const existing = state.items.find((i) => i.id === item.id);
|
||||
if (existing) {
|
||||
return { items: state.items.map((i) =>
|
||||
i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
|
||||
)};
|
||||
}
|
||||
return { items: [...state.items, { ...item, quantity: 1 }] };
|
||||
}),
|
||||
removeItem: (id) => set((state) => ({
|
||||
items: state.items.filter((i) => i.id !== id),
|
||||
})),
|
||||
clearCart: () => set({ items: [] }),
|
||||
totalPrice: () => get().items.reduce(
|
||||
(sum, item) => sum + item.price * item.quantity, 0
|
||||
),
|
||||
}),
|
||||
{ name: 'cart-storage' }
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
## Redux Toolkit Template
|
||||
|
||||
```typescript
|
||||
// store/slices/productsSlice.ts
|
||||
import { createSlice, createAsyncThunk, type PayloadAction } from '@reduxjs/toolkit';
|
||||
|
||||
// Async thunk
|
||||
export const fetchProducts = createAsyncThunk(
|
||||
'products/fetchAll',
|
||||
async (_, { rejectWithValue }) => {
|
||||
try {
|
||||
const response = await fetch('/api/products');
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
return rejectWithValue('Failed to fetch products');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Slice
|
||||
const productsSlice = createSlice({
|
||||
name: 'products',
|
||||
initialState: {
|
||||
items: [] as Product[],
|
||||
status: 'idle' as 'idle' | 'loading' | 'succeeded' | 'failed',
|
||||
error: null as string | null,
|
||||
},
|
||||
reducers: {
|
||||
updateProduct: (state, action: PayloadAction<Product>) => {
|
||||
const index = state.items.findIndex((p) => p.id === action.payload.id);
|
||||
if (index !== -1) state.items[index] = action.payload;
|
||||
},
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(fetchProducts.pending, (state) => { state.status = 'loading'; })
|
||||
.addCase(fetchProducts.fulfilled, (state, action) => {
|
||||
state.status = 'succeeded';
|
||||
state.items = action.payload;
|
||||
})
|
||||
.addCase(fetchProducts.rejected, (state, action) => {
|
||||
state.status = 'failed';
|
||||
state.error = action.payload as string;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const { updateProduct } = productsSlice.actions;
|
||||
export default productsSlice.reducer;
|
||||
```
|
||||
|
||||
## When NOT to Use Global State
|
||||
|
||||
- Form input values (use local `useState` or `react-hook-form`)
|
||||
- UI toggle state (modal open/close) unless shared across routes
|
||||
- Computed values derivable from existing state (compute inline or `useMemo`)
|
||||
- Server cache data (use TanStack Query or SWR instead of Redux)
|
||||
137
plugins/saas-react-platform/skills/typescript-patterns.md
Normal file
137
plugins/saas-react-platform/skills/typescript-patterns.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
name: typescript-patterns
|
||||
description: Utility types, generics for components, discriminated unions for props, and strict null checks
|
||||
---
|
||||
|
||||
# TypeScript Patterns for React
|
||||
|
||||
## Purpose
|
||||
|
||||
Define TypeScript patterns specific to React component development. This skill ensures generated code uses idiomatic TypeScript with proper generic constraints, discriminated unions, and utility types.
|
||||
|
||||
---
|
||||
|
||||
## Props Interface Conventions
|
||||
|
||||
### Basic Props
|
||||
```typescript
|
||||
interface ButtonProps {
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
variant?: 'primary' | 'secondary' | 'ghost';
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
|
||||
### Props with Children
|
||||
```typescript
|
||||
interface CardProps {
|
||||
title: string;
|
||||
children: React.ReactNode; // Explicit, not via FC
|
||||
}
|
||||
```
|
||||
|
||||
### Discriminated Union Props
|
||||
Use when a component has mutually exclusive modes:
|
||||
```typescript
|
||||
type AlertProps =
|
||||
| { variant: 'success'; message: string }
|
||||
| { variant: 'error'; message: string; retry: () => void }
|
||||
| { variant: 'loading'; progress?: number };
|
||||
```
|
||||
|
||||
### Extending HTML Element Props
|
||||
```typescript
|
||||
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
||||
label: string;
|
||||
error?: string;
|
||||
size?: 'sm' | 'md' | 'lg'; // Custom size, not HTML size
|
||||
}
|
||||
```
|
||||
|
||||
## Generic Component Patterns
|
||||
|
||||
### Generic List Component
|
||||
```typescript
|
||||
interface ListProps<T> {
|
||||
items: T[];
|
||||
renderItem: (item: T, index: number) => React.ReactNode;
|
||||
keyExtractor: (item: T) => string;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
function List<T>({ items, renderItem, keyExtractor, emptyMessage }: ListProps<T>) {
|
||||
if (items.length === 0) return <p>{emptyMessage ?? 'No items'}</p>;
|
||||
return <ul>{items.map((item, i) => <li key={keyExtractor(item)}>{renderItem(item, i)}</li>)}</ul>;
|
||||
}
|
||||
```
|
||||
|
||||
### Generic Hook
|
||||
```typescript
|
||||
function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T | ((prev: T) => T)) => void] {
|
||||
// Implementation
|
||||
}
|
||||
```
|
||||
|
||||
## Utility Types for React
|
||||
|
||||
| Type | Use Case | Example |
|
||||
|------|----------|---------|
|
||||
| `React.ReactNode` | Any renderable content | `children: React.ReactNode` |
|
||||
| `React.ReactElement` | JSX element only (not string/number) | `icon: React.ReactElement` |
|
||||
| `React.ComponentPropsWithRef<'div'>` | All div props including ref | Extending native elements |
|
||||
| `React.MouseEventHandler<HTMLButtonElement>` | Typed event handler | `onClick: React.MouseEventHandler<HTMLButtonElement>` |
|
||||
| `React.ChangeEvent<HTMLInputElement>` | Input change event | `(e: React.ChangeEvent<HTMLInputElement>) => void` |
|
||||
| `React.FormEvent<HTMLFormElement>` | Form submit event | `onSubmit: React.FormEventHandler<HTMLFormElement>` |
|
||||
| `React.CSSProperties` | Inline style object | `style?: React.CSSProperties` |
|
||||
|
||||
## Common Utility Patterns
|
||||
|
||||
### Required Pick
|
||||
Make specific properties required from an otherwise optional interface:
|
||||
```typescript
|
||||
type RequiredName = Required<Pick<UserProps, 'firstName' | 'lastName'>> & Omit<UserProps, 'firstName' | 'lastName'>;
|
||||
```
|
||||
|
||||
### Extract Prop Types from Component
|
||||
```typescript
|
||||
type ButtonProps = React.ComponentProps<typeof Button>;
|
||||
```
|
||||
|
||||
### Async State Pattern
|
||||
```typescript
|
||||
type AsyncState<T> =
|
||||
| { status: 'idle' }
|
||||
| { status: 'loading' }
|
||||
| { status: 'success'; data: T }
|
||||
| { status: 'error'; error: string };
|
||||
```
|
||||
|
||||
## Strict Null Checking Patterns
|
||||
|
||||
### Guard Hooks
|
||||
```typescript
|
||||
function useRequiredContext<T>(context: React.Context<T | null>, name: string): T {
|
||||
const value = useContext(context);
|
||||
if (value === null) throw new Error(`${name} must be used within its Provider`);
|
||||
return value;
|
||||
}
|
||||
```
|
||||
|
||||
### Narrowing with Type Guards
|
||||
```typescript
|
||||
function isUser(value: unknown): value is User {
|
||||
return typeof value === 'object' && value !== null && 'id' in value && 'email' in value;
|
||||
}
|
||||
```
|
||||
|
||||
## Things to Avoid
|
||||
|
||||
| Anti-Pattern | Why | Alternative |
|
||||
|-------------|-----|-------------|
|
||||
| `React.FC` | Implicit children, no generics | Explicit typed function |
|
||||
| `any` for event handlers | Loses type safety | `React.MouseEvent<HTMLButtonElement>` |
|
||||
| `as` for DOM queries | Runtime type mismatch risk | Type guards or `instanceof` |
|
||||
| `!` non-null assertion | Hides potential null bugs | Conditional rendering or optional chaining |
|
||||
| `enum` for prop variants | Not tree-shakeable, numeric by default | String union types |
|
||||
28
plugins/saas-react-platform/skills/visual-header.md
Normal file
28
plugins/saas-react-platform/skills/visual-header.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# Visual Header Skill
|
||||
|
||||
Standard visual header for saas-react-platform commands.
|
||||
|
||||
## Header Template
|
||||
|
||||
```
|
||||
+----------------------------------------------------------------------+
|
||||
| REACT-PLATFORM - [Context] |
|
||||
+----------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
## Context Values by Command
|
||||
|
||||
| Command | Context |
|
||||
|---------|---------|
|
||||
| `/react setup` | Setup Wizard |
|
||||
| `/react component` | Component |
|
||||
| `/react route` | Route |
|
||||
| `/react state` | State Management |
|
||||
| `/react hook` | Custom Hook |
|
||||
| `/react lint` | Lint |
|
||||
| Agent mode (react-architect) | Architecture |
|
||||
| Agent mode (react-auditor) | Audit |
|
||||
|
||||
## Usage
|
||||
|
||||
Display header at the start of every command response before proceeding with the operation.
|
||||
Reference in New Issue
Block a user