Agent skill

Add UI Feature

by lge-ros2 in lge-ros2/cloisim

Add a new UI panel, control, or overlay to CLOiSim's HUD. An agent skill from lge-ros2/cloisim.

MITAuto-check passed

Install Add UI Feature

skills CLI
$ npx skills add lge-ros2/cloisim --skill add-ui-feature -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install lge-ros2/cloisim add-ui-feature --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/lge-ros2/cloisim.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.github/skills/add-ui-feature .claude/skills/add-ui-feature && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
add-ui-feature
GitHub stars
176
Token cost
~1.4k tokens
SKILL.md length
286 words
Files
1
Skills in repo
18
Repo updated
First seen
Licence
MIT

At a glance

Add a new UI panel, control, or overlay to CLOiSim's HUD. An agent skill from lge-ros2/cloisim.

  • Works in 5 steps: Add Element to UXML → Wire in UIController → Implement the Handler → …
  • : adding a new button
  • SKILL.md covers When to Use, UI Architecture, Procedure and Input System, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Add UI Feature is an agent skill from lge-ros2/cloisim. Add a new UI panel, control, or overlay to CLOiSim's HUD. Use when: adding a new button or panel to UIController, creating a new camera mode, adding an info overlay.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Unity 6 based multi-robot simulator for ROS 2, SDFormat/SDF, LiDAR, camera, depth, IMU, GPS, and large-scale robotics simulation. The licence is MIT.

When your agent uses it

  • : adding a new button
  • Panel to UIController
  • Creating a new camera mode
  • Adding an info overlay

Example prompts

  • “/add-ui-feature”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Add Element to UXML
  2. Wire in UIController
  3. Implement the Handler
  4. Create CameraControl Subclass
  5. Register in Main.cs

What it can do on your machine

Read from SKILL.md and the folder at commit f4c1f0b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are csharp and xml).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Add UI Feature loads about 1.4k tokens when it runs. Until then it costs about 45 tokens; SKILL.md has 286 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~45
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from lge-ros2/cloisim at commit f4c1f0b, republished under its MIT licence (© lge-ros2). 286 words, ~1,372 tokens.

Download SKILL.mdSave it as .claude/skills/add-ui-feature/SKILL.md (or your agent's skills folder).
name
add-ui-feature
description
Add a new UI panel, control, or overlay to CLOiSim's HUD. Use when: adding a new button or panel to UIController, creating a new camera mode, adding an info overlay.

Add a New UI Feature

Procedure for adding UI elements to CLOiSim's HUD using Unity UI Toolkit or extending camera controls.

When to Use

  • Adding a new button, toggle, or panel to the main HUD
  • Creating a new info display or overlay
  • Adding a new camera view mode
  • Extending the following target list or model importer UI

UI Architecture

UI (scene root)
├── Main Canvas (UIDocument + UIController)
│   └── UI Toolkit visual tree (UXML)
├── InfoDisplay (legacy TextMeshPro overlay)
└── FollowingTargetList

Two UI systems in use:

  • UI Toolkit — main HUD (UIController.cs): buttons, toggles, text fields, labels
  • Legacy UGUI/TextMeshPro — info overlay (InfoDisplay.cs): FPS counter, status text

Do not mix UI Toolkit and UGUI in the same component.

Procedure

Option A: Add to Main HUD (UI Toolkit)
1. Add Element to UXML

Edit the UXML document (referenced by the UIDocument component on the Main Canvas object). Add your element:

xml
<ui:Button name="MyFeature" text="My Feature" class="toolbar-button" />
2. Wire in UIController

Edit Assets/Scripts/UI/UIController.cs:

csharp
// Add field
private Button _buttonMyFeature = null;

// In Start(), after other button wiring:
_buttonMyFeature = _rootVisualElement.Q<Button>("MyFeature");
_buttonMyFeature.clickable.clicked += () => OnMyFeatureClicked();

// Optionally add hover effects:
_buttonMyFeature.RegisterCallback<MouseEnterEvent>(
    delegate { ChangeBackground(ref _buttonMyFeature, Color.gray); });
_buttonMyFeature.RegisterCallback<MouseLeaveEvent>(
    delegate { ChangeBackground(ref _buttonMyFeature, Color.clear); });
3. Implement the Handler
csharp
private void OnMyFeatureClicked()
{
    _buttonMyFeature.ToggleInClassList("selected");
    // Interact with Main singleton:
    Main.Instance.MyNewMethod();
}
UI Toolkit Query Patterns
csharp
// Query by name and type:
_rootVisualElement.Q<Button>("CameraView")
_rootVisualElement.Q<Toggle>("LockVerticalMoving")
_rootVisualElement.Q<TextField>("ScaleField")
_rootVisualElement.Q<Label>("StatusMessage")
_rootVisualElement.Q<EnumField>("MyEnum")
_rootVisualElement.Q<ScrollView>("MyList")
_rootVisualElement.Q<VisualElement>("MyContainer")
Event Registration Patterns
csharp
// Click
button.clickable.clicked += () => { ... };

// Value change
toggle.RegisterValueChangedCallback(x => DoSomething(x.newValue));

// Focus events
textField.RegisterCallback<FocusOutEvent>(OnFocusOut);

// Mouse events
element.RegisterCallback<MouseEnterEvent>(delegate { ... });
element.RegisterCallback<MouseLeaveEvent>(delegate { ... });
Styling Patterns
csharp
// Visibility
element.style.display = DisplayStyle.None;     // hidden, no layout
element.style.display = DisplayStyle.Flex;      // visible
element.style.visibility = Visibility.Hidden;   // hidden, keeps layout

// Background color
element.style.backgroundColor = new Color(0.5f, 0.5f, 0.5f, 1f);

// CSS class toggling
element.ToggleInClassList("selected");
element.EnableInClassList("active", isActive);
element.AddToClassList("highlight");
element.RemoveFromClassList("highlight");
Option B: Add a New Camera Mode
1. Create CameraControl Subclass
csharp
/*
 * Copyright (c) 2026 LG Electronics Inc.
 *
 * SPDX-License-Identifier: MIT
 */

using UnityEngine;

public class MyCameraControl : CameraControl
{
    protected override void HandleMouseWheelScroll(in float value)
    {
        // Custom zoom behavior
    }

    protected override void HandleKeyboardDirection(in float duration)
    {
        // Custom movement (WASD)
    }
}
2. Register in Main.cs

Camera switching is done in Main.cs via SetCameraPerspective() / SetCameraOrthographic() pattern. Add your mode similarly.

Option C: Status Messages

Use the existing status message system:

csharp
// From anywhere with access to Main:
Main.UIController?.SetStatusMessage("Loading model...");
Main.UIController?.SetWarningMessage("Warning text");
Main.UIController?.SetErrorMessage("Error text");
Main.UIController?.ClearMessage();

Input System

Use New Input System APIs only:

csharp
// Keyboard
if (Keyboard.current[Key.Space].wasPressedThisFrame) { ... }
if (Keyboard.current[Key.LeftCtrl].isPressed) { ... }

// Mouse
var scrollDelta = Mouse.current.scroll.ReadValue().y;
var mousePosition = Mouse.current.position.ReadValue();
if (Mouse.current.leftButton.wasPressedThisFrame) { ... }

Never use legacy Input.GetKey(), Input.GetAxis(), etc.

Key Rules

  • The UI root object and Main Canvas child must not be renamed
  • Camera controls set _blockControl = true when UI text input has focus
  • UIController accesses singletons via Main.Instance, Main.ObjectSpawning, etc.
  • Use LateUpdate() for camera control input processing

Checklist

  • Element added to UXML document
  • Field declared and queried in UIController.Start()
  • Event handler registered
  • Uses New Input System (Keyboard.current, Mouse.current)
  • Does not mix UI Toolkit and UGUI in same component
  • Does not rename UI or Main Canvas scene objects
  • License header on new files
  • Tabs for indentation, Allman braces

© lge-ros2, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .github/skills/add-ui-feature of lge-ros2/cloisim.

Open the folder on GitHubat commit f4c1f0b

Compare with similar skills

Add UI Feature next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Add UI Feature compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add UI Feature this skilllge-ros2/cloisim176—~1.4kAutomated safety check: PassMIT
Captions Overlay Rulesheygen-com/hyperframes60k1 repos~1.5kAutomated safety check: PassApache-2.0
Azldev Overlaysmicrosoft/azurelinux5.3k—~2.3kAutomated safety check: PassMIT
Chat Motion Overlay Generatornexu-io/open-design100k—~1.1kAutomated safety check: PassApache-2.0
Panel Databrycewang-stanford/Auto-Empirical-Research-Skills4.6k—~2.6kAutomated safety check: PassCustom licence
Expert Panelericosiu/ai-marketing-skills3.6k2 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • Captions Overlay Rules

    heygen-com/hyperframes

    Rules for captioning talking-head and launch videos: classify each phrase as drop, rail or embed, and composite captions over the film instead of reserving space.

    60k GitHub starsUsed in 1 repo~1.5k tokens
    Media & CreativeAuto-check passed
  • Azldev Overlays

    microsoft/azurelinux

    Official

    Read this before adding, changing, or diagnosing any overlay; never edit a spec or rendered file from memory.

    5.3k GitHub stars~2.3k tokensUpdated today
    Auto-check passed
  • Turns a chat transcript or screenshot into a configurable animated chat clip, rendered as a Remotion bundle with optional transparency.

    100k GitHub stars~1.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Panel Data

    brycewang-stanford/Auto-Empirical-Research-Skills

    Econometrics skill for panel data models. An agent skill from brycewang-stanford/Auto-Empirical-Research-Skills.

    4.6k GitHub stars~2.6k tokensUpdated 5 days ago
    Research & ScienceAuto-check passed
  • Expert Panel

    ericosiu/ai-marketing-skills

    Score, evaluate, and iteratively improve any content or strategy using an auto-assembled panel of domain experts.

    3.6k GitHub starsUsed in 2 repos~2.1k tokens
    Frontend & DesignAuto-check passed
  • Scores a stock through a panel of well-known investor personas, each applying their own method and returning a structured signal, then tallies the votes.

    7.1k GitHub stars~757 tokensUpdated 1 mo ago
    Business, Finance & HRAuto-check passed

More from lge-ros2/cloisim

All 18 skills in this repo
  • Add Actor Animation

    lge-ros2/cloisim

    Add or modify SDF actors with skeletal animation and waypoint-based navigation.

    176 GitHub stars~2.4k tokensUpdated 5 days ago
    Auto-check passed
  • Add Compute Shader

    lge-ros2/cloisim

    Add a new compute or surface shader for sensor data processing or visualization.

    176 GitHub stars~2.1k tokensUpdated 5 days ago
    Auto-check passed
  • Add Mesh Import

    lge-ros2/cloisim

    Import 3D mesh files into CLOiSim via the Assimp pipeline, including collision generation and procedural meshes.

    176 GitHub stars~2k tokensUpdated 5 days ago
    Auto-check passed
  • Add Motor Controller

    lge-ros2/cloisim

    Add a new motor or drive controller for robot locomotion. An agent skill from lge-ros2/cloisim.

    176 GitHub stars~1.4k tokensUpdated 5 days ago
    Auto-check passed
  • Add New Plugin

    lge-ros2/cloisim

    Add a new CLOiSimPlugin for bridging a device to the ROS 2 transport layer.

    176 GitHub stars~1.5k tokensUpdated 5 days ago
    Auto-check passed
  • Add New Sensor

    lge-ros2/cloisim

    Add a new sensor device to CLOiSim, including the Device subclass, SDF pipeline wiring, and transport plugin.

    176 GitHub stars~1.6k tokensUpdated 5 days ago
    Auto-check passed

Questions about Add UI Feature

What does Add UI Feature do?

Add a new UI panel, control, or overlay to CLOiSim's HUD. An agent skill from lge-ros2/cloisim. Add UI Feature is an agent skill from lge-ros2/cloisim. Add a new UI panel, control, or overlay to CLOiSim's HUD.

When should I use Add UI Feature?

Add UI Feature fits situations like: : adding a new button; panel to UIController; creating a new camera mode; adding an info overlay.

How do I install Add UI Feature in Claude Code?

Run `npx skills add lge-ros2/cloisim --skill add-ui-feature -a claude-code`. Or copy the skill folder (.github/skills/add-ui-feature in lge-ros2/cloisim) into .claude/skills/add-ui-feature in your project. Claude Code loads it when a task matches its description.

How do I install Add UI Feature in Codex?

Run `npx skills add lge-ros2/cloisim --skill add-ui-feature -a codex`. Or copy the skill folder (.github/skills/add-ui-feature in lge-ros2/cloisim) into .agents/skills/add-ui-feature in your project. Codex loads it when a task matches its description.

Can I use Add UI Feature in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add lge-ros2/cloisim --skill add-ui-feature -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-ui-feature, .gemini/skills/add-ui-feature, .github/skills/add-ui-feature and .opencode/skills/add-ui-feature in your project.

What does Add UI Feature need to run?

SKILL.md names no scripts, command-line tools or credentials: Add UI Feature is instructions for the agent only.

Does Add UI Feature access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Add UI Feature safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Add UI Feature use?

Add UI Feature is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Add UI Feature use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Add UI Feature?

Skills that share tags, products or a category with Add UI Feature: Captions Overlay Rules (heygen-com/hyperframes, 60k stars), Azldev Overlays (microsoft/azurelinux, 5.3k stars), Chat Motion Overlay Generator (nexu-io/open-design, 100k stars) and Panel Data (brycewang-stanford/Auto-Empirical-Research-Skills, 4.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add UI Feature?

lge-ros2 (a GitHub organization) maintains it in lge-ros2/cloisim, which has 176 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 6, 2026.

Source: lge-ros2/cloisim on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.