Component Builder

Create new components that belong in the target product instead of producing isolated demo UI.

Start With The Project

Inspect the relevant page, nearby components, design tokens, dependencies, content model, responsive conventions, and tests before choosing an implementation. Reuse established primitives and icon libraries. Do not replace an existing design system merely because another library is familiar.

Identify:

• the requested component concept and user task;
• the surface and interface type;
• where the new component belongs and which existing primitives it may reuse;
• the component's real content and states;
• the target stack and existing ownership boundary.

For a page composition, define the page's job and reuse child components from the catalog. Do not turn a page pattern into a second maintenance source for every component it contains.

Load Only Relevant Guidance