skills.rest
vchelaru
vchelaruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gum-variable-deep-dive

Apply updated Gum variable values to runtime graphical UI elements.

597|79|Updated Mar 11, 2015
Search Tags:#ui#runtime#forms#refresh#state#variable#gum
One-click install
npx skills add https://github.com/vchelaru/Gum --skill gum-variable-deep-dive
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gum-variable-deep-dive
Source: https://github.com/vchelaru/Gum/tree/main/.claude/skills/gum-variable-deep-dive
Command: npx skills add https://github.com/vchelaru/Gum --skill gum-variable-deep-dive

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers struggle to understand how variable values move from Gum's saved project data to live UI elements, making styling, theming, and runtime updates time‑consuming and error‑prone.

Core Features & Use Cases

  • Three‑layer overview: Save data (ElementSave, StateSave, VariableSave), visual runtime (GraphicalUiElement), and Forms behavior (FrameworkElement subclasses).
  • Shared reference insight: StateSave objects are stored by reference, so changes propagate instantly to the visual layer.
  • Refresh workflow: After modifying variables, run ApplyAllVariableReferences then RefreshStyles to push updates without recreating the UI.
  • Use case: When a theme color variable is edited in code, this skill guides you through refreshing all live controls to reflect the new color.

Quick Start

Use the gum-variable-deep-dive skill to walk through refreshing styles after updating a VariableSave value.

Frequently Asked Questions about gum-variable-deep-dive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refresh Gum UI elements after updating a variable in code?▼

To refresh Gum UI elements after updating a variable, run `ApplyAllVariableReferences` followed by `RefreshStyles`. This workflow pushes the updated VariableSave values to live graphical UI elements without requiring manual re-instantiation.

How does Gum variable flow work from save data to runtime UI?▼

Gum variable flow moves saved project data through three layers: ElementSave and StateSave for data, GraphicalUiElement for visual runtime, and FrameworkElement for Forms behavior. StateSave objects are stored by reference, so changes propagate instantly to the visual layer.

Why are my Gum style changes not showing up on live controls?▼

Gum style changes may not appear because the runtime UI has not been refreshed. After modifying variables, you must execute `ApplyAllVariableReferences` and then `RefreshStyles` to push the updated values to all live controls.

Do I need to recreate Gum UI elements when theming at runtime?▼

You do not need to recreate Gum UI elements for runtime theming. Because StateSave instances are shared by reference, calling `ApplyAllVariableReferences` and `RefreshStyles` propagates the new theme color variables to existing visual controls.

What is the best way to debug variable flow in Gum applications?▼

The best way to debug Gum variable flow is to trace updates across the three layers: ElementSave and StateSave for data, GraphicalUiElement for the visual runtime, and FrameworkElement for Forms behavior. Verify that `ApplyAllVariableReferences` and `RefreshStyles` are called sequentially.

Related Skills

Explore More Software Engineering Skills→
vchelaruvchelaru
597

gum-tool-save-classes

Document Gum save/load data types and their XML serialization relationships.

Community
Advanced
vchelaruvchelaru
597

gum-runtime-binding

Configure Gum runtime data binding for GraphicalUiElement and FrameworkElement controls.

Community
Intermediate
vchelaruvchelaru
597

gum-tool-variable-references

Synchronize variable values across Gum UI elements using Roslyn parsing.

Community
Advanced
MJ-AgentLabMJ-AgentLab

etl-dwd-to-dws

Trigger the QCM ETL 5-phase pipeline from biz_dwd to biz_dws via PostgreSQL.

Official
Advanced