Atomic Component Generator

What problem does it solve?

This Skill ensures the creation of highly reusable, maintainable, and testable React components by enforcing Atomic Design principles and the Smart/Dumb component pattern, preventing monolithic components and code duplication.

Core Features & Use Cases

• Maximal Decomposition: Guides on breaking down UI into small, single-responsibility components (Atoms, Molecules, Organisms), with strict line limits for each.
• Smart/Dumb Component Pattern: Differentiates between "Smart" (logic, state, Server Actions) and "Dumb" (pure presentation) components, clarifying responsibilities.
• Server/Client Component Strategy: Emphasizes using Server Components by default for data fetching and Client Components only for interactivity, optimizing performance and SEO.
• Use Case: When building a complex form, decompose it into a "Smart" ClubCreationForm (managing state and Server Actions) and several "Dumb" components like ClubInfoStep or PlanSelectionStep (handling pure UI presentation), ensuring each part is focused and reusable.

Quick Start

To create a new component, first decide if it's a Smart (logic) or Dumb (presentation) component. Ensure it has a single responsibility and is maximally decomposed. Place all components in features/*/components/ and never directly in app/.