gum-layout

Explain Gum layout units, children modes, and anchoring APIs.

597|79|Updated Mar 11, 2015

Search Tags:#ui-layout #gum #dimension-units #children-layout #anchor-dock #layout-engine

Ready to run

npx skills add https://github.com/vchelaru/Gum --skill gum-layout

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gum-layout
Source: https://github.com/vchelaru/Gum/tree/main/.claude/skills/gum-layout
Command: npx skills add https://github.com/vchelaru/Gum --skill gum-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers struggle to understand and correctly apply Gum's complex layout system, leading to inefficient UI design and buggy interfaces.

Core Features & Use Cases

Dimension & Position Units: Detailed explanations of DimensionUnitType and GeneralUnitType enums for precise sizing and positioning.
Children Layout Modes: Guidance on stacking, auto‑grid, and wrapping behaviors for container elements.
Anchor & Dock APIs: How to quickly position elements using high‑level shortcuts.
Layout Engine Flow: Insight into UpdateLayout, suspension, dirty tracking, and performance considerations.
Use Cases: Ideal for UI developers needing to build responsive menus, panels, and game HUDs within Gum-powered projects.

Quick Start

Ask the gum-layout skill to explain how to anchor a button to the bottom‑right corner of its parent.

Frequently Asked Questions about gum-layout

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

FAQPage Schema

How do I anchor a UI element to the bottom-right corner in Gum?▼

Gum's children layout modes provide stacking, auto-grid, and wrapping behaviors for container elements. These configurations manage how child elements arrange themselves within a parent, enabling responsive menus and panels.

What are Gum dimension units and how do they control sizing?▼

Gum position units use the `GeneralUnitType` enum to specify exact placement rules for UI components. These units determine how elements are positioned within the layout, ensuring precise alignment across different screen sizes.

How does the Gum layout engine handle updates and dirty tracking?▼

The Gum layout engine manages updates through `UpdateLayout`, utilizing suspension mechanisms and dirty tracking to optimize performance. This ensures efficient dependency handling and prevents unnecessary recalculations during UI changes.

Can I use Gum to build responsive game HUDs and auto-grid panels?▼

Yes, Gum is ideal for building responsive game HUDs, menus, and panels. Its children layout modes support auto-grid and wrapping behaviors, allowing developers to create dynamic interfaces that adapt to container size changes.