architecture-patterns

Architecture Patterns

This skill provides knowledge about common architectural patterns to help design feature implementations. Apply these patterns based on the project's existing architecture and the feature's requirements.

Diagram Convention

Architecture visualizations use Mermaid syntax with classDef styling (color:#000 for text readability). When creating architecture visualizations based on these patterns, follow the technical-diagrams skill conventions.

Pattern Selection Guide

Choose patterns based on:

1. Existing architecture - Match what's already in use
2. Team familiarity - Use patterns the team knows
3. Feature requirements - Some patterns fit better for certain features
4. Scale requirements - Consider current and future scale

---

Layered Architecture (N-Tier)

When to use: Most web applications, CRUD operations, clear separation of concerns needed

Layers:

flowchart TD
    A["Presentation Layer — UI, API endpoints, controllers"]:::primary
    B["Application Layer — Use cases, orchestration, DTOs"]:::secondary
    C["Domain Layer — Business logic, entities, rules"]:::success
    D["Infrastructure Layer — Database, external services, I/O"]:::neutral
    A --> B --> C --> D

    classDef primary fill:#dbeafe,stroke:#2563eb,color:#000
    classDef secondary fill:#f3e8ff,stroke:#7c3aed,color:#000
    classDef success fill:#dcfce7,stroke:#16a34a,color:#000
    classDef neutral fill:#f3f4f6,stroke:#6b7280,color:#000

Key rules:

• Dependencies flow downward only
• Each layer only talks to the layer directly below
• Domain layer has no external dependencies

Implementation tips:

• Use interfaces at layer boundaries
• Keep domain logic in the domain layer, not controllers
• Use DTOs to transfer data between layers

---

MVC (Model-View-Controller)

When to use: Web applications with server-rendered views, simple CRUD apps

Components:

flowchart LR
    U1[User]:::neutral -->|input| CT[Controller]:::primary
    CT -->|updates| M[Model]:::secondary
    M -->|reads| CT
    CT -->|renders| V[View]:::success
    V -->|response| U2[User]:::neutral

    classDef primary fill:#dbeafe,stroke:#2563eb,color:#000
    classDef secondary fill:#f3e8ff,stroke:#7c3aed,color:#000
    classDef success fill:#dcfce7,stroke:#16a34a,color:#000
    classDef neutral fill:#f3f4f6,stroke:#6b7280,color:#000