What is Skill Engineering?

Skill Engineering turns repeatable development knowledge into reusable AI-agent instructions with workflow steps, constraints, examples, and validation criteria.

How is Skill Engineering different from prompt engineering?

Prompt engineering usually optimizes one conversation. Skill Engineering creates durable project knowledge that can be reused across sessions and agents.

How does Atomic Bomb reduce architectural drift?

Atomic Bomb generates architecture before implementation and keeps business logic out of reusable presentation components.

atomic-bomb.io

Documentation

Set up Atomic Resources and Atomic Bomb together with one installer, then start building React and React Native interfaces with reusable Atomic Design components.

Start Setup

Setting up

Create Atomic Install is the recommended setup path for projects using Atomic Resources and Atomic Bomb together. Run it from an application root containing a

package.json

. It detects npm, Yarn, or pnpm, installs both CLI packages as development dependencies, creates the reusable design-token resources for the detected project type, and configures the selected Atomic Bomb template.

The default command installs resources in

./src

and configures the

react-ts-vite

platform. Web projects receive Sass resources, generated token and CSS scripts, Storybook stylesheet wiring, and Atomic Bomb Sass imports. Expo and React Native projects receive native TypeScript or JavaScript style modules,

token:native

and

token-to-native

scripts, and the generated

useFont

hook is wired into

App.tsx

when possible.

Existing Atomic Bomb projects keep their platform configuration and receive the latest bundled skill updates. After setup, use the CLI to generate Atoms, Molecules, Organisms, Templates, Pages, Hooks, modules, domains, and supporting files with a consistent project structure.

prepare your system

Before running the installer, ensure your development environment includes Node.js v18 or higher and that your application has a package.json.

Install Node.js v18 or higher from Download Node.js.

create your app

Create your application using your preferred framework

npx create-react-app my-app

npx create-next-app my-app

npx react-native init MyApp

npx create-expo-app my-app

npm create vite@latest my-app -- --template react-ts

Replace the examples with the command recommended by your preferred framework, then change into the new application directory.

run the atomic installer

Run Create Atomic Install from the application root. The installer adds

atomic-bomb@latest

and

create-atomic-resources@latest

, creates web or native resources in the destination you provide, and starts Atomic Bomb platform configuration.

npx create-atomic-install@latest ./src

The default platform is

react-ts-vite

. Choose a different platform with

--platform

, for example

npx create-atomic-install@latest ./src --platform expo-full

The resource step always runs

npx --yes create-atomic-resources@latest ./src

. The explicit

@latest

is intentional and prevents stale npx resolution.

For local end-to-end testing, set

ATOMIC_BOMB_PACKAGE

and

CREATE_ATOMIC_RESOURCES_PACKAGE

to local package paths before running the installer.

choose storybook support

The installer asks whether Storybook should be installed and runs

npx sb init

when confirmed. For web projects, it checks for

.storybook/preview.ts

and adds the generated resource stylesheet import automatically. Native projects skip SCSS and CSS preview wiring.

Install Storybook as well? [y/N]

Use

--storybook

to install it without prompting, or

--skip-storybook

to skip both the prompt and installation.

For web projects using the default destination, the preview import is

import '../src/resources/styles/main.css'

. A custom destination is converted to the matching relative import.

run it again or customize setup

The installer is repeatable. For web projects, it enables Atomic Bomb entries in

<destination>/resources/styles/main.scss

and rewrites token, Sass, and formatting scripts. For Expo and React Native projects, it keeps only the native token converter scripts and generated style modules. In both cases it updates

.atomic-bomb

so components are generated under the selected destination. Existing platform configuration is preserved.

npx create-atomic-install@latest ./src

npx create-atomic-install@latest ./frontend/src --storybook

npx create-atomic-install@latest ./src --skip-storybook

npx create-atomic-install@latest ./src --skip-atomic-bomb

npx create-atomic-install@latest --skip-resources

npx create-atomic-install@latest ./src --skip-dependencies

Use

--skip-update

when an existing Atomic Bomb project should not refresh its installed skills. Custom destinations are reused for resources, package scripts, web Storybook CSS, web Sass imports, native style modules, and generated components.

Requirements

Only Node.js and an application with package.json are required before setup. Create Atomic Install adds Atomic Bomb and Atomic Resources for you. Web projects also receive Sass, JSON-to-SCSS, and Prettier. Expo and React Native projects receive only the native resource scripts and Prettier. Storybook remains optional.

Version

Version 1.1.2 @ (npm)

Manual setup without Create Atomic Install

Prefer to install each part yourself? Follow this setup path to add Atomic Resources, Storybook, and Atomic Bomb separately. This gives you direct control over every command and configuration choice.

Run each command from the application root. Replace

./src

and the Atomic Bomb platform when your project uses a different source directory or framework template.

prepare your system

Ensure your development environment includes Node.js v18 or higher and that your application has a package.json.

Install Node.js v18 or higher from Download Node.js.

create your app

Create your application using the framework and package manager you prefer.

npx create-react-app my-app

npx create-next-app my-app

npx react-native init MyApp

npx create-expo-app my-app

npm create vite@latest my-app -- --template react-ts

Change into the generated application directory before continuing.

install atomic resources

Install the design-token, font, and resource system into your source directory. Web projects receive SCSS resources. Expo and React Native projects receive native style modules and a font-loading hook.

npx create-atomic-resources@latest ./src

Keep the explicit

@latest

package specifier. Web projects get

token

and

scss

scripts. Native projects get

token:native

and

token-to-native

scripts.

install storybook

Optionally install Storybook to create and test components in isolation.

npx sb init

For web projects, add

import '../src/resources/styles/main.css'

.storybook/preview.ts

. Native projects do not receive

main.css

configure atomic bomb

Select the Atomic Bomb template that matches your framework. Vite with React and TypeScript uses

react-ts-vite

npm install --save-dev atomic-bomb@latest

npx atomic-bomb@latest --platform react-ts-vite

Available templates are maintained in Atomic Bomb Templates.

For web projects, uncomment the Atomic Bomb component imports in

src/resources/styles/main.scss

so generated component styles are included. For native projects, run

npm run token-to-native

after editing

tokens.json

Manual setup packages

Install and configure these tools individually when you do not use Create Atomic Install:

Setting up

prepare your system

create your app

run the atomic installer

choose storybook support

run it again or customize setup

Requirements

Version

Manual setup without Create Atomic Install

prepare your system

create your app

install atomic resources

install storybook

configure atomic bomb

Manual setup packages

For AI Agents