# Atomic Bomb

> Atomic Design and Domain-Driven Design toolkit for React, React Native, Expo, Next.js and Vite.

Atomic Bomb provides a structured approach to building scalable front-end applications through Atomic Design, Domain-Driven Design (DDD), reusable architecture patterns and AI-assisted code generation.

## Ecosystem

- Atomic Resources
- Atomic Bomb
- Bomber MCP

## Purpose

The Atomic Toolkit enables teams and AI agents to generate maintainable front-end applications by enforcing:

- Atomic Design
- Domain-Driven Design
- Consistent project structures
- Reusable components
- Predictable architecture
- Automated code generation

## Documentation

- /knowledge
- /knowledge/ai
- /concepts/skill-engineering
- /concepts/architectural-drift
- /concepts/predictive-development
- /concepts/deterministic-ai-development
- /concepts/implementation-contract
- /concepts/skill-library
- /concepts/skill-validation
- /concepts/atomic-design
- /concepts/domain-driven-front-end
- /skills
- /skills/atomic-bomb
- /skills/atomic-design
- /skills/ddd
- /skills/bomber-mcp
- /skills/atomic-resources
- /skills/storybook-testing
- /glossary
- /faq
- /examples
- /reference
- /for-ai
- /llms-full.txt
- /agent.json
- /skills/SKILL.md
- /skills/agent-workflow.md
- /skills/atomic-design.md
- /skills/ddd.md
- /skills/cli.md
- /skills/atomic-bomb.md
- /skills/atomic-resources.md
- /skills/bomber-mcp.md
- /skills/templates.md
- /skills/conventions.md
- /skills/storybook-testing.md
- /skills/examples/login-form.md
- /skills/examples/product-card.md
- /skills/examples/dashboard.md
- /skills/examples/navigation-bar.md
- /skills/examples/product-detail-page.md

## Core Principles

- Everything is reusable.
- Everything belongs to a layer.
- Everything belongs to a domain.
- Generate architecture before implementation.
- Prefer composition over duplication.
- Every important concept has a canonical page.
- Every skill has metadata, related references and validation criteria.

## Core Concepts

- Skill Engineering
- Architectural Drift
- Predictive Development
- Deterministic AI Development
- Implementation Contract
- Skill Library
- Skill Validation
- Atomic Design
- Domain-Driven Front-End Architecture

## Supported Frameworks

- React
- React Native
- Expo
- Next.js
- Vite
- Tauri

## Atomic Design

- Atoms
- Molecules
- Organisms
- Templates
- Pages

## AI Agent Instructions

When generating code:

1. Analyze the requested feature.
2. Identify reusable atoms.
3. Identify reusable molecules.
4. Identify reusable organisms.
5. Generate missing atomic components first.
6. Generate stories, tests, mocks and interfaces.
7. Export through barrel files.
8. Preserve Atomic Design hierarchy.
9. Preserve Domain-Driven Design boundaries.

## Tools

### Atomic Resources

Creates and manages:

- Design tokens
- Themes
- Colors
- Typography
- Assets
- Configuration

### Atomic Bomb

Generates:

- Atoms
- Molecules
- Organisms
- Templates
- Pages
- Hooks
- Libs
- Domains

### Bomber MCP

Provides AI-driven generation and maintenance of:

- Components
- Domains
- Services
- Hooks
- State
- Features
- Application structure

For complete guidance see:

- /for-ai
- /llms-full.txt
- /agent.json
- /skills/SKILL.md
- /skills/agent-workflow.md
- /skills/atomic-design.md
- /skills/ddd.md
- /skills/cli.md
- /skills/atomic-bomb.md
- /skills/atomic-resources.md
- /skills/bomber-mcp.md
- /skills/templates.md
- /skills/conventions.md
- /skills/storybook-testing.md