atomic-design-planning

# Atomic Design Planning Skill

This skill guides UI component architecture using Atomic Design methodology, emphasizing reuse of existing components and proper categorization of new ones.

## When to Use

Apply this skill when:
- Planning UI features or components
- Deciding whether to create new components
- Discussing frontend architecture
- Users ask "what components do we need?"
- Reviewing UI implementation plans
- Discussing design system structure

## Atomic Design Hierarchy

```
┌─────────────────────────────────────────────────────────┐
│  PAGES         - Complete screens with real content     │
├─────────────────────────────────────────────────────────┤
│  TEMPLATES     - Page-level layout structures           │
├─────────────────────────────────────────────────────────┤
│  ORGANISMS     - Complex UI sections (Header, LoginForm)│
├─────────────────────────────────────────────────────────┤
│  MOLECULES     - Simple groups (SearchInput, NavItem)   │
├─────────────────────────────────────────────────────────┤
│  ATOMS         - Basic blocks (Button, Input, Icon)     │
└─────────────────────────────────────────────────────────┘
```

## Component Categories

### Atoms
Smallest, indivisible UI elements: Buttons, Inputs, Labels, Icons, Typography.
- No dependencies on other components
- Highly reusable, controlled by props only

### Molecules
Simple combinations of 2-4 atoms: SearchInput, FormField, NavItem.
- Single responsibility, reusable in multiple organisms

### Organisms
Complex, distinct UI sections: Header, ProductCard, LoginForm, DataTable.
- May connect to data/state, often feature-specific

### Templates
Page-level structural layouts: DashboardLayout, AuthLayout.
- Define content placement, handle responsive behavior

### Pages
Specific instances with real content: HomePage, ProductDetailPage.
- Templates filled with data, route-specific

## The Reuse-First Principle

Before creating ANY component:

1. **Search existing atoms** - Is there a Button/In