---
name: atomic-resources
description: Use this skill when an AI agent needs to create, inspect, or apply Atomic Resources design tokens, web Sass resources, native style modules, 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, native style modules, 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 Web 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
```

## Expected Expo or React Native Resource Files

```text
src/resources/design/tokens.json
src/resources/fonts/arial.ttf
src/resources/scripts/tokens-to-native.mjs
src/resources/styles/colors.ts
src/resources/styles/fonts.ts
src/resources/styles/index.ts
src/resources/styles/main.ts
src/hooks/useFont/useFont.ts
```

## Core Rule

Use the resource system as the source of truth. Prefer generated variables, Sass helpers, or native style modules 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`.

## Web 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.

Native projects do not receive `main.css`. Use the generated `resources/styles` exports and wire the generated `useFont` hook into `App.tsx` when font loading is needed.

## 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, or regenerate native style modules if it has a native token script.
3. Rebuild `main.css` if the project has an SCSS script.
4. Use the generated variable or native export in component styles.

Typical scripts:

```shell
npm run token
npm run scss
npm run token:native
npm run token-to-native
```

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`.
- In Expo or React Native projects, use generated native style modules instead of 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>.