gum-forms-default-visuals
Skill655 starsChanged 2 months agoMITView on GitHub
Forms DefaultVisuals — code-only visual classes backing Forms controls. Triggers: ButtonVisual, any *Visual class in DefaultVisuals/, Styling, DefaultFormsTemplates registration, custom code-only Forms visuals.
In this repository68 other files it gives its agents.
- CLAUDE.mdCLAUDE.md
- debuggingSkill
- frb-build-verificationSkill
- frb-pixel-harnessSkill
- gum-architecture-layersSkill
- gum-bundleSkill
- gum-cliSkill
- gum-cross-platform-unificationSkill
- gum-docs-writingSkill
- gum-file-pathsSkill
- gum-forms-behaviorsSkill
- gum-forms-controlsSkill
- gum-forms-itemscontrolSkill
- gum-forms-theme-importSkill
- gum-iconsSkill
- gum-issue-creationSkill
- gum-kernsmith-integrationsSkill
- gum-layout-engineSkill
- gum-layoutSkill
- gum-localizationSkill
- gum-monogame-renderingSkill
- gum-monthly-releaseSkill
- gum-project-versioningSkill
- gum-property-assignmentSkill
- gum-raylib-renderingSkill
- gum-releaseSkill
- gum-runtime-animation-chainsSkill
- gum-runtime-bindingSkill
- gum-runtime-fontsSkill
- gum-runtime-hot-reloadSkill
- gum-runtime-syntax-versionSkill
- gum-runtime-systemmanagers-initSkill
- gum-runtime-topologySkill
- gum-runtime-variable-referencesSkill
- gum-samplesSkill
- gum-serviceSkill
- gum-source-linked-projectSkill
- gum-themingSkill
- gum-tool-animationsSkill
- gum-tool-codegenSkill
- gum-tool-copy-pasteSkill
- gum-tool-delete-logicSkill
- gum-tool-dialogsSkill
- gum-tool-errorsSkill
- gum-tool-file-watchSkill
- gum-tool-font-generationSkill
- gum-tool-import-from-gumxSkill
- gum-tool-outputSkill
- gum-tool-pluginsSkill
- gum-tool-save-classesSkill
- gum-tool-screenshotsSkill
- gum-tool-selectionSkill
- gum-tool-tree-viewSkill
- gum-tool-undoSkill
- gum-tool-variable-gridSkill
- gum-tool-variable-referencesSkill
- gum-tool-viewmodelsSkill
- gum-unit-testsSkill
- gum-variable-deep-diveSkill
- gum-visual-eventsSkill
- The first 60 shown.
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 0 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 10
Default visuals are InteractiveGue subclasses that procedurally build a complete visual tree in their constructor — no Gum project file …
- Very specific: line 16
All default visuals live under DefaultVisuals/V3/*Visual and use DefaultVisualsVersion.V3/.Newest — the only generation.
- Very specific: line 22
Every *Visual constructor does four things in order:
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Forms Default Visuals
What They Are
Default visuals are InteractiveGue subclasses that procedurally build a complete visual tree in their constructor — no Gum project file needed. Each one backs a specific Forms control (e.g., ButtonVisual backs Button). They live in MonoGameGum/Forms/DefaultVisuals/.
These are one implementation, not the structure. A control can be backed by any visual — a tool-authored component or a custom InteractiveGue subclass with a completely different tree — so structural features (a Window's Fill InnerPanelInstance, or sizing it to children via WindowVisual.MakeSizedToChildren()) live in the visual, never in the control. See the Visual/FrameworkElement split in gum-forms-controls.
Generation
All default visuals live under DefaultVisuals/V3/*Visual and use DefaultVisualsVersion.V3/.Newest — the only generation; the enum has a single member.
The Forms sprite-sheet icons are one of three icon pipelines in Gum (this one for the runtime;
GumIcon/PathGeometryfor tool WPF chrome; PNGImageListfor the tool tree view). For the umbrella overview and routing, see gum-icons.
Construction Pattern
Every *Visual constructor does four things in order:
- Build child runtimes —
NineSliceRuntimefor background,TextRuntimefor label, etc. Children are added viaChildren.Add(). - Create a
StateSaveCategory— Populated withStateSaveobjects for each interaction state (Enabled, Disabled, Highlighted, Pushed, Focused, etc.). States are applied by the Forms control viaSetProperty. - Pull styling from
Styling.ActiveStyle— Colors, texture coordinates, font config. - Attach the Forms control —
FormsControlAsObject = new Button(this)(or whichever control type). This triggersReactToVisualChangedon the Forms side.
Initialization — Two Paths
GumService.Initialize() always calls FormsUtilities.InitializeDefaults() first, which populates FrameworkElement.DefaultFormsTemplates with code-only default visuals.
If a .gumx project file is also passed to Initialize(), it then calls FormsUtilities.RegisterFromFileFormRuntimeDefaults(). That method does not replace DefaultFormsTemplates with project visuals: it only maps component names to DefaultFromFile*Runtime types through RegisterGueInstantiationType, so a component placed in a screen builds a Forms control. The only DefaultFormsTemplates it sets are the Tooltip and the MenuItem submenu popup (FormsUtilities.cs, RegisterFromFileTooltipTemplate and RegisterFromFilePopupTemplates). new Button() in a runtime-loaded project still gets the V3 visual. Generated code is what replaces a default (see gum-tool-codegen, "Default Forms template registration").
Code-only projects — call Initialize(DefaultVisualsVersion) with no project file. Controls get their visuals from the *Visual classes.
Project-based — call Initialize(gumProjectFile). The code-only defaults are registered first, then RegisterFromFileFormRuntimeDefaults() wires the project's components by name.
Styling.cs
Centralized style constants consumed by default visuals:
Colors— Primary, Danger, Warning, Success palettesNineSlice— Texture coordinate presets (Solid, Bordered, Outlined, etc.)Icons— Coordinates for 70+ icon sprites on the shared sprite sheetText— Font configuration (Normal, Strong, Emphasis)- Loads embedded
UISpriteSheet.pngby default viaUseDefaults()
Styling.ActiveStyle is read at construction time only — set it before creating controls; existing controls don't retroactively restyle.
Every *Visual seeds BackgroundColor/ForegroundColor from Styling.ActiveStyle.Colors.*, but those setters don't paint — they call FormsControl?.UpdateState(), which re-runs the active state's StateSave.Apply lambda, which derives the real color via ColorExtensions.Adjust/.ToGrayscale() off the two base colors. Never set visual.Background.Color directly — the next state transition overwrites it. To override one state's look, clear and reassign its Apply lambda, then call UpdateState().
Named Children Convention
Forms controls locate children by name (e.g., "TextInstance", "FocusIndicator", "InnerPanel"). If a visual omits an expected named child, the Forms control silently skips it (or throws under FULL_DIAGNOSTICS). When building custom visuals, match the names the Forms control looks up in its ReactToVisualChanged.
Every Visual of a Control Stays in Sync
A V3 visual is one of several visuals for the same control. The others are each packaged theme's subclass (Themes/Gum.Themes.*.MonoGame/<Control>Visual.cs) and each in-tool Forms component (Tools/Gum.ProjectServices/Templates/FormsTemplate/Components/Controls/<Control>.gucx and Templates/FormsThemes/<Theme>/.../<Control>.gucx). A change that adds a state, a named child or a visible behavior to a V3 visual is carried into all of them in the same effort, so a code-only theme and its in-tool version always look and behave the same. If a change can't carry it, it files one issue that covers the rest. See gum-theming and gum-forms-theme-import.
Key Files
| Path | Purpose |
MonoGameGum/Forms/DefaultVisuals/V3/*Visual.cs | Default visual classes |
MonoGameGum/Forms/DefaultVisuals/V3/Styling.cs | Centralized colors, textures, fonts |
MonoGameGum/Forms/FormsUtilities.cs | InitializeDefaults() — registers visuals in DefaultFormsTemplates |
MonoGameGum/Forms/Controls/FrameworkElement.cs | DefaultFormsTemplates dictionary and Forms-first construction |
Cross-references
- Restyling these visuals as a distributable, palette-driven package: gum-theming.
ColorExtensions.Adjust/.ToGrayscale()live alongsideStylingin the same file.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

