Can molecules contain other molecules?

No, according to the Atomic Design pattern, molecules should only be composed of atoms to maintain simplicity and prevent excessive nesting.

Does this skill provide code examples?

Yes, it includes detailed implementation patterns for FormFields, SearchForms, MediaObjects, NavItems, and CardHeaders.

What are molecules in Atomic Design?

Molecules are groups of atoms bonded together that form the smallest fundamental unit of a compound UI element, such as a label and an input combined into a form field.

How do molecules differ from organisms?

Molecules are simple, single-purpose units made of atoms, whereas organisms are more complex components composed of groups of molecules and/or atoms.

Atomic Design Molecules

Name: Atomic Design Molecules
Author: TheBushidoCollective

byTheBushidoCollective

•

Design Tools

Composes foundational atoms into functional, reusable UI molecule components for consistent design systems.

About

This skill provides specialized guidance for implementing the 'Molecules' layer of Atomic Design within Claude Code. It enables the creation of functional UI units—such as form fields, search bars, and media objects—by combining individual atoms while maintaining a single-purpose focus. By following these implementation patterns, developers can ensure their component libraries remain modular, accessible, and easy to maintain across complex software projects, bridging the gap between basic elements and complex organisms.

Key Features

Standardized FormField composition with labels and error states
SearchForm patterns with integrated inputs and action buttons
Accessible Navigation Item and Breadcrumb implementations
Media Object layouts for consistent avatar and text alignment
Card Header patterns for structured content presentation
66 GitHub stars

Use Cases

Developing standardized list items and stat displays
Creating reusable navigation and pagination controls
Assembling complex form inputs from basic UI atoms

About

Key Features

Standardized FormField composition with labels and error states
SearchForm patterns with integrated inputs and action buttons
Accessible Navigation Item and Breadcrumb implementations
Media Object layouts for consistent avatar and text alignment
Card Header patterns for structured content presentation
66 GitHub stars

Use Cases

Developing standardized list items and stat displays
Creating reusable navigation and pagination controls
Assembling complex form inputs from basic UI atoms