메뉴
Atomic Design quick reference — levels, composition rules, tokens, naming
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
Design, implement, and verify App Intents, App Entities, App Shortcuts, widgets, Siri, Spotlight, and Apple Intelligence surfaces with stable identity and safe execution.
Diagnose SwiftUI rendering, launch, responsiveness, concurrency, memory, energy, and simulator failures using reproducible traces and before-after evidence.
Mobile-first design mastery — touch targets, gesture patterns, responsive breakpoints, native-feel animations, thumb zones, platform conventions (iOS/Android), and progressive enhancement strategies
Design and review Swift 6 concurrency boundaries using structured tasks, actors, Sendable values, cancellation, and compiler-backed data-race safety.
Build an Apple-platform test strategy with Swift Testing for unit and integration coverage, XCTest for UI automation, deterministic fixtures, and concise agent-readable results.
| name | atomic-design |
| description | Atomic Design quick reference — levels, composition rules, tokens, naming |
| Level | Folder | Composes | Has State | Fetches Data | Real Content |
|---|---|---|---|---|---|
| Atom | components/ui/ | Nothing | No | No | No |
| Molecule | components/molecules/ | 2–5 atoms | Maybe | No | No |
| Organism | components/organisms/ | Molecules + atoms | Yes | Yes | No |
| Template | components/templates/ | Organisms | No | No | Placeholder |
| Page | (route file) | Templates | No | Yes | Real |
If you can't decide: IF it composes nothing → atom. IF it composes ≤5 atoms → molecule. IF it manages state or fetches data → organism. IF it's a full layout skeleton → template.
composesSpecs, no imports of other atomscomponents/
ui/ # atoms (shadcn primitives)
molecules/
organisms/
templates/
Global tokens (--blue-500, --space-4)
→ Alias tokens (--color-primary, --spacing-component)
→ Component tokens (--button-bg, --card-radius)
Override alias tokens per theme: :root, .dark, .brand-b.
| Level | Required |
|---|---|
| Atom | ARIA role, keyboard focus, contrast, label |
| Molecule | Focus management, error announcements |
| Organism | Landmark roles, skip links, focus trapping |
| Template | Page title, heading hierarchy, main landmark |
| Page | Full WCAG 2.1 AA |
| Element | Convention | Example |
|---|---|---|
| Components | PascalCase | MetricCard |
| Props | camelCase | isLoading |
| CSS classes | kebab-case | text-muted-foreground |
| Constants | UPPER_SNAKE | MAX_RETRY_COUNT |
| Tokens | path/style | color/primary/500 |
| Figma | Code |
|---|---|
| Component | React component |
| Component Set | Variant type union |
| Component Property | React prop |
| Auto Layout | Flexbox / Grid |
| Design Token | CSS Variable → Tailwind class |
| Section | Organism |