compose-molecule

To generate React components by composing smaller UI atoms, you define the desired structure and existing dependencies. The Skill outputs TypeScript molecules, CSS Modules, tests, and documentation, ensuring logic is isolated for maintainability.

Atomic Design molecule composition is building complex UI features by combining independent atoms. This Skill automates that process, enforcing adherence by composing molecules from atoms rather than reimplementing them, streamlining UI development and consistency.

Yes, you can generate TypeScript components and CSS Modules using Atomic Design principles. The Skill validates atom dependencies and automates the creation of the molecule component, styles, tests, and documentation according to your specified structure.

To automate FormField creation from Label, Input, and HelperText atoms, you provide the dependencies to the Skill. It composes them into a reusable molecule component complete with tests and styles, ensuring atoms are validated and correctly integrated.

A key limitation when generating molecules by composing atom components is that the Skill requires existing atoms to function. It enforces Atomic Design adherence by composing molecules from atoms rather than allowing independent, non-atomic UI implementations.