From unity-plugin
Builds and optimizes Unity UI with UI Toolkit and UGUI for responsive layouts, event systems, Canvas optimization, and performance. Use for UI implementation and cross-platform challenges.
npx claudepluginhub creator-hian/claude-code-plugins --plugin unity-pluginThis skill uses the workspace's default tool permissions.
Unity UI systems covering both UI Toolkit (modern) and UGUI (Canvas-based legacy).
Guides Unity UI development using UGUI (Canvas, RectTransform, layouts) and UI Toolkit (USS, UXML), covering system selection, anchoring, performance, and common patterns.
Unity 6 UI development guide. Use when building user interfaces, menus, HUD, buttons, or any UI elements. Covers UI Toolkit (recommended for new projects — USS, UXML, UI Builder, data binding), uGUI/Canvas (legacy runtime UI), and IMGUI. Based on Unity 6.3 LTS documentation.
Guides selection of UGUI vs UI Toolkit in Unity projects based on version, complexity, performance, and use case; includes comparisons, migration strategies, and support matrices.
Share bugs, ideas, or general feedback.
Unity UI systems covering both UI Toolkit (modern) and UGUI (Canvas-based legacy).
Foundation Required: unity-csharp-fundamentals (TryGetComponent, FindAnyObjectByType, null-safe coding)
Core Topics:
using UnityEngine.UI;
public class UIController : MonoBehaviour
{
[SerializeField] private Button mActionButton;
[SerializeField] private Text mStatusText;
void Start()
{
mActionButton.onClick.AddListener(OnButtonClick);
}
void OnButtonClick()
{
mStatusText.text = "Button clicked!";
}
}
using UnityEngine.UIElements;
public class UIController : MonoBehaviour
{
void OnEnable()
{
UIDocument uiDocument;
if (TryGetComponent(out uiDocument))
{
VisualElement root = uiDocument.rootVisualElement;
Button button = root.Q<Button>("action-button");
button.clicked += OnButtonClick;
}
}
void OnButtonClick()
{
Debug.Log("Button clicked!");
}
}
| Feature | UI Toolkit | UGUI |
|---|---|---|
| Performance | Better | Good |
| Styling | USS (CSS-like) | Inspector |
| Layout | Flexbox | RectTransform |
| Best For | Complex UI, tools | Game UI |
| Learning Curve | Steeper | Easier |
// Separate static and dynamic UI into different canvases
// Static canvas: rarely changes
// Dynamic canvas: updates frequently
// Disable raycasting on non-interactive elements
[SerializeField] private Image mBackground;
void Start()
{
mBackground.raycastTarget = false; // Not clickable
}
// Use CanvasGroup for fade effects (TryGetComponent for null-safe access)
CanvasGroup canvasGroup;
if (panel.TryGetComponent(out canvasGroup))
{
canvasGroup.alpha = 0.5f; // Fade without rebuilding Canvas
}
// Use anchors for responsive design
// Anchor presets: Stretch, Top-Left, Center, etc.
// Canvas Scaler settings (TryGetComponent pattern)
CanvasScaler scaler;
if (TryGetComponent(out scaler))
{
scaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
scaler.referenceResolution = new Vector2(1920, 1080);
scaler.matchWidthOrHeight = 0.5f; // Balance between width/height
}
Comprehensive UI guide: