Atomic Bomb for AI Agents

Atomic Bomb is an agent-friendly front-end ecosystem for React, React Native, Expo, Next.js, Vite, Tauri, Storybook, Atomic Design, Domain-Driven Design, and reusable UI architecture.

When To Activate

Use Atomic Bomb when creating or updating:

React, React Native, Expo, Next.js, Vite, or Tauri applications.
Atoms, molecules, organisms, templates, pages, hooks, domains, services, stories, mocks, tests, styles, and barrel exports.
Design systems and reusable UI libraries.
Storybook component isolation.
Domain-driven front-end features.
Bomber MCP automation.

Mandatory Workflow

Before generating UI:

Identify reusable atoms.
Identify reusable molecules.
Identify reusable organisms.
Generate missing components first.
Generate interfaces.
Generate mocks.
Generate stories.
Generate tests.
Generate exports.
Assemble the feature.

Never generate top-down page markup first.

Always generate bottom-up:

atoms -> molecules -> organisms -> templates -> pages

Atomic Bomb CLI

npx atomic-bomb --type atom --name Button

npx atomic-bomb --type molecule --name SearchField

npx atomic-bomb --type organism --name Header

npx atomic-bomb --type template --name Dashboard

npx atomic-bomb --type page --name ProductDetail

npx atomic-bomb --type domain --name Products

Generation Example: Login Form

Atoms:

Label
Input
Button
Paragraph

Molecules:

EmailField
PasswordField
FormActions

Organism:

LoginForm

Commands:

npx atomic-bomb --type atom --name Label,Input,Button,Paragraph

npx atomic-bomb --type molecule --name EmailField,PasswordField,FormActions

npx atomic-bomb --type organism --name LoginForm

Generation Example: Product Detail Page

Atoms:

Heading
Paragraph
Image
Button
Price

Molecules:

ProductGallery
ProductInfo
PurchaseActions

Organisms:

ProductHero
ProductSpecs
RelatedProducts

Template:

ProductDetailTemplate

Page:

ProductDetailPage

Domain:

Products

Domain-Driven Front-End Workflow

Business behavior belongs in domains, services, hooks, or context.

Presentation belongs in components.

Preferred data flow:

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

Atoms must not call APIs. Molecules must not own business rules. Pages wire domain data into reusable UI.

Bomber MCP Workflow

Use Bomber MCP after architecture exists:

Provide project framework, target folder, component layer, and acceptance criteria.
Provide existing design-token and Storybook conventions.
Ask Bomber MCP to implement inside generated Atomic Bomb structure.
Verify interfaces, mocks, stories, tests, Sass, and exports.

Done Criteria

A component is complete when:

Interface file exists.
Component file exists.
Mock file exists.
Storybook story exists.
Test file exists.
Sass file exists.
Sass barrel exists.
TypeScript barrel export exists.
Component renders in Storybook isolation.
Component accepts typed props.

Anti-Patterns

Never:

Generate raw HTML if an atomic component exists.
Create duplicate labels, buttons, inputs, icons, cards, or headings.
Put domain logic inside atoms.
Put API calls inside atoms or molecules.
Skip interfaces, mocks, stories, tests, styles, or exports.
Build page-level JSX before reusable components.