---
name: atomic-design
description: Use when decomposing UI into atoms, molecules, organisms, templates, and pages for React, React Native, Expo, Next.js, Vite, or Tauri applications.
---

# Atomic Design Skill

Use Atomic Design to decompose UI bottom-up before assembling pages.

## Activation

Use this skill when a task asks for UI, layout, reusable components, design systems, Storybook stories, or component refactors.

## Layer Rules

Atoms are the smallest reusable UI pieces. Examples: Button, Label, Input, Icon, Heading, Paragraph, Image, CodeSnippet.

Molecules combine atoms into reusable UI groups. Examples: SearchField, MenuItem, CheckListItem, ProductSummary, FormField.

Organisms combine molecules and atoms into page sections. Examples: Hero, Menu, Documentation, CheckList, ProductGrid, LoginForm.

Templates define reusable layout structure. They place organisms but should not contain business rules.

Pages are route-level compositions with real data. Pages pass data to templates and organisms.

## Mandatory Decomposition

Before implementation:

1. List the visible UI elements.
2. Convert repeated primitives into atoms.
3. Convert small groups into molecules.
4. Convert sections into organisms.
5. Define the template only after organisms are known.
6. Define the page last.

## Example: Login Form

Atoms:

- Label
- Input
- Button
- Paragraph

Molecules:

- EmailField
- PasswordField
- FormActions

Organism:

- LoginForm

Page:

- LoginPage

## Example: Product Card

Atoms:

- Image
- Heading
- Paragraph
- Price
- Button

Molecules:

- ProductMedia
- ProductDetails
- ProductActions

Organism:

- ProductCard

## Checks

- Atoms contain no business logic.
- Molecules do not fetch data.
- Organisms receive typed data by props.
- Pages own route-level data selection.
- Existing components are reused before new components are generated.