# Rexui Layout Sizers

> Use this skill when building RexUI layouts with sizer, gridSizer, fixWidthSizer, overlapSizer, nested sizers, RexUI layout(), child proportion, expand, align, padding, spacing, childrenMap, or layout debugging. Triggers on: RexUI layout, RexUI sizer, gridSizer, fixWidthSizer, overlapSizer, this.rexUI.add.sizer, layout(), proportion, expand, RexUI nested layout.

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

---


# RexUI Layout Sizers

Use this skill for RexUI layout composition. It covers the four primary layout factories and the shared `BaseSizer` behavior used by most RexUI widgets.

## Use This First

Pick the layout factory before writing component config:

| Need | Use |
|---|---|
| A horizontal or vertical row/column | `sizer` |
| Known rows and columns | `gridSizer` |
| Children that wrap by width | `fixWidthSizer` |
| Children stacked in the same rectangle | `overlapSizer` |

Default to `sizer` unless the user clearly needs a grid, wrapping flow, or overlay.

## Required Setup

This skill assumes RexUI is already available as `this.rexUI`. If not, use `rexui-setup-and-factory` first.

For npm-installed projects, the setup import is:

```js
import UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';
```

## References

Read these only when needed:

- `references/sizer-config.md`: config fields, add config, shared BaseSizer methods.
- `references/layout-recipes.md`: reduced recipes for the four primary layout factories.
- `references/layout-gotchas.md`: common mistakes and debugging checks.

## Core Rules

- Call `.layout()` after adding children or changing layout-relevant config.
- Children are Phaser game objects or RexUI game objects, not plain strings.
- Use `space` on the container for outer/item spacing.
- Use child `padding` for spacing around one child.
- Use child `proportion` to distribute remaining space in `sizer`.
- Use child `expand` when the child should fill its assigned layout area.
- Give important children `key` values so code can retrieve them with `getElement()`.
- Keep nested layouts explicit: create child sizers first, then add them to parent sizers.

## Source File Map

- `templates/ui/basesizer/BaseSizer.d.ts`: shared layout methods and child map methods.
- `templates/ui/sizer/Sizer.d.ts`: linear layout.
- `templates/ui/gridsizer/GridSizer.d.ts`: fixed grid layout.
- `templates/ui/fixwidthsizer/FixWidthSizer.d.ts`: wrapping flow layout.
- `templates/ui/overlapsizer/OverlapSizer.d.ts`: stacked/overlay layout.
- `templates/ui/<layout>/Factory.js`: exact factory signatures.

## Related Skills

- `rexui-setup-and-factory`: plugin setup and factory discovery.
- `rexui-components-catalog`: choose a component family.
- `rexui-basic-widgets`: labels, buttons, tabs, sliders.
- `rexui-dialogs-and-popups`: dialog layouts built from sizers.
- `rexui-scroll-lists-and-tables`: scrollable panels and grid tables.