pr-screenshot-docs

PR スクリーンショットのドキュメント

プルリクエストを作成する際に、変更前と変更後のスクリーンショットで UI の変更を記録するためのガイダンスです。

このスキルを使うタイミング

• フロントエンド／UI を変更して PR を作成するとき
• コードレビュー用に視覚的な変更を記録するとき
• デザインの変遷を視覚的に記録するとき
• アプリを実行せずに非同期のデザインレビューを可能にするとき

スクリーンショットのワークフロー

1. 変更を加える前

UI の変更を実装する前に、現在の状態をキャプチャします。

1. browser_resize(width: 320, height: 568)  # Mobile-first
2. browser_navigate to the target page
3. browser_snapshot to identify elements
4. browser_take_screenshot(element: "Target component", ref: "E123")

後で比較できるように、スクリーンショットを保存するか、場所を記録しておきます。

2. 変更を実装した後

変更後の同じ画面をキャプチャします。

1. Refresh or navigate to the updated page
2. browser_snapshot to get updated refs
3. browser_take_screenshot(element: "Target component", ref: "E123")

3. スクリーンショットをアップロードする（任意）

PR の説明に永続的な URL を記載する場合は、画像ホスティングサービスにアップロードします。

# Using curl with 0x0.st (ephemeral hosting)
curl -F '[email protected]' https://0x0.st

# Or use project-specific image storage

注： 0x0.st の URL は期限切れになります。永続的な記録には、PR の説明またはプロジェクトのドキュメント用ストレージで、GitHub のドラッグ＆ドロップによる画像アップロードを使用してください。

PR の説明テンプレート

PR の説明に視覚的な比較セクションを含めます。

## Visual Changes

| Before | After |
|--------|-------|
| ![Before](url-or-path) | ![After](url-or-path) |

### What Changed
- [Specific visual change 1]
- [Specific visual change 2]

ビューポートの推奨サイズ

記録する内容に応じて、ビューポートのサイズを選択します。

対象	幅	高さ	用途
モバイル	320	568	モバイルファーストのレスポンシブ対応
タブレット	768	1024	タブレットのレイアウト
デスクトップ	1280	800	標準的なデスクトップ
ワイド	1440	900	ワイドなデスクトップのレイアウト

ドキュメントではモバイル（320px）をデフォルトにします。モバイルで見栄えがよければ、通常は大きな画面にも適切に拡大できます。

ベストプラクティス

キャプチャの方針

• 変更したコンポーネントに焦点を当てる - レイアウトが変わった場合を除き、ページ全体をキャプチャしないでください
• ビューポートを統一する - 変更前と変更後で同じサイズを使ってください
• インタラクティブな状態をキャプチャする - 関連する場合は、ホバー、フォーカス、アクティブの状態を含めてください
• エラー状態を含める - エラー処理の UI を変更した場合は含めてください

ドキュメントの品質

• 何が変わったかを説明する - レビュアーに推測させないでください
• 理由を説明する - 視覚的な変更をユーザーのメリットに結び付けてください
• アクセシビリティに触れる - 関連する場合は、コントラストやフォーカスインジケーターについて記載してください

キャプチャしないケース

• UI への影響がないバックエンドのみの変更
• 視覚的な変更を伴わないコードのリファクタリング
• テストのみの変更
• 設定の更新

PR ワークフローとの連携

このスキルは /create-pr コマンドを補完します。UI の変更を含む PR を作成する前に、次の手順を実行します。

1. 変更前のスクリーンショットを撮影します（まだ撮影していない場合）
2. 変更を実装します
3. 変更後のスクリーンショットを撮影します
4. PR の説明に比較を含めます
5. create-pr コマンドを実行します

PR セクションの例

## Visual Changes

| Before | After |
|--------|-------|
| ![Before - Button styling](./docs/screenshots/button-before.png) | ![After - Button styling](./docs/screenshots/button-after.png) |

### Changes Made
- Increased button padding from 8px to 12px for better touch targets
- Added subtle shadow for depth
- Improved contrast ratio from 3.5:1 to 4.8:1 (now WCAG AA compliant)

### Tested Viewports
- [x] Mobile (320px)
- [x] Tablet (768px)
- [x] Desktop (1280px)

関連ツール

• visual-validator エージェント - 変更後に厳密なビジュアル QA を行います
• ui-ux-designer エージェント - 反復的なデザインの改善を行います