control-ui-e2eでOpenClaw画面の変更を状態別に検証

使うとこうなる

画面を変えたあとに一言頼むと、エージェントが状態ごとの表示例を並べたギャラリーを作り、変更前後の画像を残します。依頼の文面は、たとえば次のとおりです。

チャット画面の入力欄のレイアウトを変えました。通常・読み込み中・空・エラーの状態を並べたギャラリーを作って、変更前後の画像も残してください。

エージェントはまず、見た目の確認手順をまとめた付属資料を読みます。そのうえで、通常、読み込み中、空、エラーの各状態を並べたHTMLのギャラリーを作る流れです。各表示例にはコメントを付けられ、保存や書き出しもできます。

見た目が変わる修正なので、変更前と変更後のスクリーンショットを撮り、中身を確認してから残します。レポート、スクリーンショット、トレース（操作の記録）、動画は、試行ごとに作るフォルダへまとめて置かれる仕組みです。

最後の報告では、確認できた結果と失敗、まだ試していない状態が分けて示されます。

control-ui-e2eでできること

control-ui-e2eは、画面の変更を見た目と操作の両面から確かめ、証拠を残すところまでを受け持つスキルです。OpenClawのリポジトリopenclaw/openclawに含まれる、Control UI開発者向けのものです。依頼の内容によって、読む手順は次のように分かれます。

依頼の内容	スキルが行うこと
大きなレイアウト変更、複数状態のデザイン確認	状態別のストレステスト用ギャラリーを作る
見た目の変更、スクリーンショット、動画	確認済みの変更前後の画像を残す
画面が遅い、反応が悪い	Chromeのトレースを集めて操作の性能を調べる
実行や判断の記録が必要	Run Inspectorの記録を取り込む

状態別ギャラリーで見比べ、意見を集める

複数の状態を持つ画面や部品を変えるときに使うのが、表示例を並べたギャラリーです。具体的な表示を見ながら意見を集められるので、デザインレビューの材料になります。文言やアイコンだけの小さな変更であれば、その箇所に絞った確認で十分です。

模擬Gatewayで操作を通して確かめる

チャット送信のように通信と画面表示を一緒に確かめたい場面では、VitestとPlaywrightで動く実ブラウザのテストを使います。

Gatewayの応答を模擬し、画面の起動から通信、操作後の表示までを通しで検証する仕組みです。足りない応答があれば、既存のテスト補助コードの設定を広げて補います。

テストの進め方は次の4段階です。

1. 変更した動作ごとに、確かめる場面と証明の範囲を決める
2. 模擬Gatewayのデータを用意し、必要な応答をすべて定義する
3. 画面を開く前に模擬を入れ、見えているボタンや入力欄を操作する
4. 表示結果とGatewayへのリクエストの両方を確かめ、証拠をまとめる

各段階に完了条件があり、確かめた結果には必ず見て確認できる証拠が付きます。想定外の動きが出たら、製品側かテストデータ側で原因を解消し、それから再実行する流れです。

試行の記録をすべて残す

成功した試行も失敗した試行も、消さずに残します。前回の証拠を上書きせず、共有の保存先をまとめて消すこともしません。そのため、後から「どの試行で何が起きたか」をたどれます。

インストール方法

インストールに必要なのはコマンド1行だけです。npx skills addでは、Claude CodeやCodexなど、入れる先のエージェントを選べます。

npx skills add https://github.com/openclaw/openclaw --skill control-ui-e2e

エージェントに任せる場合は、次の文面をそのまま送ってください。

次の Agent Skill をインストールしてください。
https://github.com/openclaw/openclaw/tree/main/.agents/skills/control-ui-e2e

まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/control-ui-e2e/、Codex なら ~/.agents/skills/control-ui-e2e/ に配置してください。

置き場所は次のとおりです。

エージェント	全プロジェクトで使う	特定のプロジェクトだけで使う
Claude Code	~/.claude/skills/	プロジェクトの .claude/skills/
Codex	~/.agents/skills/	プロジェクトの .agents/skills/

このスキルは、OpenClawのリポジトリ内の.agents/skills/control-ui-e2eに置かれています。リポジトリで作業するときに使う前提のスキルです。

使い方の例

依頼は日本語で構いません。代表的な依頼を3つ示します。

この設定画面の通常・空・エラー状態を比較できるギャラリーを作って

返ってくるのは、状態ごとの表示例を並べたHTMLギャラリーです。各例へのコメントは保存でき、書き出してレビュー担当者に渡せます。

Gatewayの応答を模擬して、チャットでメッセージを送ったあとの表示をテストして

模擬Gatewayを使ったブラウザテストが用意されます。送信操作のあとの表示とGatewayへのリクエストを、このテストで確かめる形です。失敗したときは、満たせなかった確認項目が記録に残ります。

レイアウトを変えたので、変更前後の画像を残して報告して

変更前と変更後のスクリーンショットを撮って確認し、試行ごとのフォルダに保存する流れです。報告では、確認済みの結果と未確認の状態が分けて書かれます。

特定のテストだけを手元で走らせたいときは、リポジトリのルートで次のコマンドを実行してください。

node scripts/run-vitest.mjs run --config test/vitest/vitest.ui-e2e.config.ts --configLoader runner ui/src/e2e/chat-flow.messaging.e2e.test.ts

注意点

前提として、OpenClawの開発環境と、導入済みの依存パッケージが必要です。スキルの方針は、既存のインストールを使い、ほかの作業が使っているインストールを損なわないことです。テストの実行場所は、リポジトリ内のテスト方針に従います。

検証は通常、本物の認証情報を使わずに模擬データで行います。本物のGatewayやモデル提供サービスの認証情報を使うには、明示的な許可が必要です。

チャットの送信待ちや添付ファイルに関わる一部のテスト群は、別の担当が管理しています。そのため、記録の残り方を確かめてから結果を主張します。

ギャラリーは操作テストの代わりにはなりません。見た目の確認と動作の確認は、それぞれ別に行います。生成した画像や動画は、原則としてコミットしません。

このスキルは、OpenClaw Control UIのテスト補助コードとスクリプトを前提にしています。ほかのWebアプリにそのまま使えるとは書かれていません。

ライセンスはMITです。入れる前に、SKILL.mdと付属ファイルの中身を一度読んでください。

関連スキル

以下は、画面の確認の前後に使える、同じOpenClaw開発向けのスキルです。

agent-transcriptは、エージェントの作業ログから、GitHubのPRやissueに添える記録を作るスキルです。画面の検証結果をPRで説明するときに、合わせて使えます。

autoreviewは、共有のレビュー手順でコードを確認します。画面の変更を出す前のコードレビュー向きです。

openclaw-docker-e2e-authoringは、OpenClawのDocker環境で一連の動作を確かめるテストを作るスキルです。画面の外側まで含めて動作を確かめたいときは、こちらと使い分けます。

まとめ

control-ui-e2eは、OpenClaw Control UIの画面変更を、状態別のギャラリーと模擬Gatewayを使ったブラウザテストで確かめるスキルです。変更前後の画像やコメント、試行ごとの記録が残るため、レビューで変更内容を示しやすくなります。

OpenClawの画面に関わる人が、変更を確かめて共有するための道具として使えます。詳しくはcccskillsのページをご覧ください。