aidd-layout

Layout and component types

UI components are one of two types with no overlap. Every component is either terminal or layout.

---

Terminal components

TerminalComponent {
  renders: "own UI (buttons, inputs, cards, text, etc.)"
  contains: "CSS for appearance"
  never: "contain any external margin"
  role: "leaves of the component tree; own visual styling and content"
}

---

Layout components

LayoutComponent {
  doesNotRender: "any UI themselves"
  composedOf: "other layout or terminal components only"
  responsibleFor: "interior gaps between children"
  never: "contain any external margin"
  css: "Should not need CSS 90% of the time or more — use standard layout tokens"
  reRender: "Generally no business logic; should never re-render — keeps re-renders at terminal levels"
  exception: "Some layout components explicitly manage state (animating, tabs, accordions) — those have logic and may re-render"
}

Should not need CSS 90% of the time or more — use the standard layout tokens. See design-tokens.

---

Why this split matters

Layout components that rarely re-render are efficient. State changes and user interactions trigger updates at terminal levels; layout structure above stays stable. Avoid putting reactive logic in layout components unless the layout itself is dynamic (tabs, accordions, animations).

---

Execute

fn whenCreatingOrModifyingUIComponent() {
  Constraints {
    Classify as terminal or layout; no overlap
    Terminal: owns UI and CSS; never external margin
    Layout: no own UI; only layout/terminal children; owns interior gaps; never external margin
    Prefer standard layout tokens for layout components; avoid custom CSS when possible
    Keep layout components free of business logic unless they explicitly manage layout state (tabs, accordions, animations)
  }
}

See design-tokens for token reference.