Build Web Components

Reuse-First Rule

Treat raw DOM or HTML elements, or equivalent low-level primitives, as implementation details of reusable building blocks instead of the default way to assemble feature UI.

Follow this order every time:

1. Reuse an existing generic component.
2. Generalize an existing non-generic component and reuse it.
3. Write new code only after exhausting 1 and 2.
4. Extract smaller reusable pieces from the new code immediately.

Aim for feature components to be composed mostly of project components, design-system primitives, and framework-native composition mechanisms. Keep direct low-level nodes isolated inside reusable primitives whenever practical.

Recursive Decomposition Rule

Mandatory: every component must be decomposed into smaller components recursively until it can no longer be meaningfully split.