atomic-components

Organizing React UI components with atomic design involves grouping elements into a fixed taxonomy of atoms, molecules, organisms, and templates. This Skill guides creating a consistent component hierarchy within src/components to maintain UI consistency as your project grows.

Structuring a scalable React component hierarchy requires enforcing a fixed directory structure under src/components. This Skill defines concrete classification rules for atoms, molecules, organisms, and templates to support future growth and aid new contributors.

Yes, you can apply atomic design with existing shadcn/ui foundations. This Skill provides guidelines for classifying and organizing components into atoms, molecules, organisms, and templates without modifying the base UI library itself.

Classifying React components involves applying concrete rules based on complexity: atoms are basic elements, molecules combine atoms, and organisms group molecules. This Skill provides specific classification examples to help standardize your frontend workflow.

No, organizing React components by atomic design does not modify the base UI library. This Skill enforces directory structure, file naming, and classification guidelines within your project's src/components folder while leaving underlying UI foundations untouched.