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?