Menú
Create and manage system design diagrams with Mermaid. Use for architecture, flows, data models, and business logic visualization.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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