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

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
One-click install
npx skills add https://github.com/vchelaru/Gum --skill gum-layout
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
berkcangumusisikberkcangumusisik
11

env-check

Validate environment variables against requirements in .env.example.

Community
Basic
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
msichtermanmsichterman

use-dom

Embed web-only code in native Expo apps using DOM components.

Community
Intermediate
lemulemu

web-component-design

Design portable component APIs across React, Vue, and Svelte.

Community
Advanced