rexui-text-and-input - SKILL.md Agent Skill

name: rexui-text-and-input description: "Use this skill when building RexUI text, rich text, BBCodeText, tagText, dynamicText, textBox, simpleTextBox, textArea, textAreaInput, inputText, canvasInput, hiddenEdit, textEdit, textTyping, textPage, textPlayer, nameInputDialog, fileChooser, fileDropZone, fileSelectorButton, imageInputLabel, colorInput, colorPicker, or colorComponents. Triggers on: RexUI text, RexUI input, BBCodeText, tagText, textBox, textAreaInput, inputText, canvasInput, textTyping, textPlayer, colorPicker, fileChooser."

Use this skill for RexUI text rendering, rich text, dialogue text boxes, editable fields, text typing/page behavior, file selection, and color input.

Choose the component:

Need	Use
Rich text with inline BBCode tags	`BBCodeText`
Rich text with tag parser behavior	`tagText`
Low-level dynamic text layout	`dynamicText`
Dialogue box with paging and typing	`textBox` or `simpleTextBox`
Scrollable read-only text	`textArea`
Scrollable editable multiline text	`textAreaInput`
DOM-backed text input	`inputText`
Canvas-rendered editable input	`canvasInput`
Edit an existing text object	`textEdit` or `hiddenEdit`
Standalone typing behavior	`textTyping`
Standalone page/line splitting behavior	`textPage`
Rich scripted text playback	`textPlayer`
First/last name modal prompt	`nameInputDialog`
Browser file selection	`fileChooser`, `openFileChooser`, `fileSelectorButton`
Drag/drop file target	`fileDropZone`
Image file picker with preview	`imageInputLabel`
Editable color field or picker	`colorInput`, `colorInputLite`, `colorPicker`, `colorComponents`

For modal flow around nameInputDialog, use rexui-dialogs-and-popups. For scroll-only list/panel behavior, use rexui-scroll-lists-and-tables.

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

Enable Phaser DOM support when using inputText, fileChooser, fileSelectorButton, fileDropZone, or other DOM-backed file/input helpers:

const config = {
  dom: { createContainer: true }
};

Read these only when needed:

references/text-catalog.md: component chooser, factory signatures, source files, and gotchas.
references/rich-text-recipes.md: rich text, text box typing, text area scrolling, and text behavior recipes.
references/input-recipes.md: inputText, canvasInput, textAreaInput, textEdit, and form patterns.
references/file-and-color-recipes.md: file selector, image input, color input, color picker, and color events.

Call .layout() after creating or mutating RexUI layout components such as textBox, simpleTextBox, textArea, textAreaInput, nameInputDialog, colorInput, colorPicker, and colorComponents.
Use BBCodeText with a capital factory name: this.rexUI.add.BBCodeText(...).
Use inputText for native DOM input behavior; ensure dom.createContainer: true.
Use canvasInput when the input must render inside the game canvas and integrate with RexUI layout.
canvasInput factory accepts a config object in current source even though Factory.d.ts also shows positional parameters.
Use textAreaInput for editable multiline content with scrolling; use textArea for read-only scrollable text.
Use textBox for dialogue text with start(), typeNextPage(), pageend, and complete.
Store passwords or hidden values in canvasInput.rawText when displaying masked text.
File chooser APIs depend on browser user interaction; trigger them from a click/tap flow.
Use package imports only in full setup examples; local templates/ui/... paths are source-map paths.