ReddRadar
Agent skill
atomic-design-planning
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.
Install this agent skill to your Project
npx add-skill https://github.com/jclfocused/claude-agents/tree/main/custom_plugins/plugins/linear-planning-workflow/skills/atomic-design-planning
SKILL.md
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:
- Search existing atoms - Is there a Button/Input that works?
- Search existing molecules - Can a FormField be adapted?
- Search existing organisms - Does a similar Card exist?
- Only then create new - Is this truly unique?
Decision Table
| 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 |
Anti-Patterns to Avoid
- Creating when reusing works - Configure existing Button with props instead
- Feature-specific atoms - "UserProfileButton" should be an organism
- Skipping levels - Pages shouldn't directly use atoms
- Wrong abstraction level - Atoms shouldn't have business logic
Integration with Linear Workflow
When planning UI features, create issues for:
- Atom issues - New basic components needed
- Molecule issues - New component combinations
- Organism issues - New feature-level components
Investigation phase should identify existing components to reuse.
Remember: Reuse existing components. Only create what's truly missing.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jclfocused/claude-agents
graphite-workflow
Use this skill when working with Graphite (gt) for stacked PRs, using execute-issue-graphite agent, or when the user mentions Graphite, stacking, or gt commands. Ensures proper use of gt commands instead of raw git for stack-aware operations.
jclfocused/claude-agents
vertical-slice-planning
Use this skill when discussing feature breakdown, PR structure, implementation ordering, or how to decompose work. Guides thinking about vertical slices (end-to-end functionality) rather than horizontal layers (all of one layer first). Triggers on "how should we break this down?", "what order should we implement?", "how many PRs?", or decomposition discussions.
jclfocused/claude-agents
issue-writing
Use this skill when writing, reviewing, or discussing issue descriptions, acceptance criteria, or task breakdowns. Ensures consistent, high-quality issue structure that any developer or AI can pick up and execute. Triggers when drafting issues, defining requirements, or when users ask "how should I write this issue?" or "what should the acceptance criteria be?"
jclfocused/claude-agents
mvp-scoping
Use this skill when discussing features, planning work, or when users describe what they want to build. Guides MVP thinking - focusing on "what's the minimum to make this work?" rather than comprehensive solutions. Triggers on phrases like "help me think through this feature", "what should we build first?", "how should we scope this?", or any feature planning discussion.
jclfocused/claude-agents
linear-discipline
Use this skill when discussing code changes, implementation work, feature status, or when starting/completing development tasks. Reminds about Linear issue tracking discipline - always having an issue in progress before writing code, marking work as done, and creating issues for unexpected scope. Triggers when users mention implementing features, writing code, or checking on work status.
jclfocused/claude-agents
example-skill
Example skill - Claude will autonomously use this based on the description. Describe what this skill does and when to use it.
Didn't find tool you were looking for?