Maintainer of this skill?
by LumioGames
Game UI framework for AI agents, made by LumioGames. Build screens, logic and tests in the browser with no game engine, then export to Unity. 给 AI Agent 用的游戏 UI 框架，不依赖游戏引擎。
# Add to your Claude Code skills
git clone https://github.com/LumioGames/LGUIGuides for using ai agents skills like LGUI.
See how LGUI compares with popular alternatives.
LGUI is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by LumioGames. Game UI framework for AI agents, made by LumioGames. Build screens, logic and tests in the browser with no game engine, then export to Unity. 给 AI Agent 用的游戏 UI 框架，不依赖游戏引擎。. It has 55 GitHub stars.
LGUI's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/LumioGames/LGUI" and add it to your Claude Code skills directory (see the Installation section above).
LGUI is primarily written in JavaScript. It is open-source under LumioGames on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh LGUI against similar tools.
No comments yet. Be the first to share your thoughts!
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
lumio.games · Live demo · English · 简体中文
LGUI is a game UI framework for AI agents, made by LumioGames. The source is public.
Building game UI usually starts with installing an engine, creating a project, and assembling screens in its editor. LGUI moves that work into the browser. Screens live in a ui/ folder in FairyGUI format, game code is TypeScript written in MVC style, previews open in the browser, and tests run in Node. Building screens, writing logic and checking screenshots all happen without opening a game engine, so an agent can do the work and check it too.
When you ship, lgui unity export exports the same screens and code to Unity, and the game code stays as it is. Game code only calls the lgui API and never touches the engine. A backend adapter handles the engine differences, and other engines can be added the same way.
| No engine needed | Not tied to an engine | Agents check their own work |
|---|---|---|
| You need Node 24 and Chrome or Edge. TypeScript, bundling, screenshots and image slicing all come with the plugin. | Code only talks to the lgui API. There are web and Unity backends today; a new engine needs one more backend, and game code stays the same. |
lgui check checks the rules and reports file, line, error code and a fix. Tests and screenshots are commands, so an agent can run them and read the results. |
The web build of the inventory example is on GitHub Pages: lumiogames.github.io/LGUI. Open it on a phone and turn the screen to watch the layout switch between landscape and portrait.
With Codex 6.1-sol and LGUI, we went from one prototype image to a working game screen, exported it to Unity and tested the build, in 30 minutes.
This is the inventory example in this repository; both screenshots were taken in the browser by lgui verify. The same ui/ and code put the panels side by side in landscape and stack them in portrait. The example has a camp, a bag, a shop and rewards, and uses every feature of the framework.
The easy way: send this repository's URL to your agent (Claude Code or Codex) and say "install LGUI following the README".
The section below is written for the agent.
For AI agents: install and first use
Go in order. If any step fails, stop and show the user the exact error; do not skip it.
- Run
node -v; 24 or later is required. If it is missing, ask the user to install it; do not install it for them.- Install the plugin for your client:
- Claude Code:
claude plugin marketplace add LumioGames/LGUI, thenclaude plugin install lgui@lumio-lgui- Codex:
codex plugin marketplace add LumioGames/LGUI, thencodex plugin add lgui@lumio-lgui- Other clients: run
git clone --depth 1 https://github.com/LumioGames/LGUIand use itsplugin/folder as the plugin directory. Skills are inplugin/skills/.- The command-line tool does not depend on skills and works right away. Continue in the current session:
- Find the plugin directory: Claude Code uses
~/.claude/plugins/cache/lumio-lgui/lgui/<version>/, Codex uses~/.codex/plugins/cache/lumio-lgui/lgui/<version>/, other clients use the clonedplugin/. Below,lguimeansnode <plugin directory>/tools/lgui.mjs.- Run
lgui doctorto check the environment, including whether Chrome or Edge is installed.- Ask the user which folder the project should live in, then run
lgui init.- Run
lgui devto open the preview and tell the user the URL.- Tell the user that LGUI skills take effect in a new session. In the new session they can simply say "use LGUI to build a ... screen".
- From then on, build screens and features following the UI and MVC development specs in
plugin/references/.
Once it is installed, open a new session and try "use LGUI to build a shop screen for both landscape and portrait".
| Feature | What it does |
|---|---|
| One source | Screens live only in ui/ (FairyGUI format). The packages for the web and Unity are generated by commands, so they never drift apart |
| Orientation | Separate landscape and @portrait layouts, swapped automatically when the screen turns; the View instance is kept. Game code has no orientation checks |
| Layout patterns | lgui new view --pattern offers split, tabs, grid and dialog, and creates the landscape and portrait versions in one go |
| Safe area | The safe area of a full-screen view stays clear of the notch; popups sit in the middle of the safe area |
| Controls | Button, text, image, loader, list, tree, label, input, slider, combo box, movie clip, art text |
| Motion | Transitions made in ui/ can be played from code and awaited; they pause while the view is covered and stop when it closes |
| Editor | lgui editor opens a visual editor that saves back to ui/. While it is open, an agent can change control properties and the editor updates right away |
| AI art | Have the AI draw one big grid image; lgui art split / lgui art cut cuts it into pieces (finding each object by transparency, one scale per page, halo removal, clean 9-slices), so the whole set keeps one style |
| Localization | Text tables, lgui.t, plurals and formatting, switching language at runtime, per-language images with text, pseudo-translation checks. lgui i18n extract pulls the text to translate out of ui/ |
| Feature | What it does |
|---|---|
| MVC | The Model holds what is shown, the View binds data to controls with a binding table, the Controller handles actions, the Service talks to the server |
| UI manager | Five layers: hud, page, popup, modal, toast. The framework handles open, close, back, and covering and uncovering views; a closed popup hands its result back to the view that opened it |
| Input | Tap, double tap, long press, drag, swipe, pinch, wheel, ho |
