flat-composition

Flat composition is a frontend architecture pattern that eliminates deep component nesting to promote self-contained UI units. It organizes code into zero-props components that self-fetch data, wired through a thin container-driven layout with clear boundaries across features.

To build zero-props components, you create independent UI units that self-fetch data and wire them through a thin container. This flat composition approach enforces component autonomy by removing nested prop drilling and standardizing directory structure across features.

To avoid deep component nesting, apply a flat composition pattern using container-driven layouts and clear component boundaries. This enforces zero-props components and standardized directory structures to keep UI units self-contained across features.

Use a container-driven layout when you need to enforce clear component boundaries and eliminate deep nesting across features. This pattern works best for scaling frontend codebases with zero-props components that require standardized organization and migration workflows.

Migration to a flat component structure uses provided workflow checks, component templates, and migration guidance. You refactor deeply nested UI units into zero-props components and wire them through a thin container while enforcing clear boundaries across feature directories.

DESIGN_ADN.md serves as the source of design tokens for flat composition patterns. It standardizes component templates and migration workflows, ensuring zero-props components and container-driven layouts maintain consistent design boundaries across feature directories.