手動でのセットアップが面倒ですか？このページのリンクを Devin のセッションに貼り付けて、すべてセットアップするよう依頼してください。テストスイートはすべてパスし、CI もグリーンで、PR もマージされました——しかし、設定ページはモバイル表示でテキストが重なってしまい、チェックアウトボタンはフッターの裏に隠れて見えなくなっています。ユニットテストやリンターではこうした見た目の崩れを検出できないため、そのまま本番にリリースされ、顧客からの報告で発覚します。リポジトリスキルを使うと、この問題を解決できます。スキルは、任意のリポジトリ内の `.agents/skills//` にコミットする Markdown ファイルです。Devin は接続されているすべてのリポジトリにまたがるすべてのスキルを把握しており、手動でトリガーすることも、関連する状況を検出したときに Devin が自動的にトリガーすることもできます。このスキルは、アプリの起動方法、差分の影響を受けるページへの遷移方法、そして複数のビューポート幅でのスクリーンショット取得手順を Devin に正確に指示します——毎回、すべての PR の前に必ず実行されます。 Devin が従える手順としてチームの手動 QA チェックリストを記述したファイルを、`.agents/skills/visual-regression/visual-regression.md` にコミットしてください: ```markdown theme={null} # ビジュアルリグレッションチェック ## 説明 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 はビジュアルリグレッションチェックを自動的に実行でき、任意のタイミングで手動実行することもできます。「ページが正しく表示されていることを確認する」のような一般的な指示では、結果があいまいになります。このスキルで最も価値が高い点は、アプリの各領域について、どの状態が「正しい」のかをDevinに具体的に伝えることです。スキルにルートごとのセクションを追加します： ```markdown theme={null} ## ルート別チェック ### Dashboard (`/dashboard`) - メトリクスカードはデスクトップで3列グリッドに表示されること - カードはモバイルで1列に並ぶこと - チャートは横スクロールなしで完全に表示されること ### Checkout (`/checkout`) - 「注文する」ボタンはデスクトップとモバイルの両方でスクロールせずに表示されること - 注文サマリーのサイドバーはモバイルでアコーディオンに折りたたまれること - 価格の内訳は小計、税金、合計が別々の行に表示されること ### Settings (`/settings`) - すべてのフォームラベルは対応する入力フィールドと左揃えになっていること - 「保存」ボタンはフォームの下部から操作できること - セクション間のタブナビゲーションはURLのhashを更新すること ``` Devin は diff を読み込み、どのルートが変更されたかを特定し、対応するセクションをたどります — その結果、チェックは汎用的なものではなく、変更箇所に焦点を絞ったものになります。あるエンジニアが、ダッシュボードの 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](/ja/work-with-devin/devin-session-tools) 内のブラウザタブからリアルタイムで確認できます。プロジェクト固有の追加ツールや検証手順に合わせて、このスキルを拡張します: ```txt Storybook コンポーネントのチェックを追加 theme={null} ビジュアルリグレッション用スキルを更新し、 `npm run storybook` を実行して http://localhost:6006 を開き、現在の差分で変更されたコンポーネントの各ストーリーをすべてスクリーンショットするようにします。レンダリングエラーや真っ白なキャンバスが表示されるストーリーがあればフラグを立てて報告します。 ``` ```txt ダークモード検証を追加 theme={null} ビジュアルリグレッション用スキルを更新し、アプリをダークモードに切り替えて（右上のテーマトグルをクリック）、影響を受けるページをすべて撮り直します。ダーク背景上で読めなくなったテキストや、枠線が見えなくなった要素があればフラグを立てて報告します。 ```

{title}