What is an ATOM in this context?

A small presentational React functional component with no business logic.

Should atoms manage state?

No — keep them presentational and stateless.

How should atoms handle props?

Extend intrinsic element props and merge className; use forwardRef when wrapping DOM elements.

atomic-atom

Scanned

npx machina-cli add skill andireuter/skills-webapp/atomic-atom --openclaw

Files (1)

SKILL.md

1.9 KB

Atomic Design: ATOM (React Functional Components)

You are creating an ATOM: the smallest reusable UI primitive.

Inputs

$ARGUMENTS may include a component name and a short intent.

Hard rules

Functional component only (no class components).
No business logic, no data fetching, no app state. Atoms are presentational primitives.
Accessibility first: correct semantics (button, label, input), keyboard support, aria-* only when necessary.
Composable API:
- Prefer children/slots over many boolean props.
- Avoid prop explosions; keep the surface area minimal.
Styling:
- Support className and merge with base classes.
- Avoid styling decisions that depend on application state.
TypeScript-friendly:
- Prefer extending intrinsic element props (e.g., React.ButtonHTMLAttributes<HTMLButtonElement>).
- Use forwardRef when wrapping DOM elements.
Performance:
- Keep atoms cheap; use React.memo only if there’s a proven need (don’t add by default).

Output expectations (when generating code)

Provide:
1. Component.tsx (or .jsx if project is JS)
2. Component.test.tsx (minimal: render + key interaction)
3. Component.stories.tsx (basic variants)
Export as a named export by default.
Include a short usage snippet.

Recommended folder conventions

src/components/atoms/<ComponentName>/
- index.ts
- <ComponentName>.tsx
- <ComponentName>.test.tsx
- <ComponentName>.stories.tsx

Atom checklist

Source

git clone https://github.com/andireuter/skills-webapp/blob/main/skills/atomic-atom/SKILL.mdView on GitHub

Overview

An ATOM is the smallest reusable UI primitive in Atomic Design. It is a functional React component that renders a presentational element (button, input, text, etc.) with minimal surface area, ensuring composability and accessibility.

How This Skill Works

Atoms are functional components that extend intrinsic element props and merge className. They avoid business logic, use forwardRef when wrapping DOM nodes, and are memoized only when performance warrants it.

When to Use It

You need a basic, reusable HTML element with consistent styling (e.g., ButtonAtom, TextAtom).
You’re building inputs, icons, badges, or loaders that should be presentational and composable.
You want to assemble UI from small primitives rather than large components.
You require TypeScript-friendly components that extend HTML element props.
You care about accessibility semantics and keyboard operability in primitives.

Quick Start

Step 1: Create the atom component file (e.g., src/components/atoms/ComponentName/ComponentName.tsx) extending React.HTMLAttributes or the appropriate intrinsic props.
Step 2: Implement as a functional component, forwardRef when wrapping DOM nodes, and merge className with base styles.
Step 3: Export as a named export and add minimal tests/stories per project conventions.

Best Practices

Prefer children/slots to many boolean props.
Accept and merge className with base styles.
Extend intrinsic element props for TS compatibility.
Keep business logic out; atoms do not fetch data or manage state.
Use React.memo only when there’s a demonstrated benefit.

Example Use Cases

ButtonAtom: a consistent base button
InputAtom: text input with label semantics
IconAtom: scalable icon wrapper
TextAtom: typographic span/div with preset styles
LoaderAtom: small spinner built as a presentational element

Frequently Asked Questions

Add this skill to your agents