Token导航 LogoToken导航TokenDH.com
待分类需要联网github未标认证来源可访问许可证需确认审计通过

unity-uiUnity UI 浏览器

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务,不应只堆装饰元素;涉及真实页面改动时,应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

194

周安装

8

GitHub Stars

36

下载量

63
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:unity-ui(Unity UI 浏览器)
来源仓库:https://github.com/bigdra50/unity-cli
仓库路径:skills/unity-ui
安装命令:
npx skills add https://github.com/bigdra50/unity-cli --skill unity-ui
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/bigdra50/unity-cli --skill unity-ui

简介

用于辅助界面设计与视觉规范、排版、配色与布局优化。

  • 适合整理页面结构、生成 UI 方案或改进组件层级。
  • 使用时需结合品牌与设计系统,避免堆砌装饰元素。适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。
  • 涉及真实页面改动时应通过截图或预览检查文本溢出与对齐。
  • unity-ui 属于待分类类 Skill,可作为该场景下的辅助能力补充。

SKILL.md

unity-ui

PREREQUISITE: ../unity-shared/SKILL.md uitree コマンドは Play Mode 中のみ動作する。必ず u play してから実行すること。

UI テストの種別

種別検証内容手法スクショ
Functional操作→状態が正しいかclick → text で値検証不要
Visual Regression外観が変わっていないかscreenshot → 画像比較必要
Structural Snapshotツリー構造が変わっていないかdump --json → diff不要
Smoke最低限動くかclick → console にエラーなし任意
Monkeyランダム操作でクラッシュしないかmonkey → errors 確認不要

UI システム判定

手がかりUI ToolkituGUI
ファイル.uxml, .uss.prefab に Canvas
コンポーネントUIDocumentCanvas, RectTransform

コマンドリファレンス

要素の指定方法は2通り: ref ID (ref_3) または -p <panel> -n <name>

構造把握

u uitree dump                           # 全パネル一覧 (contextType: Player がゲーム側)
u uitree dump -p "PanelSettings"        # パネルのツリー (各要素の ref/name/type/classes が見える)
u uitree dump -p "PanelSettings" --json # JSON 出力 (snapshot用)
u uitree query -p "PanelSettings" -t Button              # type で検索 (VisualElement ベースのボタンはヒットしない → -c で検索)
u uitree query -p "PanelSettings" -n "BtnStart"          # name で検索
u uitree query -p "PanelSettings" -c "action-btn"        # USS class で検索
u uitree query -p "PanelSettings" -t Button -c "primary" # AND 条件
u uitree inspect -p "PanelSettings" -n "BtnStart"        # 要素詳細
u uitree inspect ref_5_48                                # ref ID で指定
u uitree inspect ref_5_48 --style                        # resolvedStyle 含む
u uitree inspect ref_5_48 --children                     # 子要素情報含む

テキスト取得

u uitree text -p "PanelSettings" -n "ToastMessage"  # name で指定
u uitree text ref_5_12                               # ref ID で指定

操作

u uitree click -p "PanelSettings" -n "BtnContinue"  # name で指定
u uitree click ref_5_48                              # ref ID で指定
u uitree click ref_5_48 --count 2                    # ダブルクリック
u uitree click ref_5_48 --button 1                   # 右クリック
u uitree scroll -p "PanelSettings" -n "ScrollArea" --y 100

モンキーテスト

u uitree monkey -p "PanelSettings" -c "action-btn" --count 50 --seed 42
u uitree monkey -p "PanelSettings" --duration 30 --seed 42
u uitree monkey -p "PanelSettings" -c "action-btn" --stop-on-error --json

query でフィルタした要素をランダムに click し、コンソールエラーを監視する。 -c (USS class) か -t (type) のフィルタが必須(フィルタなしでは要素が見つからない)。 事前に u uitree query -p <panel> -c <class> で有効な class 名を確認してから monkey に渡す。 --seed で操作順を再現可能。

スナップショット

u uitree snapshot save -p "PanelSettings" --name baseline    # 現在のツリーを保存
u uitree snapshot diff -p "PanelSettings" --name baseline    # baseline との差分
u uitree snapshot list                                        # 保存済み一覧
u uitree snapshot delete --name baseline                      # 削除

diff 出力: 要素の追加(+)/削除(-)/classes 変化(~) を検出。

スクリーンショット

u screenshot                          # GameView (-s game がデフォルト)
u screenshot -p "ui-check.png"        # 保存先指定
u screenshot --burst -n 5             # 連続 (アニメーション確認)

UI Toolkit / uGUI (Screen Space) は -s game でのみ映る。-s camera では映らない。

GameView のキャプチャにはエディタのフォーカスが必要。タイムアウトする場合は再試行で解決することが多い。

uGUI の場合

uitree は UI Toolkit 専用。uGUI は scene/component コマンドで操作する。

u scene hierarchy --depth 3
u component list -t "Canvas"
u component inspect -t "MyButton" -T "UnityEngine.UI.Button"

開発→テストフロー

Phase 1: 作成 & 手動確認
  コード変更 → /unity-verify → play → dump → 操作 → screenshot → stop

Phase 2: pytest E2E テスト生成
  dump で構造把握 → pytest テストファイルを生成 → 実行して確認

Phase 3: PlayMode テスト移植
  安定したシナリオを C# に書き直す → CI で回帰テスト

Phase 1: 作成 & 手動確認

u play
u uitree dump -p "PanelSettings"                 # 構造把握
u uitree click -p "PanelSettings" -n "BtnStart"  # 操作
u uitree text -p "PanelSettings" -n "StatusLabel" # 状態確認
u screenshot                                      # 結果キャプチャ
u stop

Phase 2: pytest E2E テスト生成

Phase 1 で確認した操作シナリオを、pytest テストとして永続化する。 unity-cli の Python API (UITreeAPI, ConsoleAPI, EditorAPI) を直接使う。

手順:

  1. u play + u uitree dump で構造を把握する
  2. 操作可能な要素(ボタン名、ラベル名)を特定する
  3. 以下のテンプレートに従い、tests/integration/ にテストファイルを生成する
  4. uv run python -m pytest tests/integration/<file> -v で実行して確認する

テンプレート:

"""E2E tests for <UI名> — pytest + unity-cli API."""
import time
import pytest
from unity_cli.api import ConsoleAPI, EditorAPI, UITreeAPI
from unity_cli.client import RelayConnection

PANEL = "<パネル名>"  # u uitree dump で確認したパネル名

@pytest.fixture(scope="module")
def conn() -> RelayConnection:
    conn = RelayConnection(instance="<プロジェクト名>", timeout=5.0)
    try:
        EditorAPI(conn).get_state()
    except Exception:
        pytest.skip("Relay not available")
    return conn

@pytest.fixture(scope="module")
def uitree(conn: RelayConnection) -> UITreeAPI:
    return UITreeAPI(conn)

@pytest.fixture(scope="module")
def console(conn: RelayConnection) -> ConsoleAPI:
    return ConsoleAPI(conn)

@pytest.fixture(scope="module")
def editor(conn: RelayConnection) -> EditorAPI:
    return EditorAPI(conn)

@pytest.fixture(autouse=True)
def _play_mode(editor: EditorAPI):
    """Play Mode に入る。"""
    state = editor.get_state()
    if not state.get("isPlaying"):
        editor.play()
        deadline = time.time() + 10
        while time.time() < deadline:
            if editor.get_state().get("isPlaying"):
                break
            time.sleep(0.5)
    yield

@pytest.fixture(scope="module", autouse=True)
def _stop_after_all(editor: EditorAPI):
    """全テスト後に Play Mode 終了。"""
    yield
    try:
        editor.stop()
    except Exception:
        pass

# --- Functional テスト ---

class TestMenuButtons:
    def test_continue_shows_toast(self, uitree: UITreeAPI) -> None:
        uitree.click(panel=PANEL, name="<ボタン名>")
        time.sleep(0.3)
        result = uitree.text(panel=PANEL, name="<ラベル名>")
        assert result["text"] == "<期待値>"

# --- Smoke テスト ---

class TestSmoke:
    BUTTONS = ["<ボタン1>", "<ボタン2>", ...]

    def test_all_clickable_without_errors(self, uitree: UITreeAPI, console: ConsoleAPI) -> None:
        console.clear()
        for btn in self.BUTTONS:
            uitree.click(panel=PANEL, name=btn)
            time.sleep(0.2)
        errors = console.get(types=["error"])
        assert errors.get("entries", []) == []

# --- Structural Snapshot ---

class TestStructure:
    def test_tab_switch_changes_tree(self, uitree: UITreeAPI) -> None:
        before = uitree.dump(panel=PANEL)
        uitree.click(panel=PANEL, name="<タブ名>")
        time.sleep(0.3)
        after = uitree.dump(panel=PANEL)
        assert before != after

既存の conftest.pyconn, uitree, editor, console fixture がある場合はテンプレートの fixture 定義を省略し、conftest に委譲する。fixture の scope は conftest に合わせる(conftest が session なら _play_mode 等も同じ scope か互換性のある scope にする)。

動的な値(タイムスタンプ、プログレス%等)を持つラベルは等値比較ではなくフォーマット検証を使う:

assert result["text"].endswith("%")  # "65%" 等

テストの種別に応じてクラスを追加する:

  • TestMenuButtons — Functional (click → text 検証)
  • TestSmoke — 全ボタンクリック + エラーなし
  • TestStructure — ツリー構造の変化検出
  • TestMonkey — ランダム操作でエラーなし
  • TestVisual — screenshot 撮影(画像比較は手動 or 別ツール)

Monkey テスト例:

from unity_cli.api.uitree_monkey import MonkeyRunner

class TestMonkey:
    def test_random_clicks_no_errors(self, uitree: UITreeAPI, console: ConsoleAPI) -> None:
        # MonkeyRunner.run() は MonkeyResult を返す。errors は list[dict]
        runner = MonkeyRunner(uitree, console)
        result = runner.run(panel=PANEL, class_filter="<操作対象class>", count=50, seed=42, interval=0.2)
        assert result.errors == [], f"Monkey errors: {result.errors}"

Snapshot テスト例:

from unity_cli.api.uitree_snapshot import SnapshotStore

class TestSnapshot:
    def test_save_and_diff_no_changes(self, uitree: UITreeAPI, tmp_path) -> None:
        store = SnapshotStore(snapshot_dir=tmp_path / "snapshots")
        data = uitree.dump(panel=PANEL, format="json")
        store.save("baseline", data)
        current = uitree.dump(panel=PANEL, format="json")
        # diff(name, current): name は保存済みスナップショット名、current は比較対象のツリーデータ
        result = store.diff("baseline", current)
        assert result["added"] == []
        assert result["removed"] == []
        assert result["changed"] == []

monkey テストの前にUIを初期状態に戻す(前のテストの副作用で Toast 等のクラスが変わることがある)。time.sleep(2) で Toast の hidden 復帰を待つか、テスト順序に依存しない assertion を使う。

Phase 3: PlayMode テスト移植

Phase 2 の pytest で安定したシナリオを C# PlayMode テストに書き直す。

PlayMode に移植する基準:

  • CI で毎回回す回帰テスト
  • フレーム精度が必要 (アニメーション完了待ち等)
  • Assert で厳密に状態検証
  • InputSystem / EventSystem 経由の操作

pytest E2E のまま残す基準:

  • 探索的テスト (シナリオが毎回変わる)
  • AI エージェントの自律テスト
  • Unity 外からの結合テスト

手順:

  1. Phase 2 の pytest テストから安定したシナリオを選ぶ
  2. 以下のテンプレートに従い、Assets/Tests/PlayMode/ に C# テストを生成する
  3. asmdef に UI コントローラの参照を追加する(必要に応じて)
  4. u tests run play で実行して確認する

テンプレート:

using System.Collections;
using NUnit.Framework;
using UnityEngine;
using UnityEngine.TestTools;
using UnityEngine.UIElements;

namespace Game.Tests.PlayMode
{
    [TestFixture]
    public class <UI名>Tests
    {
        private GameObject _hudObject;
        private UIDocument _uiDocument;
        private VisualElement _root;

        [UnitySetUp]
        public IEnumerator SetUp()
        {
            // UIDocument を持つ GameObject を生成
            // コントローラが Awake/OnEnable で初期化するのを待つ
            _hudObject = new GameObject("TestHUD");
            _hudObject.AddComponent<<コントローラ名>>();
            _uiDocument = _hudObject.GetComponent<UIDocument>();

            // コルーチン初期化 (StartCoroutine in OnEnable 等) は1フレームでは完了しない
            // 2フレーム以上待つ
            yield return null;
            yield return null;

            _root = _uiDocument.rootVisualElement;
            Assert.IsNotNull(_root, "Root visual element should be initialized");
        }

        [TearDown]
        public void TearDown()
        {
            Object.Destroy(_hudObject);
        }

        // --- Functional テスト ---

        [UnityTest]
        public IEnumerator <ボタン名>_Shows<期待される動作>()
        {
            var btn = _root.Q("<ボタン名>");
            Assert.IsNotNull(btn);

            Click(btn);
            yield return null;

            var label = _root.Q<Label>("<ラベル名>");
            Assert.AreEqual("<期待値>", label.text);
        }

        // --- Smoke テスト ---

        [UnityTest]
        public IEnumerator AllButtons_ClickableWithoutErrors()
        {
            var buttons = new[] { "<ボタン1>", "<ボタン2>", ... };

            foreach (var name in buttons)
            {
                var element = _root.Q(name);
                Assert.IsNotNull(element, $"{name} should exist");
                Click(element);
                yield return null;
            }

            LogAssert.NoUnexpectedReceived();
        }

        // --- ヘルパー ---

        private static void Click(VisualElement element)
        {
            using var evt = ClickEvent.GetPooled();
            evt.target = element;
            element.panel.visualTree.SendEvent(evt);
        }
    }
}

Click ヘルパーの注意:

  • ClickEvent.GetPooled() で座標計算不要のイベントを生成し、panel.visualTree.SendEvent で発火する
  • NavigationSubmitEvent では RegisterCallback<ClickEvent> が反応しないため使わない
  • ホバーやプレスエフェクトも再現したい場合は PointerDownEvent + PointerUpEventworldBound.center 座標付きで送る

asmdef の注意:

  • テスト対象クラスが Assembly-CSharp(asmdef なし)にある場合、テスト asmdef からは直接参照できない
  • 対象クラスに専用 asmdef を作成し、テスト asmdef の references に追加する
  • 例: Assets/UI/Game.UI.asmdef を作成 → Game.Tests.PlayMode.asmdef の references に "Game.UI" を追加

Phase 2 の pytest テストの各テストメソッドを1対1で C# に移植する。

移植後は u tests run play で実行。

CLI 非対応操作

unity-shared のフォールバック順に従う:

  1. u api schema --type <Type> で対応メソッドを検索
  2. u api call で実行
  3. 該当なしの場合のみ YAML 直接編集

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

33.97%
按下载量换算21

Claude

27.84%
按下载量换算18

Cursor

19.18%
按下载量换算12

Gemini CLI

9.71%
按下载量换算6

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills