ddd-frontend-architecture

name: ddd-frontend-architecture description: Domain-Driven Design (DDD) architecture patterns for large-scale frontend applications with dependency injection (Inversify) and MobX state management. Use this skill when designing or refactoring complex frontend applications, organizing business logic, handling multi-platform code sharing, or building maintainable enterprise applications.

DDD Frontend Architecture

Before codegen / review / architecture design, MUST LOAD AND FOLLOW ALL THE REFERENCES.

Important: DDD is not a silver bullet. This architecture introduces additional complexity (layers, DI, entities, etc.) that may be overkill for simple pages or short-lived projects. Choose this approach based on project complexity and longevity.

When to Use This Skill

This skill is designed for long-term, complex enterprise applications. Consider DDD when:

Recommended for: Backend management systems, admin panels, enterprise dashboards

Not recommended for:

• Simple landing pages or marketing sites
• Short-lived prototype projects
• Pages with minimal business logic (< 100 lines of state management)
• Projects with no plans for long-term maintenance

Architecture Principles

Core Layers

src/
├── core/              # Business logic (DDD)
│   ├── application/   # Use case orchestration
│   ├── domain/        # Entities, Value Objects, Contracts
│   ├── infra/         # Infrastructure interfaces
│   └── platform-related/ # Platform implementations
├── pages/             # Page components with stores
└── components/        # Reusable UI components

Key Patterns

Usage Scenarios

Use this skill when:

• Building new enterprise feature modules
• Refactoring legacy code into maintainable structure
• Sharing code across PC/Mobile/Lynx platforms
• Designing complex business workflows
• Creating testable business logic layers

Reference Documents

Architecture Fundamentals

• Directory Structure
• Core Layer Organization

Domain Design

• Entity Design Patterns
• Value Object Patterns

Dependency Injection

• Inversify Setup
• Platform Abstraction

State Management

• MobX Store Architecture
• Store Module Patterns

UI Components

• Renderer Pattern
• Component Organization

Dependencies

{
  "mobx": "^6.0.0",
  "mobx-react-lite": "^3.0.0",
  "inversify": "^6.0.0",
  "reflect-metadata": "^0.1.0"
}

Related Skills

• mobx-react-best-practices - Detailed MobX + React patterns