atomic-design-planning

Apply the Atomic Design methodology to establish a clear hierarchy of Atoms, Molecules, Organisms, Templates, and Pages. This approach promotes component reuse, maintains design system consistency, and builds a scalable frontend architecture.

Follow a reuse-first principle by searching for and adapting existing components before creating new ones. Use the provided decision table to evaluate component reuse against organism complexity, determining if existing atoms can be combined into a new molecule or if a new component is truly necessary.

Plan a user profile card by evaluating if existing Button, Avatar, and Text atoms can be combined into a new Molecule or Organism. This technique ensures scalable and maintainable user interfaces by maximizing component reuse and avoiding unnecessary duplication.

Common design system anti-patterns include creating overly complex organisms or duplicating functionality instead of reusing existing atoms. The methodology provides anti-pattern avoidance tips to ensure component creation remains scalable, maintainable, and adheres to atomicity principles.

Atomic design is built for managing complex frontend architectures by enforcing atomicity and organism complexity limits. It facilitates architectural discussions and ensures your user interfaces remain scalable and maintainable as the component library expands.