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.
소스 정보
- 저장소
- majiayu000/claude-skill-registry-data
- 최근 소스 활동
- 2026년 4월 21일 02:21
- 감지된 SKILL.md 언어
- 영어
- 스타
- 22
- 포크
- 8
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
2 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- atomic-design-planning
- description
- 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.
# 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
## 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.
- No dependencies, 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.
- May connect to data/state, often feature-specific
## The Reuse-First Principle
Before creating ANY component:
1. **Search existing atoms** - Is there a Button/Input that works?
2. **Search existing molecules** - Can a FormField be adapted?
3. **Search existing organisms** - Does a similar Card exist?
4. **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+ |
## Integration with Jira Workflow
When planning UI features, create Subtasks for:
1. **Atom Subtasks** - New basic components needed
2. **Molecule Subtasks** - New component combinations
3. **Organism Subtasks** - New feature-level components
Investigation phase should identify existing components to reuse.
Remember: **Reuse existing components. Only create what's truly missing.**
GitHub에서 보기