Files
leo-claude-mktplace/plugins/saas-react-platform/claude-md-integration.md
lmiranda 2d51df7a42 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

2.8 KiB

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

## 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