<!-- Powered by BMAD™ Core -->

# Create Front-end Spec from Local Wireframe (Auto Screenshot)

## Purpose
ローカルHTMLワイヤーフレームを自動でヘッドレスブラウザで撮影し、スクリーンショットをフロントエンド仕様に埋め込んだうえで、テンプレートに沿って仕様書を生成します。

## Inputs
- screen_id: 画面ID（例: AD-033）
- wireframe_html_path: ローカルHTMLワイヤーフレームの絶対パス
- project_root: プロジェクトルートの絶対パス（例: /Users/xxx/work/your-project）

## Defaults
- 仕様書出力先: `documents/frontend_spec/{{screen_id}}.md`
- スクリーンショット出力先: `documents/assets/{{screen_id}}-wireframe.png`
- テンプレート: `{root}/templates/front-end-spec-tmpl.yaml`

## Steps
1. Python Playwright をプリウォーム（環境に未導入なら導入）
2. Chromium で `file://` スキームのローカルHTMLを開き、1280x720 で撮影
3. 画像を `documents/assets/{{screen_id}}-wireframe.png` に保存
4. テンプレート `front-end-spec-tmpl.yaml` を用いて仕様書を作成
   - 変数: `screen_id`, `wireframe_screenshot_relpath`（例: `../assets/{{screen_id}}-wireframe.png`）
5. 生成された仕様書に「Wireframe Screenshots」セクションが含まれることを確認

## Execution Notes
- 撮影後に画像パスを相対に変換し、仕様書から参照可能にします。
- 既存ファイルがある場合は追記/更新の方針をユーザーに確認してください。

## Commands
```bash
# 1) Ensure playwright env is ready (idempotent)
python3 -m pip install --user playwright
python3 -m playwright install chromium

# 2) Take screenshot
python3 - <<'PY'
from playwright.sync_api import sync_playwright
import os
screen_id = os.environ.get('BMAD_SCREEN_ID')
html = os.environ.get('BMAD_WIREFRAME_HTML')
project_root = os.environ.get('BMAD_PROJECT_ROOT')
out_abs = os.path.join(project_root, 'documents', 'assets', f"{screen_id}-wireframe.png")
os.makedirs(os.path.dirname(out_abs), exist_ok=True)
with sync_playwright() as p:
    b = p.chromium.launch()
    page = b.new_page(viewport={"width":1280, "height":720})
    page.goto(f"file://{html}")
    page.wait_for_timeout(1200)
    page.screenshot(path=out_abs)
    b.close()
print(out_abs)
PY

# 3) Render from template (tooling-dependent - example placeholder)
# bmad render --template {root}/templates/front-end-spec-tmpl.yaml \
#   --out documents/frontend_spec/${BMAD_SCREEN_ID}.md \
#   --var screen_id=${BMAD_SCREEN_ID} \
#   --var wireframe_screenshot_relpath=../assets/${BMAD_SCREEN_ID}-wireframe.png
```

## Elicitation
本タスクは非対話で実行可能ですが、出力先が既存の場合は上書き可否の確認が必要です。