create-molecule

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/.

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.

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.

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.

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.

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.