# UI Layout Discipline

> Use when building, changing, or reviewing UI layouts in Theseus or Icarus, especially data-dense dashboards, tables, calendars, matrices, cards, and cells with optional labels, badges, metrics, or status text.

- Skill: `theseus-run/ui-layout-discipline` (Agent Skill)
- Install (CLI): `npx skillmds@latest add theseus-run/ui-layout-discipline`
- Raw SKILL.md: https://api.skillmd.com/api/skills/theseus-run/ui-layout-discipline/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: theseus-run (https://skillmd.com/u/theseus-run)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/theseus-run/ui-layout-discipline

---


# UI Layout Discipline

Use this skill for data-dense UI surfaces where layout stability matters.

## Core Rule

Dynamic content must not accidentally change row height, column width, cell
size, or neighboring layout geometry.

If a table, calendar, matrix, or dashboard cell can show optional content,
reserve space for the absent state or use a layout primitive that guarantees
stable dimensions.

## Required Patterns

- For matrix/table cells, use explicit CSS grid tracks, fixed/min heights, or
  table-native sizing. Do not let optional labels add a new row only in some
  cells.
- Render an empty placeholder row for missing optional labels when the label row
  exists for other cells.
- Constrain text that can grow with `truncate`, fixed tracks, line clamps, or
  an explicit detail surface. Do not let long status labels resize the cell.
- Keep repeated cells visually isomorphic: same internal rows, same spacing,
  same alignment, same hit target.
- Use browser verification after changing layout. Check both a populated cell
  and an empty cell in the same row.

## Review Traps

- Optional badges/tags adding height.
- Text wrapping inside a fixed-format cell.
- Hover/selected borders changing dimensions.
- Cards inside cards used to solve spacing.
- Fake dashboard/admin shell elements kept after the product surface narrows.

## Acceptance Check

Before finishing UI work, verify:

- cells with and without optional content have the same measured height
- selected and unselected cells have the same dimensions
- long labels do not push neighboring content
- browser screenshot or DOM inspection confirms the intended stable layout