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.
How FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper.
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vchelaru/FlatRedBall gum-integration --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "gum-integration" agent skill from https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integration into .claude/skills/gum-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gum-integration", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integrationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vchelaru/FlatRedBall gum-integration --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vchelaru/FlatRedBall.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/gum-integration .agents/skills/gum-integration && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gum-integration" agent skill from https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integration into .agents/skills/gum-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gum-integration", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vchelaru/FlatRedBall gum-integration --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vchelaru/FlatRedBall.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/gum-integration .cursor/skills/gum-integration && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "gum-integration" agent skill from https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integration into .cursor/skills/gum-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gum-integration", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/vchelaru/FlatRedBall.git --path .claude/skills/gum-integration--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vchelaru/FlatRedBall gum-integration --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vchelaru/FlatRedBall.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/gum-integration .gemini/skills/gum-integration && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "gum-integration" agent skill from https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integration into .gemini/skills/gum-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gum-integration", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install vchelaru/FlatRedBall gum-integrationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vchelaru/FlatRedBall.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/gum-integration .github/skills/gum-integration && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "gum-integration" agent skill from https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integration into .github/skills/gum-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gum-integration", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vchelaru/FlatRedBall --skill gum-integration -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vchelaru/FlatRedBall gum-integration --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vchelaru/FlatRedBall.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/gum-integration .opencode/skills/gum-integration && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "gum-integration" agent skill from https://github.com/vchelaru/FlatRedBall/tree/NetStandard/.claude/skills/gum-integration into .opencode/skills/gum-integration/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gum-integration", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
gum-integrationHow FlatRedBall integrates the Gum UI layout/rendering library — plugin structure, .gumx projects, runtime wrapper.
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.
Read from SKILL.md and the folder at commit fa654ab. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from vchelaru/FlatRedBall at commit fa654ab, republished under its MIT licence (© vchelaru). 1,053 words, ~2,474 tokens.
.claude/skills/gum-integration/SKILL.md (or your agent's skills folder).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.
| Piece | Location |
|---|---|
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 plugin | FRBDK\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.
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).
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.
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."
GumPluginCommands.AddScreenForGlueScreen (GumPlugin\Managers\GumPluginCommands.cs:199-226), also triggerable by hand via right-click (RightClickManager.cs:92).Screens/ prefix and append Gum — Screens/GameScreen → Gum screen GameScreenGum (GetExpectedGumScreenNameFor, GumPluginCommands.cs:187-197).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.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:
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.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).Known landmines (straight from code comments, not inferred):
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.// 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.// todo - need to figure out 3D (line 144); the position math assumes an orthogonal camera.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).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..gusx) — top-level Gum layout, analogous to an FRB Screen..gusx) — reusable, instantiable UI element (like a prefab/control).StandardsCodeGenerator.cs.Camera.Main vs Renderer.Camera.Zoom/LayerCameraSettings.Zoom) and other edit-mode-specific Gum behavior..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
Just SKILL.md in .claude/skills/gum-integration of vchelaru/FlatRedBall.
Open the folder on GitHubat commit fa654ab
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Gum Integration this skillvchelaru/FlatRedBall | 578 | — | ~2.5k | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Make Interfaces Feel Bettersamuelclay/NewsBlur | 7.6k | 10 repos | ~1.5k | Automated safety check: Pass | MIT | |
| UI UX Pro MaxZxBing0066/pixel-converter | 181 | 13 repos | ~2.6k | Automated safety check: Notes | BSD-2-Clause | |
| Design Dnazanwei/design-dna | 1.9k | 1 repos | ~2.1k | Automated safety check: Pass | MIT |
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.
lobehub/lobehub
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.
samuelclay/NewsBlur
Design engineering principles for making interfaces feel polished.
ZxBing0066/pixel-converter
UI/UX design intelligence with searchable database. An agent skill from ZxBing0066/pixel-converter.
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…
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.
vchelaru/FlatRedBall
Testing GlueControl's embedded runtime (CommandReceiver, GlueControlManager) against a real running game process.
vchelaru/FlatRedBall
Bootstrapping GlueUnitTests that touch GlueState.Self/GlueCommands.Self/ProjectManager.
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…
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…
vchelaru/FlatRedBall
FRB1 (engine + Glue) release runbook — gh CLI sequence for Engine.yml/glue.yml, version scheme, release notes.
vchelaru/FlatRedBall
Drafts FRB1 release notes from commits/PRs since the last release.
Categories
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.
Gum Integration fits situations like: tasks that involve UI design; tasks that involve Hooks and plugins.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Gum Integration is instructions for the agent only.
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.
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.
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.
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.
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.
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.