Agent skill

Gum Integration

by vchelaru in vchelaru/FlatRedBall

How FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper.

MITAuto-check passedFrontend & Design

Install Gum Integration

skills CLI
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vchelaru/FlatRedBall gum-integration --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vchelaru/FlatRedBall.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/gum-integration .claude/skills/gum-integration && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
gum-integration
GitHub stars
578
Token cost
~2.5k tokens
SKILL.md length
1,053 words
Files
1
Skills in repo
32
Repo updated
First seen
Licence
MIT

At a glance

How FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper.

  • Tasks that involve UI design
  • SKILL.md covers Where things live, The .gumx project, Runtime bridging and Per-Screen Gum screen…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Hooks and plugins

What it does

Gum Integration is an agent skill from vchelaru/FlatRedBall. How FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper. Triggers: GumPlugin, GraphicalUiElement, GUE, .gumx, .gusx, Gum.Wireframe, PositionedObjectGueWrapper, RenderingLibrary.

Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering UI design and Hooks and plugins. The repository describes itself as: Cross-platform 2D game engine focused on ultimate productivity built in .NET. The licence is MIT.

When your agent uses it

  • Tasks that involve UI design
  • Tasks that involve Hooks and plugins

Example prompts

  • “/gum-integration”

What it can do on your machine

Read from SKILL.md and the folder at commit fa654ab. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Gum Integration loads about 2.5k tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 1,053 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~63
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vchelaru/FlatRedBall at commit fa654ab, republished under its MIT licence (© vchelaru). 1,053 words, ~2,474 tokens.

Download SKILL.mdSave it as .claude/skills/gum-integration/SKILL.md (or your agent's skills folder).
name
gum-integration
description
How FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper. Triggers: GumPlugin, GraphicalUiElement, GUE, .gumx, .gusx, Gum.Wireframe, PositionedObjectGueWrapper, RenderingLibrary.

Gum Integration

Gum is a separate sibling repo (..\Gum relative to this repo, e.g. C:\Users\vchel\Documents\GitHub\Gum in this checkout), not a submodule or NuGet package — FlatRedBall references its projects via relative <ProjectReference> paths (e.g. FRBDK\Glue\GumPlugin\GumPlugin\GumPlugin.csproj → ..\..\..\..\..\Gum\GumCommon\GumCommon.csproj). Gum is FRB's UI layout/rendering library (screens, components, states, data binding) — general Gum behavior/API questions belong to that repo, not this skill.

Where things live

PieceLocation
Gum's core runtime element (GraphicalUiElement, Gum.Wireframe namespace)sibling Gum\GumRuntime
Gum's low-level rendering/camera abstractions (RenderingLibrary namespace — Camera, SystemManagers, LayerCameraSettings)sibling Gum\RenderingLibrary
Other Gum sub-libraries (data types, MonoGame/Skia backends)sibling Gum\GumCore, GumCommon, GumDataTypes, MonoGameGum, SkiaGum*
Glue's Gum pluginFRBDK\Glue\GumPlugin\GumPlugin\
FRB-side integration/test shims (not the real Gum source)Engines\SkiaGum, Tests\EngineUnitTests\Gum

Glue's Gum plugin has the same "master template → generated copy" split as the [[glue-live-edit]] skill: Embedded\*.cs files (PositionedObjectGueWrapper.cs, GraphicalUiElement.Binding.cs, GraphicalUiElement.IWindow.cs, SystemManagers.FlatRedBall.cs, ContentManagerWrapper.cs) are hand-edited sources copied verbatim into generated game projects — not generator output, actual C# that ships as-is. CodeGeneration\* is the real generator side: GueDerivingClassCodeGenerator.cs (per-Screen/Component derived class), GumGame1CodeGenerator.cs (Game1 wiring), StandardsCodeGenerator.cs + per-type generators (NineSliceCodeGenerator.cs, TextCodeGenerator.cs...) and StateCodeGenerator*.cs for the property/state pipelines documented in the [[gum-codegen]] skill, FormsClassCodeGenerator.cs/FormsObjectCodeGenerator.cs for Gum Forms controls.

The .gumx project

Gum UI data lives in its own file format alongside .glux/.gluj, referenced by relative path from the Glue project (e.g. a .gluj's "Name": "GumProject/GumProject.gumx"). One .gumx (project index, GumProjectSave XML) plus one file per element under Content\GumProject\: .gusx (Screens/Components), .behx (behaviors), .ganx (animations). GumProjectManager.cs/FileChangeManager.cs (GumPlugin\Managers) load it and watch for external edits (e.g. from the standalone Gum tool).

Runtime bridging

PositionedObjectGueWrapper : PositionedObject (GumPlugin\Embedded\PositionedObjectGueWrapper.cs) wraps a GraphicalUiElement inside FRB's PositionedObject hierarchy, so Gum UI can attach to/move with an FRB entity like any other positioned object. Top-level Screens/Components loaded standalone instead get their own generated derived class from GueDerivingClassCodeGenerator.cs, extending GraphicalUiElement directly rather than going through the wrapper.

Per-Screen Gum screen (auto-created)

Adding an FRB Screen in Glue auto-creates a paired Gum screen so anything placed on it shows up automatically when the FRB Screen loads — you don't need to know this exists until you go looking for "where did GameScreenGum come from."

  • Hook: FRB-screen-created event → GumPluginCommands.AddScreenForGlueScreen (GumPlugin\Managers\GumPluginCommands.cs:199-226), also triggerable by hand via right-click (RightClickManager.cs:92).
  • Naming convention: strip the FRB screen's Screens/ prefix and append Gum — Screens/GameScreen → Gum screen GameScreenGum (GetExpectedGumScreenNameFor, GumPluginCommands.cs:187-197).
  • It's created only if missing, then linked onto the FRB Screen as a normal NamedObjectSave/file reference (RightClickManager.AddGumScreenScreenByName) — there's no special runtime loading path. Generated codegen (GueDerivingClassCodeGenerator.cs:890-926) emits the same <name>.AddToManagers(...) call it would for any other Gum object, so the paired screen is added/removed on FRB Screen load/unload exactly like every other object on that Screen.

World-space Gum objects (health bars, icons, in-world dialog)

Placing a Gum object at fixed screen-space UI coordinates is the default. To have it track an FRB entity's world position instead (health bar over an enemy, lock icon over a door), Glue exposes NamedObjectSave.AttachToContainer — a bool property under the object's "Creation" category, only shown when the object's container is an EntitySave and it isn't a list (NamedObjectPropertyGridDisplayer.cs:330-338). A sibling property, AttachToCamera (shown only for Screen-level objects, not Entity), sticks a Gum object to the camera instead of the world.

This is not a plain FRB-attach and not pure coordinate conversion — it's a hybrid, and the mechanism matters if you're debugging drift:

  • When AttachToContainer is true on an Entity, codegen wraps the GUE in PositionedObjectGueWrapper(this, gumObject) (GueDerivingClassCodeGenerator.cs:900-919), added via SpriteManager.AddPositionedObject. The wrapper itself calls AttachTo(frbObject) (Embedded\PositionedObjectGueWrapper.cs:52) so it inherits the entity's world position/rotation through FRB's normal attachment tree — but the actual GraphicalUiElement is reparented under an intermediary invisible GumParent GUE (gumObject.Parent = GumParent, line 69), not attached directly.
  • Every frame (UpdateGumObject, lines 95-170): compute worldPosition = FrbObject.Position + RelativePosition, convert to screen pixels via MathFunctions.AbsoluteToWindow(...) using Camera.Main, then re-derive Gum canvas coordinates as a ratio of that screen position to camera.DestinationRectangle.Width/Height, scaled by GraphicalUiElement.CanvasWidth/CanvasHeight (lines 108-141) — this is the same ratio-based conversion pattern used for edit-mode zoom in [[glue-live-edit]], not a one-shot pixel offset, so it stays correct as the camera pans/zooms.
  • GumParent.Width/Height mirror the FRB object's ScaleX/ScaleY * 2 when it implements IReadOnlyScalable; GumParent.Visible mirrors AbsoluteVisible (lines 154-169).
Show full SKILL.md (388 more words)Show less

Known landmines (straight from code comments, not inferred):

  • In normal gameplay, position tracks the camera zoom but the Gum object's own visual scale does not — deliberate, so a health bar doesn't shrink to unreadable size when the player zooms out. In the FRB Editor's live-edit mode only, entity-attached Gum content does scale with the editor's zoom control, via a dedicated layer — see [[glue-live-edit]]'s Gum zoom section.
  • A layer add/remove operates on the element's contained object, not the GraphicalUiElement reference. AddToManagers/MoveToLayer register Renderables-list membership against mContainedObjectAsIpso (e.g. an InvisibleRenderable for anything deriving ContainerRuntime, like a typical health-bar Component) — never against the GUE reference itself. A raw Layer.Remove(gue)/Layer.Add(gue) therefore silently fails to remove the real registration while adding a second, independent entry, so the same content draws twice. Always move a GUE between layers via gue.MoveToLayer(...), never manual Layer calls on the GUE reference.
  • No multiple-camera/multiple-layer support — explicitly flagged // todo - need to support multiple cameras and layers (line 101). If a project has split-screen or multiple FRB layers with independent cameras, world-space attachment is not guaranteed correct.
  • 3D/perspective cameras are unimplemented — stubbed // todo - need to figure out 3D (line 144); the position math assumes an orthogonal camera.
  • No dedicated "world-space" Gum Layer type. World-space vs screen-space is purely: which FRB Layer the entity/object belongs to, plus whether AttachToContainer is set — not a distinct kind of Gum Layer. Gum Layers are generated 1:1 per FRB Layer (GumLayerCodeGenerator.cs/GumLayerAssociationCodeGenerator.cs).
  • Collision follows the wrapper, not the raw GUE. With AttachToContainer set, collision is wired through GumCollidableExtensions.AddCollision(this, wrapperForAttachment) (GumCollidableCodeGenerator.cs:39) — custom collision code must go through PositionedObjectGueWrapper, not the GraphicalUiElement directly, or shapes won't track the attached position.

Vocabulary

  • GraphicalUiElement (GUE) — Gum's core runtime UI node; owns position/size/children/rendering.
  • Screen (.gusx) — top-level Gum layout, analogous to an FRB Screen.
  • Component (.gusx) — reusable, instantiable UI element (like a prefab/control).
  • Standard element — Gum's built-in primitive types (Text, Sprite/NineSlice, Container, etc.), generated by StandardsCodeGenerator.cs.
  • Instance — a placed occurrence of a Component/Standard element inside a Screen/Component.
  • State / Variable — named property sets swappable at runtime; see [[gum-codegen]] for how Glue generates their skip/gating logic.
  • [[gum-codegen]] — the version-gating skip-list pipelines for standard-element property/state generation (narrower, Glue-only).
  • [[glue-live-edit]] — covers Gum's dual-zoom sync (Camera.Main vs Renderer.Camera.Zoom/LayerCameraSettings.Zoom) and other edit-mode-specific Gum behavior.
  • [[gum-shared-source]] — how FRB's .csprojs pull in Gum/MonoGameGum source files individually rather than sharing a project, and where the two diverge (e.g. Cursor).

© vchelaru, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/gum-integration of vchelaru/FlatRedBall.

Open the folder on GitHubat commit fa654ab

Compare with similar skills

Gum Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Gum Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Gum Integration this skillvchelaru/FlatRedBall578—~2.5kAutomated safety check: PassMIT
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
LobeHub Interactive Prototypelobehub/lobehub83k—~1.6kAutomated safety check: PassCustom licence
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro MaxZxBing0066/pixel-converter18113 repos~2.6kAutomated safety check: NotesBSD-2-Clause
Design Dnazanwei/design-dna1.9k1 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed
  • Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    ZxBing0066/pixel-converter

    UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.

    181 GitHub starsUsed in 13 repos~2.6k tokens
    Frontend & DesignAuto-check: notes
  • Design Dna

    zanwei/design-dna

    Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects…

    1.9k GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed
  • Figma Design to Code

    warpdotdev/warp

    Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.

    65k GitHub starsUsed in 4 repos~2.9k tokens
    Frontend & DesignAuto-check passed

More from vchelaru/FlatRedBall

All 32 skills in this repo
  • Glue Live Game Testing

    vchelaru/FlatRedBall

    Testing GlueControl's embedded runtime (CommandReceiver, GlueControlManager) against a real running game process.

    578 GitHub stars~1.5k tokensUpdated today
    Auto-check passed
  • Glue Unit Test Bootstrap

    vchelaru/FlatRedBall

    Bootstrapping GlueUnitTests that touch GlueState.Self/GlueCommands.Self/ProjectManager.

    578 GitHub stars~4.3k tokensUpdated today
    Auto-check passed
  • Gluj Versions

    vchelaru/FlatRedBall

    A skill your agent uses when adding, modifying, or reasoning about Gluj/Glux file format versions, the GluxVersions enum, FileVersion checks, or anything that gates behavior on the version of a…

    578 GitHub stars~1.4k tokensUpdated today
    Auto-check passed
  • Gum Codegen

    vchelaru/FlatRedBall

    A skill your agent uses when working on Glue's Gum code generation — adding/removing/version-gating generated properties on Gum standard runtime types (NineSlice, Text, Container, Sprite, etc.), or…

    578 GitHub stars~3.4k tokensUpdated today
    Auto-check passed
  • Release

    vchelaru/FlatRedBall

    FRB1 (engine + Glue) release runbook — gh CLI sequence for Engine.yml/glue.yml, version scheme, release notes.

    578 GitHub stars~3.5k tokensUpdated today
    Auto-check passed
  • Release Notes

    vchelaru/FlatRedBall

    Drafts FRB1 release notes from commits/PRs since the last release.

    578 GitHub stars~1.9k tokensUpdated today
    Auto-check passed

Questions about Gum Integration

What does Gum Integration do?

How FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper. Gum Integration is an agent skill from vchelaru/FlatRedBall.gumx projects, runtime wrapper.

When should I use Gum Integration?

Gum Integration fits situations like: tasks that involve UI design; tasks that involve Hooks and plugins.

How do I install Gum Integration in Claude Code?

Run `npx skills add vchelaru/FlatRedBall --skill gum-integration -a claude-code`. Or copy the skill folder (.claude/skills/gum-integration in vchelaru/FlatRedBall) into .claude/skills/gum-integration in your project. Claude Code loads it when a task matches its description.

How do I install Gum Integration in Codex?

Run `npx skills add vchelaru/FlatRedBall --skill gum-integration -a codex`. Or copy the skill folder (.claude/skills/gum-integration in vchelaru/FlatRedBall) into .agents/skills/gum-integration in your project. Codex loads it when a task matches its description.

Can I use Gum Integration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vchelaru/FlatRedBall --skill gum-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gum-integration, .gemini/skills/gum-integration, .github/skills/gum-integration and .opencode/skills/gum-integration in your project.

What does Gum Integration need to run?

SKILL.md names no scripts, command-line tools or credentials: Gum Integration is instructions for the agent only.

Does Gum Integration access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Gum Integration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Gum Integration use?

Gum Integration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Gum Integration use?

About 2.5k tokens (SKILL.md is roughly 9.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Gum Integration?

Skills that share tags, products or a category with Gum Integration: UI Styling (Ohh-889/skyroc, 795 stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars) and UI UX Pro Max (ZxBing0066/pixel-converter, 181 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Gum Integration?

vchelaru (a GitHub user) maintains it in vchelaru/FlatRedBall, which has 578 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 10, 2026.

Source: vchelaru/FlatRedBall on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.