---
name: atomic-resources
description: Use this skill when an AI agent needs to create, inspect, or apply Atomic Resources design tokens, Sass resources, fonts, and generated styling files.
---

# Atomic Resources Skill

Atomic Resources creates the design foundation for Atomic Bomb projects.

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

## Use When

Use this skill when a task touches design tokens, CSS custom properties, Sass resources, typography, colors, spacing, radius, shadows, opacity, z-index, fonts, or generated resource folders.

## Install or Generate Resources

```shell
npx create-atomic-resources@latest ./src
```

The target path may vary. Inspect the project first.

## Expected Resource Files

```text
src/resources/design/tokens.json
src/resources/styles/main.scss
src/resources/styles/main.css
src/resources/styles/tokens/_tokens.scss
src/resources/styles/tokens/_config.scss
src/resources/styles/root/_root.scss
src/resources/styles/utility/_flex.scss
src/resources/fonts
```

## Core Rule

Use the resource system as the source of truth. Prefer generated variables and Sass helpers over hard-coded values.

Use:

```css
color: var(--fg-black);
background-color: var(--bg-white);
gap: var(--spacing-small);
border-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow-light);
```

Avoid hard-coded design values such as raw hex colors, arbitrary pixel spacing, or `z-index: 9999`.

## App and Storybook Imports

Import the compiled stylesheet once at the app or Storybook boundary:

```ts
import "../src/resources/styles/main.css"
```

Do not import `main.css` inside every component.

## Updating Tokens

When a needed design value is missing:

1. Add it to `src/resources/design/tokens.json`.
2. Regenerate token Sass if the project has a token script.
3. Rebuild `main.css` if the project has an SCSS script.
4. Use the generated variable in component styles.

Typical scripts:

```shell
npm run token
npm run scss
```

Only run scripts that exist in the local `package.json`.

## Component Styling Rules

- Use SCSS files generated beside each component.
- Use Sass barrels such as `_index.scss`.
- Prefer existing utility classes and mixins.
- Keep responsive behavior inside component Sass unless the project centralizes layout styles.
- Do not use inline styles for visual design.
- Do not introduce Tailwind unless the project already uses it.

For detailed variable examples, see <https://atomic-bomb.io/skills/SKILL.md>.