lemur-ui
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.zipInstalls 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.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
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 texticon: Icon componentfont,fontSize: Text renderingtextVAlignment: VAlignment.Top/Bottom/CentertextHAlignment: HAlignment.Left/Right/Centercolor: Text colorshadowColor,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 valuesingleLine: true (default) or false for multilinepreferredWidth: 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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| lemur-ui (this skill) | 0 | 3mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| svg-precision | 527 | 4mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
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.
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.
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.
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.
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.
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".