---
name: atomic-bomb-templates
description: Use this skill when an AI agent needs to select, create, update, or reason about Atomic Bomb generation templates.
---

# Atomic Bomb Templates Skill

Atomic Bomb Templates define reusable file structures for generated components.

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

## Use When

Use this skill when a project needs custom generated component files, the default Atomic Bomb output does not match local conventions, or an agent needs to add placeholders to generated files.

## Template Purpose

Templates should encode conventions that should be repeated, not one-off implementation details.

Good template concerns:

- File names.
- Import style.
- Component boilerplate.
- TypeScript interfaces.
- Mock shape.
- Storybook story shape.
- Test setup.
- Sass and barrel files.

Avoid putting volatile feature-specific business logic in templates.

## Template Selection

Choose templates based on framework, styling approach, testing framework, component layer, and local folder conventions.

## Agent Rules

- Inspect existing generated files before changing templates.
- Keep placeholders readable and consistent.
- Keep template output TypeScript-first when the project uses TypeScript.
- Keep generated stories and mocks valid without app-level data fetching.
- Keep barrel exports generated consistently.
- Keep Sass barrels generated consistently.
- Document new placeholders in the template repository or local template docs.

## Template Output Checklist

```text
ComponentName.tsx
ComponentName.interface.tsx
ComponentName.mock.ts
ComponentName.stories.tsx
ComponentName.test.tsx
_ComponentName.style.scss
_index.scss
index.tsx
```

Adapt this list to the existing project, but keep support files complete enough for isolation, type safety, and maintainability.