How do I install the Rexui Basic Widgets skill?

Run npx skillmds@latest add rexrainbow/rexui-basic-widgets 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 Basic Widgets 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 Basic Widgets?

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 Basic Widgets free to use?

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

Who published Rexui Basic Widgets?

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

Rexui Basic Widgets by rexrainbow — Agent Skill

Name: Rexui Basic Widgets
Author: rexrainbow

Rexui Basic Widgets

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.

rexrainbow 50f4e71 4 files · 14.5 KB Updated Sep 17, 2026

File contents

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:

Need	Use
Background + icon + text + action	`label`
Button list	`buttons`
Button grid	`gridButtons`
Wrapping buttons	`fixWidthButtons`
Tab controls	`tabs`
Linear numeric input	`slider`
Circular numeric input	`knob`
Icon + slider + value text	`numberBar`
Binary option	`checkbox` 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.

---name: rexui-basic-widgetsdescription: 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 WidgetsUse this skill for common RexUI controls used in HUDs, settings panels, menus, and compact tool surfaces.## Use This FirstChoose the widget family:| Need | Use ||---|---|| Background + icon + text + action | `label` || Button list | `buttons` || Button grid | `gridButtons` || Wrapping buttons | `fixWidthButtons` || Tab controls | `tabs` || Linear numeric input | `slider` || Circular numeric input | `knob` || Icon + slider + value text | `numberBar` || Binary option | `checkbox` or `toggleSwitch` |For layout-only work, use `rexui-layout-sizers` first. For popups or modal flows, use `rexui-dialogs-and-popups`.## Required SetupThis skill assumes RexUI is available as `this.rexUI`. If not, use `rexui-setup-and-factory`.## ReferencesRead 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.

Frequently asked questions