How do I install the Rexui Layout Sizers skill?

Run npx skillmds@latest add rexrainbow/rexui-layout-sizers in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Rexui Layout Sizers safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Rexui Layout Sizers?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Rexui Layout Sizers free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Rexui Layout Sizers?

rexrainbow (@rexrainbow) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Rexui Layout Sizers by rexrainbow — Agent Skill

Name: Rexui Layout Sizers
Author: rexrainbow

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.

rexrainbow 507a979 4 files · 14.3 KB Updated Sep 17, 2026

File contents

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:

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.

---name: rexui-layout-sizersdescription: 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.---# RexUI Layout SizersUse 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 FirstPick 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 SetupThis 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:```jsimport UIPlugin from 'phaser4-rex-plugins/templates/ui/ui-plugin.js';```## ReferencesRead 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.

Frequently asked questions