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 コンポーネント階層の Atomic Design: 原子、分子、生物、テンプレート。ユーザー インターフェイスの構築、デザイン システムの作成、コンポーネントの整理、またはフロントエンド コードの構築時にアクティブ化します。あらゆる UI フレームワーク (React、Vue、SwiftUI など) に適用されます。 ソース: jwilger/agent-skills。