---
name: atomic-bomb
description: Use when creating React, React Native, Expo, Next.js, Vite, or Tauri applications, components, design systems, Storybook stories, reusable UI libraries, Atomic Design architectures, or Domain-Driven Design front-end applications with Atomic Bomb, Atomic Resources, Bomber MCP, or Atomic Bomb Templates.
---

# Atomic Bomb

Atomic Bomb is an agent-friendly front-end architecture system for generating maintainable React and React Native applications with Atomic Design, Domain-Driven Design, Storybook, TypeScript, Sass, and reusable components.

## When To Activate

Use this skill when the user asks to:

- Create or update React, React Native, Expo, Next.js, Vite, or Tauri UI.
- Generate atoms, molecules, organisms, templates, pages, hooks, domains, stories, mocks, tests, styles, or barrel exports.
- Build or maintain a design system.
- Convert page JSX into reusable components.
- Add Storybook isolation.
- Add design tokens or Sass resources.
- Use Bomber MCP or agent automation to implement front-end architecture.
- Decompose a feature into reusable UI layers.

## Mandatory Workflow

Before generating any UI:

1. Identify reusable atoms.
2. Identify reusable molecules.
3. Identify reusable organisms.
4. Generate missing components first.
5. Generate interfaces.
6. Generate mocks.
7. Generate stories.
8. Generate tests.
9. Generate Sass files.
10. Generate barrel exports.
11. Assemble the feature from the generated layers.

Never generate top-down page markup first.

Always generate bottom-up:

```text
atoms -> molecules -> organisms -> templates -> pages
```

## How To Think

For every request, ask:

- What is the smallest reusable atom?
- Which atoms combine into molecules?
- Which molecules combine into organisms?
- Which organism belongs in a template or page?
- Does this behavior belong to a domain, hook, service, or context?
- Does this content belong in data instead of JSX?
- Which files must exist for Storybook, tests, mocks, styles, and exports?

## Real Atomic Bomb Commands

```shell
npx atomic-bomb --type atom --name Button
npx atomic-bomb --type atom --name Label
npx atomic-bomb --type atom --name Input
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
```

Generate multiple components when supported:

```shell
npx atomic-bomb --type atom --name Label,Input,Button
```

Generate domain-scoped components when supported:

```shell
npx atomic-bomb --for Products/Catalog --type molecule --name ProductCard
```

## Generation Order Examples

### Login Form

Atoms:

- Label
- Input
- Button
- Paragraph

Molecules:

- EmailField
- PasswordField
- FormActions

Organism:

- LoginForm

Generation order:

1. Generate missing atoms.
2. Generate molecules from atoms.
3. Generate the organism from molecules.
4. Add stories, tests, mocks, interfaces, Sass, and exports.

### Product Card

Atoms:

- Image
- Heading
- Paragraph
- Button
- Price

Molecules:

- ProductMedia
- ProductSummary
- ProductActions

Organism:

- ProductCard

Generation order:

1. Generate reusable display atoms.
2. Generate product-specific molecules.
3. Generate ProductCard as a composed organism.
4. Keep product data typed and passed by props.

### Dashboard

Atoms:

- Icon
- Label
- Number
- Heading

Molecules:

- MetricTile
- FilterControl
- NavigationItem

Organisms:

- DashboardHeader
- MetricGrid
- ActivityFeed

Template:

- DashboardTemplate

Page:

- DashboardPage

Generation order:

1. Generate shared atoms.
2. Generate dashboard molecules.
3. Generate dashboard organisms.
4. Generate template.
5. Generate page that passes data down.

### Navigation Bar

Atoms:

- Logo
- Icon
- Button

Molecules:

- MenuItem
- MenuToggle

Organism:

- Menu

Generation order:

1. Generate or reuse Logo, Icon, and Button.
2. Generate MenuItem and MenuToggle.
3. Generate Menu with desktop and mobile states.
4. Add keyboard and accessibility tests.

### Product Detail Page

Atoms:

- Heading
- Paragraph
- Image
- Button
- Price

Molecules:

- ProductGallery
- ProductInfo
- PurchaseActions

Organisms:

- ProductHero
- ProductSpecs
- RelatedProducts

Template:

- ProductDetailTemplate

Page:

- ProductDetailPage

Generation order:

1. Generate reusable product atoms.
2. Generate molecules.
3. Generate organisms.
4. Generate the template.
5. Generate the page and wire domain data.

## Done Criteria

A generated or updated 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 can render in Storybook isolation.
- Component accepts typed props.
- Component does not duplicate an existing reusable component.

## 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.
- Skip mocks.
- Skip stories.
- Skip tests.
- Skip exports.
- Hide business logic inside visual components.
- Hard-code design values when Atomic Resources tokens exist.
- Build page-level JSX before reusable components.

## Supporting Skills

- Atomic Design: <https://atomic-bomb.io/skills/atomic-design.md>
- Domain-Driven Design: <https://atomic-bomb.io/skills/ddd.md>
- CLI usage: <https://atomic-bomb.io/skills/cli.md>
- Bomber MCP: <https://atomic-bomb.io/skills/bomber-mcp.md>
- Conventions: <https://atomic-bomb.io/skills/conventions.md>
- Storybook and testing: <https://atomic-bomb.io/skills/storybook-testing.md>
- Agent manifest: <https://atomic-bomb.io/agent.json>
- LLM guide: <https://atomic-bomb.io/llms.txt>
- Full context: <https://atomic-bomb.io/llms-full.txt>