---
name: atomic-bomb-ddd
description: Use when organizing front-end features around business domains, bounded contexts, services, hooks, state, and route-level data ownership.
---

# Domain-Driven Front-End Skill

Use Domain-Driven Design to keep business behavior outside visual components.

## Activation

Use this skill when a task includes products, orders, customers, accounts, billing, authentication, inventory, settings, domain data, APIs, state, services, or feature folders.

## Ownership Rules

Domains own:

- Models
- Types
- API clients
- Services
- Validation
- State
- Events
- Domain hooks
- Domain-specific pages

Components own:

- Presentation
- Layout
- Accessibility
- UI states
- Callback boundaries

Atoms never own domain behavior.

## Recommended Shape

```text
src/
├── components/
│   ├── atoms/
│   ├── molecules/
│   ├── organisms/
│   ├── templates/
│   └── pages/
├── domains/
│   ├── products/
│   ├── orders/
│   └── customers/
├── hooks/
├── lib/
└── resources/
```

## Data Flow

Prefer:

```text
domain/service -> hook -> page -> organism -> molecule -> atom
```

Avoid:

```text
atom -> API
molecule -> local business rule
organism -> hidden global fetch
```

## Done Criteria

- Domain types are explicit.
- API calls are in services or domain hooks.
- Validation is outside visual atoms.
- Pages wire domain data into UI.
- UI components remain reusable outside one business flow.