القائمة
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))" 後に再試行