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

•

디자인 도구

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

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.

주요 기능

01Standardized FormField composition with labels and error states

02SearchForm patterns with integrated inputs and action buttons

03Accessible Navigation Item and Breadcrumb implementations

04Media Object layouts for consistent avatar and text alignment

05Card Header patterns for structured content presentation

0666 GitHub stars

사용 사례

01Developing standardized list items and stat displays

02Creating reusable navigation and pagination controls

03Assembling complex form inputs from basic UI atoms

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thebushidocollective/han atomic-design-molecules

For use in Claude.ai and ChatGPT

Download Skill