# Atomic Bomb - Full AI Development Guide Version: 7.0.1 Primary AI page: https://atomic-bomb.io/for-ai Primary agent skill: https://atomic-bomb.io/skills/SKILL.md Machine-readable agent manifest: https://atomic-bomb.io/agent.json Atomic Bomb is an architectural toolkit for React and React Native applications based on Atomic Design, Domain-Driven Design (DDD), and AI-assisted development. The purpose of Atomic Bomb is not merely to generate code. The purpose is to generate maintainable software architecture. --- # Philosophy Software should be: - Predictable - Reusable - Discoverable - Maintainable - Consistent Architecture should be generated before features. Features should be generated before implementation details. Reusable building blocks should always be preferred over one-off solutions. --- # Ecosystem The Atomic Toolkit consists of three products. ## Atomic Resources Responsible for design foundations. Creates: - Design tokens - Typography - Colors - Themes - Assets - Icons - Global configuration Atomic Resources acts as the single source of truth. --- ## Atomic Bomb Responsible for architecture generation. Creates: - Atoms - Molecules - Organisms - Templates - Pages - Hooks - Libs - Domains - Subdomains Atomic Bomb generates project structure. It does not generate business logic. --- ## Bomber MCP Responsible for implementation generation. Creates: - Components - Features - Domains - Hooks - Services - State - Tests - Stories - Mocks Bomber MCP generates implementation while preserving architecture. --- # Mandatory Architecture Rules These rules apply to all generated code. ## Rule 1 Always generate reusable components. Never create duplicate implementations. --- ## Rule 2 Always decompose complex UI into Atomic Design layers. --- ## Rule 3 Always identify reusable atoms first. --- ## Rule 4 Business logic must never exist inside atoms. --- ## Rule 5 UI must never directly access APIs. Use services. --- ## Rule 6 Domain logic belongs inside domains. --- ## Rule 7 Presentation logic belongs inside components. --- ## Rule 8 Use composition before inheritance. --- # Atomic Design Atomic Bomb follows Brad Frost's Atomic Design methodology. ## Atom Smallest reusable UI element. Examples: - Button - Label - Paragraph - Icon - Image - Input - Heading - Divider Atoms contain no business logic. Atoms contain no API logic. Atoms contain no domain logic. --- ## Molecule Combination of atoms. Examples: - SearchField - LoginFormField - NavigationItem - ProductCard --- ## Organism Combination of molecules. Examples: - Header - NavigationBar - ProductGrid - UserProfilePanel --- ## Template Layout structure. Examples: - DashboardTemplate - DetailTemplate - LandingPageTemplate Templates define placement. Templates do not own business logic. --- ## Page Concrete implementation. Examples: - DashboardPage - LoginPage - ProductPage Pages connect templates and domains. --- # Atomic Generation Workflow When a component is requested: Step 1 Analyze requested feature. Step 2 Identify reusable atoms. Step 3 Generate missing atoms. Step 4 Identify reusable molecules. Step 5 Generate missing molecules. Step 6 Identify reusable organisms. Step 7 Generate missing organisms. Step 8 Generate templates. Step 9 Generate pages. Step 10 Generate stories, mocks and tests. Never skip lower levels. --- # Domain Driven Design Applications must be structured around business domains. Example: src/ └── domains/ ├── customer/ ├── orders/ ├── products/ └── inventory/ Each domain owns: - Models - Services - State - Events - APIs - Helpers - Pages --- # Recommended Structure src/ ├── components │ ├── atoms │ ├── molecules │ ├── organisms │ ├── templates │ └── pages │ ├── domains │ ├── customer │ ├── products │ └── orders │ ├── context ├── hooks ├── lib ├── resources └── stories --- # Coding Standards ## Language Use TypeScript. Never generate JavaScript when TypeScript is available. --- ## Components Use functional components. Use hooks. Use const declarations. Example: const Button = () => {} Preferred. --- ## Styling Do not use Tailwind. Do not use inline styles. Use: - SCSS - Sass barrels - Design tokens --- ## State Management Preferred: - React Context Acceptable: - Zustand Keep state ownership clear. --- ## Validation Use Zod. Validate: - API responses - Forms - External data --- ## Testing Generate: - Vitest tests - Storybook stories - Mocks for all reusable components. --- # Barrel Files Atomic Bomb relies heavily on barrels. ## TypeScript Use: index.ts to expose modules. Example: components/ └── Button/ ├── Button.tsx └── index.ts --- ## Sass Use: _index.scss to expose styles. --- # AI Agent Instructions When generating features: Always ask: 1. Can this become an atom? 2. Can this become a molecule? 3. Can this become an organism? 4. Does this belong to an existing domain? 5. Can this be reused elsewhere? If the answer is yes: Generate reusable architecture. --- # Anti Patterns Never generate: - Massive components - God objects - Inline styles - Direct API calls from atoms - Business logic inside atoms - Unstructured feature folders - Deep relative imports - Duplicate UI elements --- # Bomber MCP Workflow Preferred workflow: 1. Create Atomic Resources. 2. Create architecture using Atomic Bomb. 3. Implement using Bomber MCP. 4. Extend generated code. 5. Preserve architecture. --- # Success Criteria A successful Atomic Bomb project: - Has reusable components. - Has clear domains. - Has predictable structure. - Has generated stories. - Has generated tests. - Has generated mocks. - Uses TypeScript. - Uses Atomic Design. - Uses Domain-Driven Design. - Is understandable without documentation. Architecture first. Implementation second. Reusability always. --- # Public Agent Resources Use these files when indexing or operating on Atomic Bomb projects: - AI guide page: https://atomic-bomb.io/for-ai - Compact LLM guide: https://atomic-bomb.io/llms.txt - Full LLM guide: https://atomic-bomb.io/llms-full.txt - Agent manifest: https://atomic-bomb.io/agent.json - Primary skill: https://atomic-bomb.io/skills/SKILL.md - Atomic Design skill: https://atomic-bomb.io/skills/atomic-design.md - Domain-Driven Design skill: https://atomic-bomb.io/skills/ddd.md - CLI examples skill: https://atomic-bomb.io/skills/cli.md - Bomber MCP skill: https://atomic-bomb.io/skills/bomber-mcp.md - Conventions skill: https://atomic-bomb.io/skills/conventions.md - Storybook and testing skill: https://atomic-bomb.io/skills/storybook-testing.md - Login form example: https://atomic-bomb.io/skills/examples/login-form.md - Product card example: https://atomic-bomb.io/skills/examples/product-card.md - Dashboard example: https://atomic-bomb.io/skills/examples/dashboard.md - Navigation bar example: https://atomic-bomb.io/skills/examples/navigation-bar.md - Product detail page example: https://atomic-bomb.io/skills/examples/product-detail-page.md