Layout Framework

---
name: layout-framework
description: Use for any frontend layout or form arrangement work in PierceDesk. Covers Box/Container/Grid/Stack/Paper usage, responsive sizing, spacing rules, and how to align pages with the app’s layout framework. Trigger when asked to fix layout issues, align fields, create grids, or ensure design-system consistency.
---

# Layout Framework Skill

## Core rules (always follow)

- Use MUI v7 Grid with the `size` prop (not `xs`/`md` props).
- Prefer `Grid container` for column layouts; use `Stack` for simple vertical rhythm.
- Avoid hardcoded widths/heights; use theme spacing and responsive values (`{ xs, md }`).
- Wrap major sections in `Paper background={1}` with `p: { xs: 3, md: 5 }` and `borderRadius: 6` unless the surrounding layout already provides a card.
- Keep inputs aligned in a consistent grid (e.g., 12 / 6 / 3 / 3, 8 / 4, 6 / 6). No uneven, ad-hoc sizing.
- Use `Container` only for page-level width constraints. Inside cards, use `Grid` for structure.

## When to read references

- For exact examples of Box/Container/Grid/Stack usage, read:
  - `references/component-docs-map.md`
  - `references/layout-patterns.md`

## Default layout patterns

- **Two-column forms**: `Grid container spacing={{ xs: 2, md: 3 }}` with `size={{ xs: 12, md: 6 }}`.
- **Primary + secondary field**: `size={{ xs: 12, md: 8 }}` + `size={{ xs: 12, md: 4 }}`.
- **Address block**: street `12`, city `6`, state `3`, zip `3`.
- **Section cards**: each form block inside `Paper background={1}` with internal `Grid` or `Stack`.

## Process checklist

1. Identify the page sections and their cards.
2. Decide row/column structure using `Grid` (avoid ad-hoc `sx` flex sizing).
3. Normalize spacing with `spacing={{ xs: 2, md: 3 }}` and `p: { xs: 3, md: 5 }`.
4. Verify that labels/inputs align across rows and breakpoints.
5. Remove any hardcoded widths or manual flex ratios unless they map to a grid size.