---
name: atomic-bomb-cli
description: Use this skill when an AI agent needs to generate or maintain Atomic Design component structure with the Atomic Bomb CLI.
---

# Atomic Bomb CLI Skill

Atomic Bomb generates Atomic Design-based architecture for React and React Native projects.

Repository: <https://github.com/ReneKrewinkel/atomic-bomb>
Site: <https://atomic-bomb.io/atomic-bomb>

## Use When

Use Atomic Bomb when a task needs a new atom, molecule, organism, template, page, or matching component support files.

## Core Commands

```shell
npx atomic-bomb@latest
npx atomic-bomb --type atom --name Button
npx atomic-bomb --type molecule --name "Search Field"
npx atomic-bomb --type organism --name Header
npx atomic-bomb --type template --name Dashboard
npx atomic-bomb --type page --name Dashboard
```

Generate multiple components when the project supports it:

```shell
npx atomic-bomb --type atom --name Logo,Button,Paragraph
```

Generate domain-scoped components when the project supports `--for`:

```shell
npx atomic-bomb --for Orders/Sales --type molecule --name "Order Card"
```

## Choosing the Type

Use `atom` for Button, Icon, Label, Heading, Paragraph, Image, CodeSnippet, and Input.

Use `molecule` for CheckListItem, ToolDescription, SearchField, FormField, MenuItem, and HeaderBrand.

Use `organism` for Hero, Menu, Documentation, CheckList, ProductGrid, Header, and Footer.

Use `template` for reusable layout structure.

Use `page` for route-level views with concrete data.

## Expected File Shape

```text
ComponentName/
├── ComponentName.tsx
├── ComponentName.interface.tsx
├── ComponentName.mock.ts
├── ComponentName.stories.tsx
├── ComponentName.test.tsx
├── _ComponentName.style.scss
├── _index.scss
└── index.tsx
```

After generation, verify the project’s actual output and follow it.

## Agent Rules

- Prefer CLI generation over hand-building the folder when Atomic Bomb is installed.
- Extract reusable atoms and molecules before building organisms and pages.
- Keep generated support files in sync.
- Update TypeScript interfaces before wiring data through components.
- Add realistic mocks so components render in Storybook.
- Keep stories isolated from page-level data fetching.
- Use barrels for imports where the codebase already does.
- Keep Sass imports consistent with generated `_index.scss` files.

## Data and Props

Pages should own route-level data and pass typed props downward:

```text
Page -> Organism -> Molecule -> Atom
```

Avoid direct data imports inside atoms and molecules unless the project explicitly uses that pattern.

## Verification

Use scripts available in the local project:

```shell
npx tsc -b
npm run build
npm test
npm run test:storybook
```