atomic-design

Value: Simplicity and communication. Building UI from small, named, composable pieces makes the interface understandable to everyone on the team and prevents the complexity that comes from monolithic components.

Teaches how to organize UI components into a hierarchy of increasing complexity: atoms, molecules, organisms, and templates. Each level has clear responsibilities and composition rules. The outcome is a component system where every piece is reusable, testable in isolation, and named in a shared vocabulary.

Start with the smallest reusable elements and compose upward. Never skip a level.

Brad Frost의 UI 구성 요소 계층 구조에 대한 원자 설계: 원자, 분자, 유기체, 템플릿. 사용자 인터페이스 구축, 디자인 시스템 생성, 구성 요소 구성 또는 프런트엔드 코드 구조화 시 활성화됩니다. 모든 UI 프레임워크(React, Vue, SwiftUI 등)에 적용됩니다. 출처: jwilger/agent-skills.