AgentSkillsCN

ui-test-harness-onboarding

将UI测试方法（场景测试、截图、meta.json、C-UX契约）的环境特异性流程独立封装为一项技能，以通俗易懂的语言加以阐释。

SKILL.md
--- frontmatter
name: ui-test-harness-onboarding
description: >
  UIテスト方法（Scenario, スクショ, meta.json, C-UX契約）の環境固有手順を独立Skill化。
  人間にもわかる言語で説明する。
inputs:
  - テスト対象のシナリオID
outputs:
  - 実行コマンド、生成物、確認観点
rules:
  - 手順書として毎回参照可能にする
  - 目視チェック観点を明確に
  - 契約番号は mdBook の 10-contracts.md と一致させる

ui-test-harness-onboarding

目的

Scenario・スクショ・meta.json・契約（C-UX）を同じ手順で再現できるようにする。 コードが読めない人でも実行・確認できる形で説明する。

実行コマンド

bash
cargo run -- --scenario S11-Edit --artifact-out out/ --exit-after

オプション説明

オプション意味
--scenario <ID>実行するシナリオ ID
--artifact-out <dir>成果物の出力先
--exit-afterシナリオ完了後に自動終了

生成物

code
out/<scenario>-<timestamp>/
├── screenshot_ui.png    # UI 全体のスクショ
├── screenshot_canvas.png # キャンバス部分のみ
├── meta.json            # 観測データ
└── run.log              # 実行ログ

meta.json で見る場所（契約準拠）

契約meta.json パス意味
C-UX-001viewport.canvas_rect_pxオーバーレイ境界チェック用
C-UX-003canvas_safe_rectSafe Area（Canvas - 12px margin）
C-UX-006render_style.boundary_stroke_effective_px最終描画線幅（min clamp 後）
C-UX-006render_style.min_stroke_px_policy最小許容値（1.0）
C-UX-006legibility_contract.check_passed契約成否
C-UX-006legibility_contract.stroke_below_minmin clamp 発動フラグ

契約一覧（UI v1 準拠）

契約内容判定閾値
C-UX-001オーバーレイはキャンバス内failはみ出し禁止
C-UX-003Safe Area = Canvas - 12px marginrecord観測のみ
C-UX-005FitToSheet 四隅が Safe Area 内warn四隅収まる
C-UX-006線の視認性warnmin = 1.0 px（契約最低）

注意: C-UX-006 の target_px = 2.0 は改善指標であり、契約最低ラインは min_acceptable_px = 1.0。

目視チェック観点

必須確認項目

  1. •

    線が見えるか

    • •screenshot_canvas.png で壁線が視認できるか
    • •背景と区別できる太さか
    • •legibility_contract.check_passed = true か
  2. •

    パネルが隠れているか

    • •scenario_mode: true なら UI パネルは非表示
    • •screenshot_ui.png で確認
  3. •

    オーバーレイがキャンバス内か（C-UX-001）

    • •UI 要素がキャンバス領域外にはみ出していないか
  4. •

    線の太さ下限（C-UX-006）

    • •boundary_stroke_effective_px >= 1.0（契約最低）
    • •>= 2.0 は改善目標（warn ではない）

トラブルシュート

問題確認箇所
スクショが真っ白render_style が空 / Space がない
線が見えないboundary_stroke_effective_px が 1.0 未満
パネルが出ているscenario_mode: false になっている
legibility_contract.check_passed = falsemin clamp が効いている、Grid を薄くする