create-molecule

Scaffold a React molecule by composing atoms into a single component.

Updated Aug 27, 2026

Search Tags:#typescript #testing #scaffold #storybook #molecule #atomic-design #ui-component

Ready to run

npx skills add https://github.com/thinkeloquent/mta-ui-atomicdesign-organisms --skill create-molecule

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffold a reusable Molecule by composing atoms into a single unit with a clear public API, reducing duplication and wiring overhead in UI design systems.

Core Features & Use Cases

Scaffolds a new molecule under src/molecules/<Name>/ with a TSX component that composes atoms.
Generates a dedicated CSS module for layout grouping, Storybook stories to demonstrate composition, and a test scaffold to verify interactions.
Enables standardized export via index.ts to streamline barrel usage across the design system.

Quick Start

Run the create-molecule scaffold with a PascalCase Name and a list of atoms to generate a complete molecule scaffold.

Frequently Asked Questions about create-molecule

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

FAQPage Schema

How do I scaffold a reusable molecule in atomic design?▼

Scaffold a molecule by providing a PascalCase Name and a Props contract to generate the standard component directory, which outputs a TSX file composing atoms, a CSS module, Storybook stories, a test scaffold, and an index.ts barrel export under src/molecules/.

What files are generated when creating an atomic design molecule?▼

Creating an atomic design molecule generates five standard files under src/molecules/<Name>/: a TSX component composing atoms, a CSS module for layout, a Storybook stories file, a test file, and an index.ts for barrel exports.

When should I compose atoms into a molecule instead of building a standalone component?▼

Compose atoms into a molecule when you need a compact, reusable control like a SearchField or FormField, ensuring a clear public API and standardized file structure while reducing duplication and wiring overhead in your design system.

Do I need existing atoms before scaffolding a molecule?▼

Yes, scaffolding a molecule requires a list of composed atoms to be provided as input, acting as the foundational UI units that the newly generated molecule TSX component will import and combine into a single reusable control.

Can I generate Storybook stories and test scaffolds alongside my molecule component?▼

Yes, the molecule scaffolding process automatically generates a Storybook stories file to demonstrate composition and a test scaffold to verify interactions, alongside the main TSX component and CSS module.

Why use a barrel export for molecules in a TypeScript design system?▼

Using a barrel export via index.ts streamlines standardized usage across the design system, allowing you to import the molecule cleanly without referencing internal file paths, reducing wiring overhead.