A guide to building GUI elements using the Lemur framework.

Install

mkdir -p .claude/skills/lemur-ui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12216" && unzip -o skill.zip -d .claude/skills/lemur-ui && rm skill.zip

Installs to .claude/skills/lemur-ui

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Build user interfaces using Lemur UI framework. Use when creating menus, HUD elements, buttons, labels, or other GUI components.
128 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • Initialize the Lemur UI framework
  • Position and size GUI elements using upper left corner as reference
  • Create base GUI elements like Panel, Container, Label, and Button
  • Implement various layouts such as `SpringGridLayout` and `BorderLayout`
  • Apply styling to UI elements using Element IDs and selectors

How it works

The skill guides the creation of game user interfaces by providing instructions on initializing the Lemur framework, using its class hierarchy for elements, applying layouts, and defining styles.

Inputs & outputs

You give it
Java code defining UI elements, layouts, and styles
You get back
Rendered game user interfaces with interactive components

When to use lemur-ui

  • Create GUI menus
  • Design HUD elements
  • Manage interface layouts

About this skill

Lemur UI Framework

Lemur is the UI framework for building game interfaces. Documentation from official wiki.

Initialization (from Wiki)

// In simpleInitApp() or app initialization
GuiGlobals.initialize(this);

// Load the 'glass' style (requires Groovy dependency)
BaseStyles.loadGlassStyle();

// Set 'glass' as default style
GuiGlobals.getInstance().getStyles().setDefaultStyle("glass");

Positioning and Size (from Wiki)

Important: GUI elements are positioned by their upper left corner and grow down and right. This is a compromise between OpenGL (0,0 at lower left) and traditional UI (0,0 at upper left).

// Put window at upper area - elements grow DOWN from this point
myWindow.setLocalTranslation(300, 300, 0);

Class Hierarchy (from Wiki)

Spatial
  └── Panel (base: background, border, insets, alpha)
        ├── Container (adds layout support)
        └── Label (adds text, icon, font, color)
              └── Button (adds click commands, highlight)

Base GUI Elements

Panel Properties

  • background: Background component (QuadComponent)
  • border: Border component (underneath background)
  • insets: Insets3f - space around element within parent (like CSS margin)
  • alpha: Fade in/out entire hierarchy

Container

// Create with default SpringGridLayout
Container myWindow = new Container();
guiNode.attachChild(myWindow);

// Or with specific layout
Container c = new Container(new BorderLayout());

Label Properties

  • text: Display text
  • icon: Icon component
  • font, fontSize: Text rendering
  • textVAlignment: VAlignment.Top/Bottom/Center
  • textHAlignment: HAlignment.Left/Right/Center
  • color: Text color
  • shadowColor, shadowOffset: Text shadow
Label label = new Label("Hello, World.");
label.setFontSize(16);
label.setColor(ColorRGBA.White);

Button

Extends Label with click support.

Button clickMe = myWindow.addChild(new Button("Click Me"));
clickMe.addClickCommands(new Command<Button>() {
    @Override
    public void execute(Button source) {
        System.out.println("Clicked!");
    }
});

// Or with lambda
clickMe.addClickCommands(source -> System.out.println("Clicked!"));

Button Actions: ButtonAction.Down, Up, Click, HighlightOn, HighlightOff

TextField Properties

  • text: Entered text value
  • singleLine: true (default) or false for multiline
  • preferredWidth: Width hint for layouts
TextField field = new TextField("default");
String value = field.getText();

Layouts (from Wiki)

SpringGridLayout (default)

Row-major by default. Children added to grid cells.

Container c = new Container();  // SpringGridLayout by default

// Explicit grid positions (row, column)
c.addChild(new Label("Foo"), 0, 0);
c.addChild(new Label("Bar"), 1, 0);

// Shortcut - auto-increments row
c.addChild(new Label("Foo"));
c.addChild(new Label("Bar"));

// Two-column layout - specify column only
c.addChild(new Label("Name:"));
c.addChild(new TextField("value"), 1);  // column 1
c.addChild(new Label("Age:"));
c.addChild(new TextField("25"), 1);     // column 1

BorderLayout

Container c = new Container(new BorderLayout());
c.addChild(new Label("Top"), Position.North);
c.addChild(new Label("Bottom"), Position.South);
c.addChild(new Label("Center"), Position.Center);
c.addChild(new Label("Left"), Position.West);
c.addChild(new Label("Right"), Position.East);

Composite Elements (from Wiki)

Slider

Slider slider = new Slider();  // x-axis default
slider.setDelta(1);  // increment amount
double value = slider.getModel().getValue();

ProgressBar

ProgressBar progress = new ProgressBar();
progress.setProgressPercent(0.5);  // 50%
progress.setMessage("Loading...");

ListBox (proto)

ListBox<String> listBox = new ListBox<>();
listBox.getModel().add("Item 1");
listBox.getModel().add("Item 2");

OptionPanelState (proto)

// Add to state manager once
stateManager.attach(new OptionPanelState());

// Show modal dialogs
getState(OptionPanelState.class).show("Title", "Message");
getState(OptionPanelState.class).showError("Error", "Something went wrong");

Styling (from Wiki)

Element IDs

Define style hierarchy: container.contained.contained

// Create with ElementId
Container window = new Container(new ElementId("mywindow"));
Button btn = new Button("Click", new ElementId("mywindow.button"));

Selectors (Groovy style language)

// Style all elements of 'glass' style
selector('glass') {
    fontSize = 20
}

// Style specific element ID
selector('button', 'glass') {
    color = color(0.5, 0.75, 0.75, 0.85)
    background = new QuadBackgroundComponent(color(0, 1, 0, 1))
}

// Containment selector - only buttons inside sliders
selector('slider', 'button', 'glass') {
    fontSize = 10
}

Style in Code

Styles styles = GuiGlobals.getInstance().getStyles();
Attributes attrs = styles.getSelector("button", "glass");
attrs.set("color", new ColorRGBA(0.5f, 0.75f, 0.75f, 0.85f));
attrs.set("fontSize", 14);

Project-Specific Patterns

ActionButton with CallMethodAction

import com.simsilica.lemur.ActionButton;
import com.simsilica.lemur.CallMethodAction;

ActionButton btn = new ActionButton(
    new CallMethodAction("Button Text", this, "methodName")
);
btn.setInsets(new Insets3f(5, 10, 5, 10));
window.addChild(btn);

// Method called when clicked
protected void methodName() {
    log.info("Button clicked");
}

Menu State Pattern

public class MainMenuState extends BaseAppState {
    private Container mainWindow;

    @Override
    protected void initialize(Application app) {
        mainWindow = new Container();
        // Build UI...
    }

    @Override
    protected void onEnable() {
        ((SimpleApplication) getApplication()).getGuiNode().attachChild(mainWindow);
        GuiGlobals.getInstance().requestCursorEnabled(this);
    }

    @Override
    protected void onDisable() {
        mainWindow.removeFromParent();
        GuiGlobals.getInstance().releaseCursorEnabled(this);
    }
}

Project Assets

  • Styles in infinity/assets/Interface/

When not to use it

  • When building non-game related user interfaces
  • When using UI frameworks other than Lemur

Limitations

  • GUI elements are positioned by their upper left corner and grow down and right.
  • Styling requires Groovy dependency for `BaseStyles.loadGlassStyle()`.
  • The `ListBox` and `OptionPanelState` are noted as 'proto' elements.

How it compares

This skill offers a structured approach to building game-specific UIs with Lemur, detailing element properties, layout management, and styling, which is more specialized than general UI development.

Compared to similar skills

lemur-ui side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
lemur-ui (this skill)03moNo flagsIntermediate
ui-ux-pro-max1,9095moReviewIntermediate
svg-precision5274moReviewIntermediate
mobile-android-design1012moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

svg-precision

dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

5271,229

mobile-android-design

wshobson

Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

101335

frontend-slides

sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

95195

scroll-experience

davila7

Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.

101142

penpot-uiux-design

github

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

27145

Search skills

Search the agent skills registry