メニュー
agent-browser でアクセシビリティツリーを取得し、UI 構造を機械的に検証する。 CLS 測定、アニメーション完了待ち、スナップショット比較。 Use when: "UI確認", "見た目チェック", "コンポーネント検証", "visual check", "accessibility tree", "CLS", "アクセシビリティ", "スナップショット".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
活字ビジネス文書（請求書・領収書・名刺）の合成データを生成する。 LLM の創造性でリアルな日本語ビジネスデータとユニークなレイアウト (HTML/CSS) を生成し、 Playwright で画像化する。 Use when: "データ生成", "generate-business-doc", "合成データ", "ビジネス文書生成", "請求書生成", "領収書生成", "名刺生成", "structured_eval データ"
Modal上でOCRモデルを動かすスクリプトの新規作成・デバッグ・動作確認を行う。 このプロジェクトのmodal_scripts/パターンに準拠したスクリプトを生成し、 既知のハマりどころを事前回避する。 Use when: "Modal", "modal_scripts", "Modalスクリプト", "Modalで動かす", "GPUで実行", "新しいOCRモデルを追加", "Modalモデル追加", "modal run".
| name | visual-check |
| description | agent-browser でアクセシビリティツリーを取得し、UI 構造を機械的に検証する。 CLS 測定、アニメーション完了待ち、スナップショット比較。 Use when: "UI確認", "見た目チェック", "コンポーネント検証", "visual check", "accessibility tree", "CLS", "アクセシビリティ", "スナップショット". |
npx agent-browser installcurl -sf http://localhost:5191 || echo "dev server is not running on port 5191"
npx agent-browser open http://localhost:5191
npx agent-browser snapshot
snapshot 出力の読み方:
@e1, @e2... = 要素参照。以降のコマンドで使えるrole=button, role=textbox 等で要素の意味を確認npx agent-browser fill @e5 "test input"
npx agent-browser click @e7
npx agent-browser snapshot # 操作後の状態確認
npx agent-browser eval "
let cls = 0;
new PerformanceObserver(l => {
for (const e of l.getEntries()) { if (!e.hadRecentInput) cls += e.value; }
}).observe({type:'layout-shift',buffered:true});
await new Promise(r => setTimeout(r, 1000));
cls;
"
目標: CLS < 0.1 (Good)
npx agent-browser eval "
await Promise.all(
document.getAnimations({subtree:true}).map(a => a.finished)
);
'animations complete';
"
npx agent-browser screenshot /tmp/component.png
npx agent-browser install を実行npx agent-browser eval "await new Promise(r => setTimeout(r, 2000))" 後に再試行