lmiranda
2d51df7a42
Phase 1b: Rename all ~94 commands across 12 plugins to /<noun> <action> sub-command pattern. Git-flow consolidated from 8→5 commands (commit variants absorbed into --push/--merge/--sync flags). Dispatch files, name: frontmatter, and cross-reference updates for all plugins. Phase 2: Design documents for 8 new plugins in docs/designs/. Phase 3: Scaffold 8 new plugins — saas-api-platform, saas-db-migrate, saas-react-platform, saas-test-pilot, data-seed, ops-release-manager, ops-deploy-pipeline, debug-mcp. Each with plugin.json, commands, agents, skills, README, and claude-md-integration. Marketplace grows from 12→20. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
74 lines
2.6 KiB
Markdown
74 lines
2.6 KiB
Markdown
# Design: saas-react-platform
|
|
|
|
**Domain:** `saas`
|
|
**Target Version:** v9.4.0
|
|
|
|
## Purpose
|
|
|
|
React frontend development toolkit with component scaffolding, routing setup, state management patterns, and build configuration. Supports Next.js and Vite-based React projects with TypeScript.
|
|
|
|
## Target Users
|
|
|
|
- Frontend developers building React applications
|
|
- Teams using Next.js or Vite + React
|
|
- Projects needing consistent component architecture
|
|
|
|
## Commands
|
|
|
|
| Command | Description |
|
|
|---------|-------------|
|
|
| `/react setup` | Setup wizard — detect framework (Next.js/Vite), configure paths |
|
|
| `/react component` | Scaffold React component with props, types, tests, stories |
|
|
| `/react route` | Add route with page component, loader, and error boundary |
|
|
| `/react state` | Set up state management pattern (Context, Zustand, Redux Toolkit) |
|
|
| `/react hook` | Generate custom hook with TypeScript types and tests |
|
|
| `/react lint` | Validate component tree, check prop drilling, detect anti-patterns |
|
|
|
|
## Agent Architecture
|
|
|
|
| Agent | Model | Mode | Role |
|
|
|-------|-------|------|------|
|
|
| `react-architect` | sonnet | default | Component design, routing, state management |
|
|
| `react-auditor` | haiku | plan | Read-only lint and anti-pattern detection |
|
|
|
|
## Skills
|
|
|
|
| Skill | Purpose |
|
|
|-------|---------|
|
|
| `framework-detection` | Detect Next.js vs Vite, App Router vs Pages Router |
|
|
| `component-patterns` | Standard component structure, naming, file organization |
|
|
| `state-patterns` | State management patterns and when to use each |
|
|
| `routing-conventions` | Route naming, dynamic routes, middleware patterns |
|
|
| `typescript-patterns` | TypeScript utility types, generics, prop typing |
|
|
| `visual-header` | Standard command output headers |
|
|
|
|
## MCP Server
|
|
|
|
**Not required.** All operations are file-based (component generation, route configuration).
|
|
|
|
## Integration Points
|
|
|
|
| Plugin | Integration |
|
|
|--------|-------------|
|
|
| projman | Issue labels: `Component/Frontend`, `Tech/React`, `Tech/Next.js` |
|
|
| viz-platform | DMC components integrate with React component architecture |
|
|
| saas-api-platform | API client generation from OpenAPI spec |
|
|
| saas-test-pilot | Component test generation via `/react component` |
|
|
| code-sentinel | Security scan for XSS, unsafe HTML, client-side secrets |
|
|
|
|
## Token Budget
|
|
|
|
| Component | Estimated Tokens |
|
|
|-----------|-----------------|
|
|
| `claude-md-integration.md` | ~800 |
|
|
| Dispatch file (`react.md`) | ~200 |
|
|
| 6 commands (avg) | ~3,600 |
|
|
| 2 agents | ~1,200 |
|
|
| 6 skills | ~3,000 |
|
|
| **Total** | **~8,800** |
|
|
|
|
## Open Questions
|
|
|
|
- Should we support Vue.js/Svelte as alternative frameworks?
|
|
- Integration with Storybook for component documentation?
|