atomic-design-fundamentals
Atomic Design Fundamentals
Master Brad Frost's Atomic Design methodology (extended with quarks) for building scalable, maintainable component-based user interfaces. This skill covers the core hierarchy, principles, and organization strategies for modern design systems.
Overview
Atomic Design is a methodology for creating design systems inspired by chemistry. Just as atoms combine to form molecules, which combine to form organisms, UI components follow a similar hierarchical structure. We extend this with quarks - the sub-atomic level of design tokens:
- Quarks - Design tokens (colors, spacing, typography scales, shadows)
- Atoms - Basic building blocks (buttons, inputs, labels)
- Molecules - Groups of atoms functioning together (search form, card)
- Organisms - Complex UI sections (header, footer, sidebar)
- Templates - Page-level layouts without real content
- Pages - Templates with real representative content
The Six Stages
0. Quarks
More from thebushidocollective/han
android-jetpack-compose
Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.
1.1Kfastapi-async-patterns
Use when FastAPI async patterns for building high-performance APIs. Use when handling concurrent requests and async operations.
786storybook-story-writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
487solid-principles
Use during implementation when designing modules, functions, and components requiring SOLID principles for maintainable, flexible architecture.
252angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
216django-rest-framework
Use when Django REST Framework for building APIs with serializers, viewsets, and authentication. Use when creating RESTful APIs.
180