screenshotting-changelog

スクリーンショット変更履歴

ビジュアルや UI の変更を含むプルリクエストを準備するときに、このスキルを使用します。変更前と変更後のスクリーンショットを撮影し、レビュー担当者がすばやく確認できるビジュアル変更履歴を作成します。

手順

1. 変更前の状態を撮影する — 変更を加える前（またはベースブランチで）、開発サーバーを起動し、影響を受けるページのスクリーンショットを撮影します。

   git stash  # or checkout the base branch
   

   開発サーバーを起動したら、次の操作を行います。

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000/affected-page", "take_screenshot_afterwards": true }
   

   Tool: browser_take_screenshot
   Arguments: { "fullPage": true, "filename": "before-homepage.png" }
   

   影響を受けるページまたはコンポーネントの状態ごとに繰り返します。

2. フィーチャーブランチに切り替える — 変更を適用します。

   git stash pop  # or checkout the feature branch
   

   開発サーバーがホットリロードするまで待つか、再起動します。

3. 変更後の状態を撮影する — 同じページのスクリーンショットを撮影します。

   Tool: browser_take_screenshot
   Arguments: { "fullPage": true, "filename": "after-homepage.png" }
   

4. 変更履歴を生成する — 見た目がどのように変わったかを説明する概要を作成します。

   ## Visual Changes
   
   ### Homepage
   **Before:**
   ![before](before-homepage.png)
   
   **After:**
   ![after](after-homepage.png)
   
   Changes: Updated hero section layout, new CTA button color, added testimonials section.
   

5. プルリクエストの説明に含める — ビジュアル変更履歴をプルリクエストの本文に貼り付け、レビュー担当者がアプリをローカルで実行しなくても変更をすぐに確認できるようにします。

バリエーション

• レスポンシブ表示の比較：browser_resize を使用して、モバイル（375px）、タブレット（768px）、デスクトップ（1280px）の幅でスクリーンショットを撮影します。
• ダークモードの比較：アプリにダークモードの切り替え機能がある場合は、両方のテーマを撮影します。
• インタラクティブな状態：ホバー状態、開いたモーダル、入力済みフォーム、エラー状態を撮影します。

注意事項

• スクリーンショットはワークスペースに保存されます。Markdown で参照するか、プルリクエストにアップロードできます。
• コンポーネント単位のスクリーンショットを撮影するには、Storybook の URL または特定のコンポーネントのルートに移動します。
• この方法はデザイン重視のプルリクエストで特に有効です。バックエンドのみの変更では省略してください。