Stats
Actions
Tags
Use this skill when discussing UI components, design systems, frontend implementation, or component architecture. Guides thinking about Atomic Design methodology - atoms, molecules, organisms - and promotes component reuse over creation. Triggers on UI/frontend discussions, "what components do we need?", "should I create a new component?", or design system questions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/linear-planning-workflow:atomic-design-planningThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill guides UI component architecture using Atomic Design methodology, emphasizing reuse of existing components and proper categorization of new ones.
This skill guides UI component architecture using Atomic Design methodology, emphasizing reuse of existing components and proper categorization of new ones.
Apply this skill when:
┌─────────────────────────────────────────────────────────┐
│ 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) │
└─────────────────────────────────────────────────────────┘
Smallest, indivisible UI elements: Buttons, Inputs, Labels, Icons, Typography.
Simple combinations of 2-4 atoms: SearchInput, FormField, NavItem.
Complex, distinct UI sections: Header, ProductCard, LoginForm, DataTable.
Page-level structural layouts: DashboardLayout, AuthLayout.
Specific instances with real content: HomePage, ProductDetailPage.
Before creating ANY component:
| Question | If Yes | If No |
|---|---|---|
| Does something similar exist? | Reuse/extend it | Continue evaluation |
| Will this be used in 2+ places? | Consider extracting | Inline it instead |
| Is it truly indivisible? | Make it an atom | Make it a molecule+ |
| Does it combine 2-4 atoms? | Make it a molecule | Make it an organism |
| Is it a complete UI section? | Make it an organism | Reconsider structure |
When planning UI features, create issues for:
Investigation phase should identify existing components to reuse.
Remember: Reuse existing components. Only create what's truly missing.
npx claudepluginhub jclfocused/claude-agents --plugin linear-planning-workflowApplies five-level atomic design methodology (atoms → molecules → organisms → templates → pages) to decompose UI components and structure design systems.
Organizes UI components using Atomic Design hierarchy: quarks (design tokens), atoms, molecules, organisms, templates, pages. Covers principles for scalable, maintainable design systems.
Implements Atomic Design hierarchy (Atoms, Molecules, Organisms, Templates, Pages) for design systems, producing component inventories, design token audits, composition rules, and Storybook coverage reports.