Scaffold a new atomic-design Molecule — a small purposeful group of atoms acting as one unit (e.g., SearchField, MenuItem, FormField). Creates the component, styles, story, test, and barrel export in src/molecules/<Name>/. Use when the user asks to "create a molecule", "scaffold a molecule", or "combine these atoms into a SearchField/FormField/etc."
Create a molecule when the component:
If it owns orchestration state or represents a distinct section → use create-organism.
SearchField, MenuItem).In src/molecules/<Name>/:
<Name>.tsx — composes atoms, forwards relevant props, handles minimal local coordination.<Name>.module.css — layout/grouping styles only; atom-level styles stay in the atom.<Name>.stories.tsx — Default + at least one variant that exercises the composition.<Name>.test.tsx — assert the atoms render together and that interaction between them works (e.g., label↔input htmlFor).index.ts — export * from './<Name>';<Name>.tsximport type { ReactNode } from 'react';
import styles from './<Name>.module.css';
import { useFeatureFlag } from '../../featureFlags/useFeatureFlag';
import { /* atom imports */ } from '../../atoms';
export interface <Name>Props {
featureFlag?: string;
featureFlagFallback?: ReactNode;
// public API
}
export function <Name>({ featureFlag, featureFlagFallback = null, ...rest }: <Name>Props) {
const visible = useFeatureFlag(featureFlag);
if (!visible) return <>{featureFlagFallback}</>;
return (
<div className={styles.root}>
{/* compose atoms here */}
</div>
);
}
atoms/ (and the shared featureFlags/ primitive). Never from molecules/, organisms/, etc. — sibling molecule reuse is a red flag; lift the shared part to an atom.useFeatureFlag early-return. See feature-flag-visibility skill.Hidden Storybook story and a returns null when flag is off test.atomic-hierarchy-auditor agent on the new directory.