Menu
Create and manage system design diagrams with Mermaid. Use for architecture, flows, data models, and business logic visualization.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generate TypeScript API client from Swagger/Go comments. Use when updating API endpoints, adding new routes, or regenerating the frontend API client after backend changes.
Manage database migrations and Better Auth schema. Use when adding tables, modifying schema, running migrations, or resetting the database.
Generate full-stack features. Backend = hand-written bounded-context aggregates (DDD); frontend = FSD slices with HydrationBoundary. Use when creating new features, adding CRUD operations, or scaffolding new pages.
Access local technical documentation before searching the internet. Use FIRST when researching any tech stack question.
Create and manage authentication pages with server-side session handling. Use when adding login, register, or protected pages WITHOUT flicker/skeleton.
Server-Side + Client-Side Data Fetching with Orval + TanStack Query HydrationBoundary Pattern. ALWAYS use Orval - NEVER manual fetch()!
| name | system-design |
| description | Create and manage system design diagrams with Mermaid. Use for architecture, flows, data models, and business logic visualization. |
| allowed-tools | Read, Write, Glob, Bash |
Create Mermaid diagrams for System Design and Architecture.
.concepts/
├── architecture/ # C4, Deployment, Infrastructure
├── flows/ # Auth, Data, User Journey
└── data-models/ # ER, Class, State Diagrams
# [Title]
## Business Context
[Description of business logic]
## [Diagram Name]
\`\`\`mermaid
[Diagram Code]
\`\`\`
## Details
[Tables, explanations, etc.]
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[Other]
sequenceDiagram
A->>B: Request
B-->>A: Response
erDiagram
ENTITY1 ||--o{ ENTITY2 : relationship
stateDiagram-v2
[*] --> State1
State1 --> State2: event
C4Context
Person(user, "User")
System(app, "App")
Rel(user, app, "Uses")
kebab-case.mdExamples:
.concepts/architecture/deployment.md.concepts/flows/auth-flow.md.concepts/data-models/er-diagram.md