# ui-test-harness-onboarding

> UIテスト方法（Scenario, スクショ, meta.json, C-UX契約）の環境固有手順を独立Skill化。 人間にもわかる言語で説明する。

- Author: Claude Code
- Repository: sososha/039
- Version: 20260125005233
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/sososha/039
- Web: https://mule.run/skillshub/@@sososha/039~ui-test-harness-onboarding:20260125005233

---

---
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` | シナリオ完了後に自動終了 |

---

## 生成物

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

---

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

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

---

## 契約一覧（UI v1 準拠）

| 契約 | 内容 | 判定 | 閾値 |
|-----|------|------|------|
| C-UX-001 | オーバーレイはキャンバス内 | fail | はみ出し禁止 |
| C-UX-003 | Safe Area = Canvas - 12px margin | record | 観測のみ |
| C-UX-005 | FitToSheet 四隅が Safe Area 内 | warn | 四隅収まる |
| C-UX-006 | 線の視認性 | warn | **min = 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 = false | min clamp が効いている、Grid を薄くする |