What defines a 'Molecule' in this Atomic Design skill?

Molecules are functional groups of atoms that work together as a single unit to perform one specific task, such as a search form or a media object.

Can molecules contain other molecules?

No, according to the Atomic Design principles enforced by this skill, molecules should only be composed of atoms to maintain a flat, manageable hierarchy and clear separation of concerns.

How does this skill handle component state?

This skill promotes 'minimally stateful' molecules, focusing primarily on internal UI concerns (like input values or toggle states) rather than complex business logic.

Is this skill compatible with React and TypeScript?

Yes, the skill provides detailed implementation examples using TypeScript, React, and CSS Modules for professional-grade frontend development.

Atomic Design Molecules

Name: Atomic Design Molecules
Author: TheBushidoCollective

byTheBushidoCollective

•

デザインツール

Builds functional UI molecules by composing primitive atoms into reusable, single-purpose components like form fields and navigation items.

This skill provides specialized guidance for implementing the 'Molecules' stage of the Atomic Design methodology within Claude Code. It enables the creation of cohesive, functional units—such as search bars, media objects, and card headers—by assembling basic atoms. By following these patterns, developers can ensure their UI components remain single-purpose, highly reusable, and consistent across complex design systems while maintaining clean, professional code standards that align with ethical software development principles.

主な機能

01Implementation guides for MediaObject and NavItem components

02Composition of primitive atoms into functional UI units

03Best practices for accessibility and ARIA attributes in composite components

04Standardized patterns for FormField and SearchForm molecules

0597 GitHub stars

06Clean CSS module structures for encapsulated component styling

ユースケース

01Refactoring monolithic UI components into smaller, reusable molecules

02Building a robust component library from the ground up using Atomic Design principles

03Standardizing form handling and navigation elements across a large frontend project

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