atomic-design-guide

Define atomic-design governance rules for UI component hierarchy and promotion criteria.

Updated Aug 23, 2026

Search Tags:#design-system #hierarchy #atomic-design #ui-guidelines #component-organization #promotion-rules

Ready to run

npx skills add https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms --skill atomic-design-guide-thinkeloquent

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: atomic-design-guide
Source: https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms/tree/main/.claude/skills/atomic-design-guide
Command: npx skills add https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms --skill atomic-design-guide-thinkeloquent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide clarifies where components belong in the atomic‑design hierarchy and provides rules to reason about naming, placement, and promotion across atoms, molecules, organisms, templates, and pages.

Core Features & Use Cases

Clear definitions of Atom, Molecule, Organism, Template, and Page with practical examples.
Dependency direction guidance to prevent higher-level components from importing lower-level ones.
Promotion rules to move components to higher levels when ownership or reuse emerges.
Guidance for extracting shared substructures when found across multiple organisms.

Quick Start

Review this guide before coding to align on atomic‑design decisions.

Frequently Asked Questions about atomic-design-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is atomic design hierarchy and when do I need it for my UI components?▼

Atomic design hierarchy organizes UI components into atoms, molecules, organisms, templates, and pages. You need it to structure component placement, enforce dependency direction, and manage reuse across your design system.

How do I decide whether a UI component is an atom, molecule, or organism?▼

Decide component level by evaluating its dependencies and ownership. Atoms are basic elements, molecules combine atoms, and organisms group molecules. Apply promotion rules to move components up when reuse or ownership emerges.

How do I enforce dependency direction in atomic design?▼

Enforce dependency direction by ensuring higher-level components like organisms never import lower-level atoms directly. This guide provides clear rules to prevent cross-level imports and maintain strict component organization within the hierarchy.

What are the rules for promoting a component to a higher level in atomic design?▼

Promote a component to a higher atomic design level when shared ownership or reuse across multiple organisms emerges. This guide provides practical promotion criteria to standardize when and how to move components up the hierarchy.

How do I extract shared substructures found across multiple organisms?▼

Extract shared substructures by identifying common patterns across organisms and moving them to an appropriate lower level. This guide provides governance rules to standardize extraction and maintain consistent UI component organization.