From msw-unity
Unity UI Toolkit 기반 UI 생성 (UXML, USS, C# 컨트롤러, 에디터 세팅 스크립트 자동 생성). Use when the user asks to create UI, HUD, menu, inventory, or any screen using UI Toolkit, UXML, USS, or UIDocument.
How this skill is triggered — by the user, by Claude, or both
Slash command
/msw-unity:unity-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Unity UI Toolkit을 사용하여 런타임 UI를 생성합니다. UXML(레이아웃), USS(스타일), C# 컨트롤러, 에디터 세팅 스크립트를 자동으로 생성합니다.
Unity UI Toolkit을 사용하여 런타임 UI를 생성합니다. UXML(레이아웃), USS(스타일), C# 컨트롤러, 에디터 세팅 스크립트를 자동으로 생성합니다.
com.unity.modules.uielements 패키지가 manifest.json에 포함되어 있어야 함ProjectSettings/ProjectVersion.txt에서 Unity 버전 확인Packages/manifest.json에서 com.unity.modules.uielements 존재 확인사용자에게 질문:
다음 파일들을 Assets/{UIName}/ 디렉토리에 생성:
{UIName}.uxml)<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ui="UnityEngine.UIElements"
xsi:noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd">
<Style src="{UIName}.uss" />
<!-- UI 요소들 -->
</ui:UXML>
{UIName}.uss){UIName}Controller.cs)using UnityEngine;
using UnityEngine.UIElements;
public class {UIName}Controller : MonoBehaviour
{
void OnEnable()
{
var root = GetComponent<UIDocument>().rootVisualElement;
// Q<T>()로 요소 바인딩
// 이벤트 핸들러 등록
}
}
Editor/{UIName}SceneSetup.cs)using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
public static class {UIName}SceneSetup
{
[MenuItem("Tools/Setup {UIName}")]
public static void SetupScene()
{
// PanelSettings 에셋 생성/검색
// UIDocument 컴포넌트 추가 + UXML 연결
// 컨트롤러 스크립트 추가
}
}
생성 완료 후 안내:
Tools > Setup {UIName} 클릭<Style src="{UIName}.uss" /> 방식으로 USS를 직접 참조. PanelSettings themeStyleSheet 사용 금지생성 전 반드시 해당 예제를 Read로 로드하여 패턴을 확인:
| 예제 | 경로 | 내용 |
|---|---|---|
| 기본 카운터 | references/examples/01-basic-counter.md | 버튼, 입력, 토글, 슬라이더 |
| 채팅 UI | references/examples/02-chat-ui.md | 사이드바, 탭, 동적 메시지, 스크롤 |
| uGUI↔UIToolkit 브릿지 | references/examples/03-ugui-uitoolkit-bridge.md | 양방향 드래그앤드롭, 좌표변환, 고스트 |
| uGUI 도킹+UIToolkit 싱크 | references/examples/04-dock-sync.md | 도킹 윈도우 추적, 리사이즈 연동, 투명 오버레이 |
| 요소 | UXML 태그 | C# 접근 |
|---|---|---|
| 버튼 | <ui:Button> | root.Q<Button>("name") |
| 레이블 | <ui:Label> | root.Q<Label>("name") |
| 텍스트 입력 | <ui:TextField> | root.Q<TextField>("name") |
| 토글 | <ui:Toggle> | root.Q<Toggle>("name") |
| 슬라이더 | <ui:Slider> / <ui:SliderInt> | root.Q<Slider>("name") |
| 드롭다운 | <ui:DropdownField> | root.Q<DropdownField>("name") |
| 스크롤뷰 | <ui:ScrollView> | root.Q<ScrollView>("name") |
| 리스트뷰 | <ui:ListView> | root.Q<ListView>("name") |
| 프로그레스바 | <ui:ProgressBar> | root.Q<ProgressBar>("name") |
기존 uGUI 도킹 윈도우 시스템에 UI Toolkit을 연동할 때:
LateUpdate()에서 매 프레임 추적background-color: rgba(0,0,0,0) 필수핵심 좌표 변환 (같은 reference resolution일 때 직접 매핑 — ScreenToPanel보다 정확):
// LateUpdate()에서 매 프레임
// uGUI: anchor(0.5, 0.5), Y 위가 +
// UI Toolkit: (0,0)=좌상단, Y 아래가 +
float refW = 1920f, refH = 1080f;
float left = refW / 2f + dockSlot.anchoredPosition.x - dockSlot.sizeDelta.x / 2f;
float top = refH / 2f - dockSlot.anchoredPosition.y - dockSlot.sizeDelta.y / 2f;
dockContainer.style.left = left;
dockContainer.style.top = top;
dockContainer.style.width = dockSlot.sizeDelta.x;
dockContainer.style.height = dockSlot.sizeDelta.y;
주의: RuntimePanelUtils.ScreenToPanel()은 CanvasScaler와 PanelSettings 스케일링 차이로 오프셋이 생길 수 있음. 같은 reference resolution이면 직접 매핑이 더 정확.
7. 타이틀바/리사이즈는 UI Toolkit에 배치 — uGUI에 두면 UI Toolkit 패널에 가려져 클릭 불가
상세 예제: references/examples/04-dock-sync.md
// 버튼 클릭
root.Q<Button>("btn").clicked += () => { };
// 값 변경
root.Q<Toggle>("toggle").RegisterValueChangedCallback(evt => { });
root.Q<Slider>("slider").RegisterValueChangedCallback(evt => { });
root.Q<TextField>("field").RegisterValueChangedCallback(evt => { });
// ListView 바인딩
var listView = root.Q<ListView>("list");
listView.makeItem = () => new Label();
listView.bindItem = (element, index) => { };
listView.itemsSource = dataList;
npx claudepluginhub choigawoon/msw-cc-plugins --plugin msw-unityCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.