Skip to main content

各PRを出す前にビジュアルリグレッションを検知する

影響を受けたすべてのページをDevinにスクリーンショットさせ、PRをオープンする前にレイアウト崩れを検知・フラグ付けするリポジトリスキルです。
AuthorCognition
Category機能開発
Featuresスキル
1

問題: CSSバグがユニットテストをすり抜ける

テストスイートはすべてパスし、CI もグリーンで、PR もマージされました——しかし、設定ページはモバイル表示でテキストが重なってしまい、チェックアウトボタンはフッターの裏に隠れて見えなくなっています。ユニットテストやリンターではこうした見た目の崩れを検出できないため、そのまま本番にリリースされ、顧客からの報告で発覚します。リポジトリスキルを使うと、この問題を解決できます。スキルは、任意のリポジトリ内の .agents/skills/<your-skill>/ にコミットする Markdown ファイルです。Devin は接続されているすべてのリポジトリにまたがるすべてのスキルを把握しており、手動でトリガーすることも、関連する状況を検出したときに Devin が自動的にトリガーすることもできます。このスキルは、アプリの起動方法、差分の影響を受けるページへの遷移方法、そして複数のビューポート幅でのスクリーンショット取得手順を Devin に正確に指示します——毎回、すべての PR の前に必ず実行されます。
2

「visual-regression」スキルをリポジトリに追加する

Devin が従える手順としてチームの手動 QA チェックリストを記述したファイルを、.agents/skills/visual-regression/visual-regression.md にコミットしてください:
# ビジュアルリグレッションチェック

## 説明
PRを開く前に、アプリをローカルで起動し、現在の差分の影響を受けるすべてのページをデスクトップおよびモバイルの幅でスクリーンショットしてください。
レイアウトの問題が見つかった場合はフラグを立ててください。

## 前提条件
- Docker が起動していること（データベース用）
- ポート 3000 が使用可能であること

## セットアップ
1. 依存関係をインストールする: `npm install`
2. サービスを起動する: `docker-compose up -d postgres redis`
3. マイグレーションを実行する: `npx prisma migrate dev`
4. テストデータをシードする: `npm run db:seed`
5. 開発サーバーを起動する: `npm run dev`
6. ターミナルに "Ready on http://localhost:3000" と表示されるまで待つ

## ビジュアルチェック
1. 現在の git diff を確認し、影響を受けるページを特定する
2. 影響を受ける各ページについて:
   a. ブラウザで http://localhost:3000/{route} を開く
   b. 幅 1280px（デスクトップ）でスクリーンショットを撮る
   c. ブラウザを幅 375px（モバイル）にリサイズする
   d. モバイル幅でスクリーンショットを撮る
   e. 以下を確認する: テキストの重なり、他の要素の背後に隠れた要素、横スクロール、到達できないボタンやリンク、画像やアイコンの欠落、コンソールエラー
3. 問題が見つかった場合は、ページ URL、ビューポートの幅、および問題の説明とともに一覧にまとめる

## PR を開く前に
1. `npm run lint` を実行し、問題があれば修正する
2. `npm test` を実行し、すべてのテストがパスすることを確認する
3. すべてのスクリーンショットを PR の説明に含める
4. 問題が見つかった場合は、PR 本文の冒頭に一覧を記載する
このファイルはコードと一緒に配布されます。コミットされると、Devin はこれを利用可能なスキルとして認識します。セッションでこのリポジトリ内の UI ファイルを扱うたびに、Devin はビジュアルリグレッションチェックを自動的に実行でき、任意のタイミングで手動実行することもできます。
3

チェック内容をページごとにカスタマイズする

「ページが正しく表示されていることを確認する」のような一般的な指示では、結果があいまいになります。このスキルで最も価値が高い点は、アプリの各領域について、どの状態が「正しい」のかをDevinに具体的に伝えることです。スキルにルートごとのセクションを追加します：
## ルート別チェック

### Dashboard (`/dashboard`)
- メトリクスカードはデスクトップで3列グリッドに表示されること
- カードはモバイルで1列に並ぶこと
- チャートは横スクロールなしで完全に表示されること

### Checkout (`/checkout`)
- 「注文する」ボタンはデスクトップとモバイルの両方でスクロールせずに
  表示されること
- 注文サマリーのサイドバーはモバイルでアコーディオンに折りたたまれること
- 価格の内訳は小計、税金、合計が別々の行に表示されること

### Settings (`/settings`)
- すべてのフォームラベルは対応する入力フィールドと左揃えになっていること
- 「保存」ボタンはフォームの下部から操作できること
- セクション間のタブナビゲーションはURLのhashを更新すること
Devin は diff を読み込み、どのルートが変更されたかを特定し、対応するセクションをたどります — その結果、チェックは汎用的なものではなく、変更箇所に焦点を絞ったものになります。
4

実際のリグレッションバグを捕捉するところをご覧ください

あるエンジニアが、ダッシュボードの CSS グリッドレイアウトをレスポンシブにするために grid-template-columns: repeat(3, 1fr) から repeat(auto-fit, minmax(200px, 1fr)) に変更したとします。ユニットテストはすべてパスします — ロジックは変わっていません。しかし、モバイルではカードがビューポートからはみ出してしまいます。Devin がコード変更を終えると、自動的にこのスキルに従って動作します:
  1. アプリを起動 — 依存関係をインストールし、Docker を起動し、マイグレーションを実行し、データをシードし、開発サーバーを起動する
  2. diff を読む — src/components/Dashboard.tsx が変更されたことを確認し、それを /dashboard ルートに対応付ける
  3. 1280px でスクリーンショット — 3 カラムのグリッドが正しくレンダリングされる
  4. 375px でスクリーンショット — 水平方向のオーバーフローを検知: カードがビューポートに収まっていない
  5. 問題をフラグ — “Horizontal scroll detected on /dashboard at 375px width — metric cards overflow the viewport” と報告する
  6. CSS を修正 — overflow-x: hidden を追加し、minmax の最小値を 150px に調整する
  7. 再度スクリーンショット — 両方の幅で修正を確認する
  8. PR を作成 — ビフォー／アフターのスクリーンショットと修正内容を説明に含める
これらの動作は、session workspace 内のブラウザタブからリアルタイムで確認できます。
5

お使いのスタックに合わせて拡張

プロジェクト固有の追加ツールや検証手順に合わせて、このスキルを拡張します: