arc42-c4
arc42 architecture documentation template (all 12 sections) combined with C4 diagrams (Context, Container, Component, Deployment) in PlantUML. The standard for architecture documentation in this setup. Maps each section to the Claude skills that help fill it.
Best use case
arc42-c4 is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
arc42 architecture documentation template (all 12 sections) combined with C4 diagrams (Context, Container, Component, Deployment) in PlantUML. The standard for architecture documentation in this setup. Maps each section to the Claude skills that help fill it.
Teams using arc42-c4 should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/arc42-c4/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How arc42-c4 Compares
| Feature / Agent | arc42-c4 | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
arc42 architecture documentation template (all 12 sections) combined with C4 diagrams (Context, Container, Component, Deployment) in PlantUML. The standard for architecture documentation in this setup. Maps each section to the Claude skills that help fill it.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# arc42 + C4 Skill arc42 is a template for architecture documentation with 12 sections. C4 is a diagram model (Context → Container → Component → Code) that maps directly into arc42's structural sections. > Do not use arc42 for projects under 10 files — use a simple README instead. ## When to Activate - Generating or updating project architecture documentation - Onboarding a new engineer to the system architecture - After a major architectural decision (ADR) that changes the structure - Before a large feature that touches multiple system layers - When someone asks "how does this system actually work?" --- ## arc42 Sections — Quick Reference | # | Section | C4 Diagram | Claude Skill | |---|---------|-----------|--------------| | 1 | Introduction & Goals | — | commands/prd.md (requirements) | | 2 | Architecture Constraints | — | adr-writing (constraints documented) | | 3 | System Scope & Context | C4 Level 1: Context | — | | 4 | Solution Strategy | — | agents/solution-designer | | 5 | Building Block View | C4 Level 2: Container + Level 3: Component | — | | 6 | Runtime View | Sequence Diagrams | skills/api-contract | | 7 | Deployment View | C4 Deployment Diagram | skills/kubernetes-patterns, deployment-patterns | | 8 | Cross-cutting Concepts | — | observability, security-review, multi-tenancy, caching-patterns | | 9 | Architecture Decisions | — | skills/adr-writing, commands/explore | | 10 | Quality Requirements | — | skills/load-testing | | 11 | Risks & Technical Debt | — | — | | 12 | Glossary | — | — | --- ## Full arc42 Document Template Full template (all 12 sections with C4 PlantUML diagrams): `docs/templates/arc42-template.md` Save the generated document to: `docs/architecture/arc42.md` Diagrams to: `docs/architecture/diagrams/*.puml` --- ## Maintenance Rules - **Update Section 3** when: system integrates a new external service - **Update Section 5** when: a new container (service, DB, cache) is added or removed - **Update Section 7** when: deployment infrastructure changes (new region, k8s upgrade) - **Update Section 8** when: a new cross-cutting pattern is established (new logging standard, new auth flow) - **Update Section 9** when: a new ADR is accepted — add it to the index table - **Update Section 11** when: a new risk is identified or debt is resolved ## Anti-Patterns - Writing Section 5 without a real diagram — prose alone is insufficient for building blocks - Putting implementation details in Section 6 (runtime view) instead of sequence diagrams - Keeping ADRs only in Section 9 without their own `docs/decisions/` file — always both - Letting arc42 go stale — out-of-date architecture docs are worse than none (mislead new engineers)
Related Skills
zero-trust-patterns
Zero-Trust security patterns — mTLS between microservices (Istio/SPIFFE), SPIRE workload identity, OPA/Envoy authorization, NetworkPolicy default-deny-all, short-lived credentials, service mesh security, and Kubernetes RBAC hardening.
wireframing
Wireframing and prototyping workflow: fidelity levels (lo-fi sketch → mid-fi wireframe → hi-fi prototype), tool selection (Figma, Excalidraw, Balsamiq), user flow diagrams, wireframe annotation standards, information architecture (IA) mapping, and the handoff from wireframe to visual design. For developers who need to communicate UI structure before writing code.
webrtc-patterns
WebRTC patterns — peer connection setup, ICE/STUN/TURN configuration, signaling server design, SFU vs mesh topology, screen sharing, media track management, and reconnect/ICE restart handling.
webhook-patterns
Webhook patterns for receiving, verifying (HMAC), and idempotently processing third-party events. Covers Stripe, GitHub, and generic webhook patterns, delivery guarantees, retry handling, and testing.
web-performance
Web performance optimization: Core Web Vitals (LCP, CLS, INP), Lighthouse CI with budget configuration, bundle analysis (webpack-bundle-analyzer, vite-bundle-visualizer), hydration performance, network waterfall reading, image optimization (WebP/AVIF, srcset), and font performance.
wasm-performance
WebAssembly performance: wasm-opt binary optimization, size reduction (panic=abort, LTO, strip), profiling WASM in Chrome DevTools, memory management (linear memory, avoiding GC pressure), SIMD, and multi-threading with SharedArrayBuffer.
wasm-patterns
WebAssembly patterns: wasm-pack, wasm-bindgen (JS↔Wasm interop), WASI, Component Model, wasm-opt, Rust-to-WASM compilation, JS integration (web workers, streaming instantiation), and production deployment (CDN, Content-Type headers).
visual-testing
Visual Regression Testing: tool comparison (Chromatic/Percy/Playwright screenshots/BackstopJS), pixel-diff vs AI-based comparison, baseline management, flakiness strategies (masks, tolerances, waitForLoadState), CI integration with GitHub Actions, and Storybook integration.
visual-identity
Brand identity development: color palette construction (primary/secondary/semantic/neutral), logo concept brief writing, typeface pairings, brand voice definition, mood board direction, and Brand Guidelines document structure. Use when establishing or evolving a visual brand — not for implementing existing tokens.
ux-micro-patterns
UX micro-patterns for every product state: Empty States, Loading States (skeleton screens, spinners, optimistic UI), Error States, Success States, Confirmation Dialogs, Onboarding Flows, and Progressive Disclosure. These patterns apply to every feature — done wrong, they're the biggest source of user confusion.
typography-design
Typography as a creative discipline: typeface selection criteria, type pairing (serif + sans, display + body), modular scale systems, line-height and tracking ratios, hierarchy construction, and web/mobile rendering considerations. The decisions behind design tokens, not the tokens themselves.
typescript-testing
TypeScript testing patterns: Vitest for unit/integration, Playwright for E2E, MSW for API mocking, Testing Library for React components. Core TDD methodology for TypeScript/JavaScript projects.