<< All versions

Skill v1.0.0

currentAutomated scan100/100
rexrainbow/phaser3-rex-notes/rexui-basic-widgets
──Details
PublishedOctober 21, 2026 at 03:03 PM
Content Hashsha256:06c44f6ff0baec28...
Git SHA3910746e4699
──Files
Files (1 file, 2.8 KB)
SKILL.md2.8 KBactive
SKILL.md · 71 lines · 2.8 KB

version: "1.0.0" name: rexui-basic-widgets description: "Use this skill when building basic RexUI widgets such as labels, buttons, gridButtons, fixWidthButtons, tabs, sliders, checkboxes, toggleSwitch, numberBar, knob, badgeLabel, titleLabel, simpleLabel, or settings panels. Triggers on: RexUI label, RexUI button, RexUI buttons, RexUI tabs, RexUI slider, RexUI checkbox, RexUI toggle, RexUI settings panel, RexUI knob, RexUI numberBar."


RexUI Basic Widgets

Use this skill for common RexUI controls used in HUDs, settings panels, menus, and compact tool surfaces.

Use This First

Choose the widget family:

NeedUse
Background + icon + text + actionlabel
Button listbuttons
Button gridgridButtons
Wrapping buttonsfixWidthButtons
Tab controlstabs
Linear numeric inputslider
Circular numeric inputknob
Icon + slider + value textnumberBar
Binary optioncheckbox or toggleSwitch

For layout-only work, use rexui-layout-sizers first. For popups or modal flows, use rexui-dialogs-and-popups.

Required Setup

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

References

Read these only when needed:

  • references/widget-catalog.md: what each widget is for and where its public API lives.
  • references/basic-widget-recipes.md: reduced recipes for labels, buttons, tabs, sliders, and choice controls.
  • references/events.md: common button/value events and state handling.

Core Rules

  • Most widgets are RexUI sizers internally; call .layout() after creation.
  • Build button visuals with label unless the user needs a custom game object.
  • Use buttonsType: 'radio' for single selection and buttonsType: 'checkboxes' for multi-selection.
  • Use setValueCallback to reflect selected state in button visuals.
  • Use valuechangeCallback or valuechange events for slider, knob, and numberBar.
  • Use package imports only in full setup examples; local templates/ui/... paths are source-map paths.

Source File Map

  • templates/ui/label/Label.d.ts
  • templates/ui/buttons/Buttons.d.ts
  • templates/ui/gridbuttons/GridButtons.d.ts
  • templates/ui/fixwidthbuttons/FixWidthButtons.d.ts
  • templates/ui/tabs/Tabs.d.ts
  • templates/ui/slider/Slider.d.ts
  • templates/ui/numberbar/NumberBar.d.ts
  • templates/ui/knob/Knob.d.ts
  • templates/ui/checkbox/Checkbox.d.ts
  • templates/ui/toggleswitch/ToggleSwitch.d.ts
  • templates/ui/utils/buttongroup/Buttons.d.ts

Related Skills

  • rexui-setup-and-factory: plugin setup and factory discovery.
  • rexui-components-catalog: choose the right component family.
  • rexui-layout-sizers: layout composition.
  • rexui-dialogs-and-popups: modal and popup workflows.
  • rexui-shapes-and-states: state-aware skins and visual primitives.
All versions