---
name: atomic-bomb-conventions
description: Use when an agent needs Atomic Bomb file, naming, export, Storybook, test, Sass, and data-flow conventions.
---

# Atomic Bomb Conventions

Use these conventions when creating or updating generated architecture.

## Component Folder

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

## Naming

- Components use PascalCase.
- Component folders use PascalCase.
- Interfaces use `ComponentNameInterface`.
- Mocks use `ComponentNameMock`.
- Sass root class uses `.ComponentName`.
- File names match the component name.

## Exports

Each component folder exports its component from `index.tsx`.

Layer barrels export components from:

```text
src/components/atoms/index.tsx
src/components/molecules/index.tsx
src/components/organisms/index.tsx
src/components/templates/index.tsx
src/components/pages/index.tsx
```

Sass barrels expose styles from:

```text
src/components/atoms/_index.scss
src/components/molecules/_index.scss
src/components/organisms/_index.scss
src/components/templates/_index.scss
src/components/pages/_index.scss
```

## Data Flow

Use:

```text
page -> organism -> molecule -> atom
```

Avoid importing page data directly into atoms or molecules.

## Storybook

Stories should use mock data. Route-aware stories need router wrappers. Stories must not require live network responses unless explicitly testing a data-fetching organism.

## Styling

Use Sass files and Atomic Resources variables. Do not use inline styles for visual design. Do not hard-code design values when tokens exist.