compositelisted

# Composite section block When the operator asks for a landing-page section that doesn't fit the typed vocabulary (hero / services / about / faq / mid-cta / trust-strip / testimonials / footer), build it as a **tree of low-level primitives**. The server renders the tree to HTML+CSS using the workspace's theme tokens. You don't type a "comparison block" — you compose one. ## When to use composite vs typed blocks | Operator says | Use | |---|---| | "Add a hero section" | typed `hero` block via persist_block | | "Replace the hero" | typed `hero` block | | "Add a comparison of us vs DIY" | **composite** | | "Add pricing tiers" | **composite** | | "Add a how-it-works in 4 steps" | **composite** | | "Add a stats row with 4 numbers" | **composite** | | "Add a side-by-side image + bullet list" | **composite** | | "Add an FAQ" | typed `faq` block | | "Edit the FAQ headline" | `update_landing_section` | If a typed block exists for what the operator wants, prefer it — typed blocks have richer validation and tighter SKILL.md guidance per type. Composite is the fallback for the long tail. ## Primitive vocabulary 12 node kinds. Every tree is built from these. Tree root MUST be `kind: "section"`. ### Containers - `section` — top-level. `eyebrow?` (kicker, ≤60 chars), `headline?` (≤120), `subhead?` (≤240), `children`. Caps: ≤8 children. - `row` — horizontal layout. `cols: 2 | 3 | 4` (default 2). `children`. Caps: ≤4 children. Stacks to 1 col on mobile. - `col` — vertical layout (used