Menu
C4 architectural modeling for documenting software architecture. Use when creating architecture diagrams, planning new systems, communicating with stakeholders, or conducting architecture reviews.
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
Generic BAML patterns for type-safe LLM prompting. Covers schema design, DTO generation, client wrappers, and cross-language codegen. Framework-agnostic.
Browser automation for documentation discovery. Use when curl fails on JS-rendered sites, when detecting available browser tools, or when configuring browser-based documentation collection.
Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.
Patterns and techniques for analyzing brownfield codebases. Use when onboarding to unfamiliar code, preparing for refactoring, conducting architecture reviews, or identifying technical debt.
Detect new imports in modified files and auto-install missing dependencies. Works with npm, uv, pip, cargo, go mod, and other package managers. Triggers after code implementation to keep manifests in sync.
Navigate hierarchical ai-docs indexes to find documentation. Check local docs FIRST for speed and curated context before web searching. Covers Claude Code, BAML, MCP, and other tracked libraries.
| name | c4-modeling |
| description | C4 architectural modeling for documenting software architecture. Use when creating architecture diagrams, planning new systems, communicating with stakeholders, or conducting architecture reviews. |
Create hierarchical architecture diagrams at four abstraction levels using the C4 model and Mermaid syntax.
| Variable | Default | Description |
|---|---|---|
| DEFAULT_LEVEL | context | Start with context, container, component, or code |
| OUTPUT_FORMAT | mermaid | mermaid, structurizr, plantuml |
| INCLUDE_LEGEND | true | Add legend to diagrams |
MANDATORY - Follow the Workflow steps below when creating C4 diagrams.
If you're about to:
STOP -> Check the appropriate level guidelines in reference/level-guidelines.md -> Then proceed
| Level | Name | Purpose | Audience |
|---|---|---|---|
| 1 | Context | System in environment | Everyone |
| 2 | Container | Major components | Technical stakeholders |
| 3 | Component | Internal structure | Developers |
| 4 | Code | Implementation | Developers (sparingly) |
Show: System, users, external systems Hide: Internal details, databases, technology
Show: Applications, APIs, databases, queues Hide: Internal structure, classes
Show: Modules, services, repositories Hide: Individual classes, functions
Show: Classes, interfaces, key abstractions Use: Only for complex/critical areas
See reference/level-guidelines.md for detailed guidance.
See reference/mermaid-syntax.md for Mermaid C4 syntax.
C4Context
title System Context Diagram
Person(user, "User", "Description")
System(system, "System", "Description")
System_Ext(ext, "External", "Description")
Rel(user, system, "Uses")
C4Container
title Container Diagram
Container(web, "Web App", "React", "UI")
Container(api, "API", "Node.js", "Backend")
ContainerDb(db, "Database", "PostgreSQL", "Storage")
Rel(web, api, "Calls", "REST")
See reference/mermaid-syntax.md for complete syntax reference.
Diagrams should include: