Row and Column exist for a reason. Flex with direction is the #1 mistake in generated Once UI code.
The tip
Write this:Not this: a Flex with direction="column" — use Column instead.
Why
Row and Column are semantic layout primitives. They tell the reader (human or agent) the intent immediately. Flex direction="column" is an implementation detail that:
Adds noise to every layout block
Fails validate-ai-code checks
Makes diffs harder to review
Flex exists for one case: when direction changes at breakpoints.
Same rule for horizontal
Write this:Not this: a Flex with direction="row" — use Row instead.
Agent note
The harness encodes this in rules.compact.md and catalog.json:
Column.preferOver: "Flex with direction="column""
Flex.avoid: "Static row/column layouts — use Row or Column instead"
