mcpField
W
web-design-guidelines

web-design-guidelines

github.com/duc01226デザイン・UI1258 回インストール1 週間前に更新
リポジトリ

web-design-guidelines について

web-design-guidelines は、アクセシビリティ、パフォーマンス、レスポンシブデザインなどの観点で UI コードを監査する、レビュー専用スキルです。リリース前やプルリクエストのレビュー向けで、根拠を添えてファイル単位に報告し、アクセシビリティを優先します。

主な機能

  1. 01WCAG 2.2 のアクセシビリティレビュー
  2. 02Core Web Vitals パターンの確認
  3. 03キーボード・フォーム・非同期状態のレビュー
  4. 04レスポンシブとモバイルレイアウトの確認
  5. 05ファイル名と行番号付きの報告

活用シーン

  1. 01リリース前のコンポーネント監査
  2. 02プルリクエストの UI 変更レビュー
  3. 03レスポンシブやアクセシビリティの問題発見

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/duc01226/easyplatform --skill web-design-guidelines

インストール後、Claude Code で/web-design-guidelinesを入力して読み込まれたか確認します。

同梱ファイルreferences/guidelines.md

詳細

Codex 互換性に関する注意:

  • Codex でリポジトリのスキルを呼び出すには、$skill-name を使用します。このミラー版では、従来の Claude の /skill-name 参照を置き換えています。
  • タスクトラッカーの必須事項:ワークフローまたはスキルの手順を実行する前に、すべての手順についてタスクの追跡情報を作成または更新し、進捗の変化に合わせて同期してください。
  • ユーザーへの質問を促すプロンプトは、Codex でユーザーに直接質問することを意味します。
  • Claude 固有のモード切り替え指示がある場合は無視してください。
  • 厳格な実行規約:ユーザーがスキルを明示的に呼び出した場合は、記載どおりにそのスキルのプロトコルを実行してください。
  • サブエージェントの承認:スキルがユーザーによって呼び出された場合、または AI によって検出された場合に、そのプロトコルでサブエージェントが必要とされるなら、そのスキルの有効化により、そのタスクで必要な spawn_agent サブエージェントを使用することが承認されます。
  • ユーザーが事前に逸脱を明示的に承認しない限り、プロトコルの手順を省略、並べ替え、統合しないでください。
  • ワークフロースキルでは、列挙された子スキルの各手順を明示的に実行し、手順ごとに根拠を示してください。
  • 必須の手順またはツールをこの環境で実行できない場合は、対応方法を変更する前に停止し、ユーザーに確認してください。

Codex のプロジェクト参照の読み込み(フックなし)

Codex では、実行時にプロジェクト文書を注入する代わりに、静的なプロジェクト参照を読み込みます。 コーディング、計画、デバッグ、テスト、レビューを行う際は、以下の経路に従ってプロジェクト文書を明示的に開いてください。

必ず読むもの:

  • docs/project-config.json(プロジェクト固有のパス、コマンド、モジュール、ワークフローとテストの設定)
  • docs/project-reference/docs-index-reference.md(docs/project-reference/* カタログ全体への案内)
  • docs/project-reference/lessons.md(常時適用されるガードレールとアンチパターン)

コンテキストがない、または古い場合の経路: docs/project-config.json、ドキュメントのインデックス、lessons.md、CLAUDE.md、AGENTS.md、またはタスクに必要な参照文書が存在しないか古い場合は、プロジェクト固有の通常作業を始める前に、$project-init または限定的なセットアップ経路($project-config、$docs-init、$scan-all、$scan --target=<key>、$claude-md-init)を自動的に実行してください。Codex のミラーまたは AGENTS.md が存在しないか古い場合は、ユーザーに $sync-codex の実行を依頼してください。自動実行はしないでください。

状況に応じて読む文書:

  • プロジェクトの構造/アーキテクチャ/技術スタック/デプロイ/セットアップ(バックエンド、フロントエンド、インフラのいずれの層でも):project-structure-reference.md
  • バックエンド/CQRS/API/ドメイン/エンティティの変更:backend-patterns-reference.md、domain-entities-reference.md
  • フロントエンド/UI/スタイリング/デザインシステム:frontend-patterns-reference.md、scss-styling-guide.md、design-system/README.md
  • 仕様書の作成、docs/specs/ のパス指定、または TC 形式:feature-spec-reference.md、spec-system-reference.md、spec-principles.md
  • 振る舞い/公開契約の変更、または仕様書・テスト・コード間の同期:workflow-spec-test-code-cycle-reference.md と上記の仕様書関連文書
  • 派生仕様インデックス/ERD/再実装ガイド:spec-system-reference.md および docs/specs/ 内の元となる Feature Specs
  • 統合テストの実装/レビュー:integration-test-reference.md
  • E2E テストの実装/レビュー:e2e-test-reference.md
  • コードレビュー/監査:code-review-rules.md と、変更対象のファイルに応じたドメイン文書

すべての文書を無差別に読まないでください。まず docs-index-reference.md を確認し、そこからタスクに関連するファイルだけを開いてください。

クイックサマリー

目標: UI コードをレビューし、WCAG 2.2 のアクセシビリティ、Core Web Vitals のパフォーマンス、最新のウェブデザインのベストプラクティスを確認します。

ワークフロー:

  1. 対象を特定する — 指定されたファイル/パターンを使用するか、レビュー対象のコンポーネントをユーザーに尋ねます
  2. ファイルをスキャンする — 対象ファイルを読み込み、違反パターンを検索します
  3. カテゴリを確認する — アクセシビリティ、キーボード操作、フォーム、非同期状態とフィードバック(読み込み中/エラー/空)、アニメーション、パフォーマンス、タッチ/モバイル、レスポンシブレイアウト(flex-wrap/row→column)、コンテンツ、ダークモード/i18n
  4. 調査結果を報告する — ファイルごとにまとめ、file:line 形式で簡潔に報告し、優先順位を付けた概要を示します

主なルール:

  • レビュー専用のスキルです。問題を見つけますが、修正はしません
  • 優先順位に沿ってカテゴリを確認します(最初にアクセシビリティ)
  • 利用可能な場合は、docs/project-reference/scss-styling-guide.md も参照します

懐疑的な姿勢を保ち、批判的思考と段階的な思考を適用してください。すべての主張には追跡可能な根拠と信頼度のパーセンテージが必要です(Idea は 80% 超である必要があります)。

Web デザインガイドラインのレビュー

UI コードをレビューし、WCAG 2.2、Core Web Vitals、最新のウェブデザインのベストプラクティスへの準拠を確認します。これはレビュー専用のスキルです。問題を見つけますが、修正はしません。

使用する場面

  • リリース前に、アクセシビリティへの準拠を確認するため UI コードをレビューする
  • コンポーネントやページを監査し、WCAG 2.2 の違反がないか確認する
  • コード内の Core Web Vitals パフォーマンスパターンを確認する
  • レスポンシブデザインとモバイルフレンドリーなパターンを検証する
  • PR 前の UI 品質ゲートチェック

使用しない場面

  • UI の構築 — design --lane=marketing(マーケティング/クリエイティブ)または design --lane=product(プロダクト UI)を使用します
  • デザイン仕様の作成 — design-spec を使用します
  • ワークフローに組み込まれた UI レビューゲート — $ui-review を使用します(フロントエンドの変更時に changes-review の並列バッチで実行されるプロジェクトの UI レビューゲートです。長いコンテンツのオーバーフロー、レスポンシブな flex、flex と固定サイズの使い分け、z-index の管理、SCSS/BEM を確認します)。このスキルは $ui-review が相互参照する、汎用的でフレームワークに依存しない a11y/UX チェックリストであり、重複するものではありません。
  • プロジェクトの SCSS レビュー — docs/project-reference/scss-styling-guide.md も確認します

前提条件

  • ガイドラインの完全なリファレンス:references/guidelines.md
  • プロジェクトの SCSS:docs/project-reference/scss-styling-guide.md(利用可能な場合)

ワークフロー

  1. 対象ファイルを特定する

    • ファイル/パターンの引数が指定されている場合 → それを使用します
    • 指定されていない場合 → レビューするファイルまたはコンポーネントをユーザーに確認します
  2. Read と Grep ツールを使用してファイルをスキャンします

  3. カテゴリを優先順位順に確認する

    • アクセシビリティ — セマンティック HTML、ARIA、ラベル、代替テキスト、色のコントラスト、フォーカスインジケーター
    • キーボード操作 — タブ順序、モーダル内のフォーカストラップ、Escape キーの処理
    • フォーム — ラベル、バリデーション、エラー表示、自動補完、貼り付けが禁止されていないこと
    • 非同期状態とフィードバック — すべてのフェッチ/送信/変更処理で、読み込み中のインジケーター(スピナー/スケルトン。画面が真っ白なまま固まる状態は不可)、ユーザーに表示されるエラーと再試行/復旧手段(サイレントエラーや生のスタックトレースは不可)、項目がゼロ件の場合の空状態、二重送信を防ぐ送信コントロールの処理中無効状態を表示します(標準用語:Default / Loading / Disabled / Error / Empty / Success)
    • アニメーション — prefers-reduced-motion を尊重し、transition: all を使用せず、GPU セーフなプロパティのみを使用します
    • パフォーマンス — 画像の寸法を設定し、遅延読み込みを行い、レイアウトのスラッシングを避け、大きなリストには仮想化を使用します
    • タッチ/モバイル — タッチターゲット >= 44px、touch-action: manipulation、セーフエリア
    • レスポンシブレイアウト — 小さなデバイスでも使いやすいこと(リフロー/ブレークポイントに関するすべての懸念を扱います)。最低基準:望ましいのはリフロー(行は flex-wrap または row → column、グリッドは 1 列に折りたたみ、大きな固定 px 値より流動的な min/max/%/rem を使用)。レイアウトを本当にリフローできない場合(テーブル、キャンバス、幅広のグリッド)の許容される代替策は、固定の min-width/min-height と overflow: auto によるスクロールです(スクロールは問題ではなく、欠陥でもありません)。重大な不備となるのは、小さな画面でコンテンツが壊れ、クリップされたり、切れたり、スクロール手段がなくコントロールにアクセスできなくなったりする場合に限ります。大規模なレスポンシブ対応のリファクタリングが必要な場合は、その旨を報告してユーザーに範囲を確認し、黙って書き換えないでください。320/768/1024px のブレークポイントでテストします
    • コンテンツ — 長文/オーバーフローへの対応(text-overflow、折り返し、行数制限)、読みやすい行の長さ (空のコレクション状態 → 非同期状態とフィードバック;ブレークポイント/リフロー → レスポンシブレイアウト)
    • ダークモード/i18n — color-scheme、論理 CSS プロパティ、Intl.* フォーマッター
  4. 以下の出力形式で指摘事項を報告します

UI/UX デザイン原則の確認(9 つの観点)

SYNC:ui-ux-design-principles の 40 の条項(このスキル内に以下全文を記載)は、REVIEW ロールにおけるこのレビューの基準となります。各条項は不適合条件です。これらはステップ 3 のカテゴリに置き換わるものではなく、内容を深めるものです。対象ファイルについて、一度に 1 つの観点に絞った確認を 9 回行ってください。9 つすべてを同時に確認するのは、チェック欄を埋めるだけの作業です。このスキルの証拠に関するルールでも、これはすでに禁じられています。違反を探す前に、まず各 Think: の問いに原則に基づいて答えてください。

すべての指摘事項は、このスキルの既存の出力形式(ファイルごとにまとめた path:line - finding)を維持し、条項 ID を本文に含めます。例:{ui-source-root}/components/Button:42 - UI-3.1 disabled ラベルのコントラストを測定したところ 3.1:1 でした(4.5:1 が必要です)。このスキルでは重要度の段階を定義しておらず、この確認でも追加しません。既存のアクセシビリティ優先の優先順位と Summary の件数を維持してください。

1 つのルールにつき、指摘事項は 1 つ。 ある条項が、このスキルですでに定められているカテゴリのルール(タッチターゲット >= 44px、prefers-reduced-motion、読み込み中/エラー/空の状態、画像の寸法、読みやすい行の長さ)を言い換えている場合は、カテゴリと条項 ID の両方を示して、指摘を 1 つだけ報告してください。2 つに分けて報告してはいけません。

#ディメンション条項深掘りするカテゴリThink:
1視覚的階層とレイアウトUI-1.1-UI-1.5コンテンツ · 非同期状態とフィードバックこの画面で最初に目に入る要素は何ですか。また、それはページの目的そのものですか。グループ化には余白と枠線のどちらを使っていますか。空、読み込み中、エラーの各状態は、そもそもデザインされていますか。
2タイポグラフィUI-2.1-UI-2.5コンテンツこのページではフォントファミリーとウェイトをいくつ使っていますか。本文の表示サイズは何pxですか(ウェブでは16px、モバイルでは17px、14px未満は不可)。1行の長さは何文字ですか(45~75文字)。行送りはいくつですか(本文は1.5、ディスプレイは1.1~1.2)。サイズは6段階の固定スケールに基づいていますか、それとも個別に設定されていますか。
3色とコントラストUI-3.1-UI-3.4アクセシビリティ · ダークモード/国際化描画される前景色と背景色の組み合わせごとの計算済みコントラスト比はいくつですか(テキストは4.5:1、UIの境界は3:1)。色だけで意味を伝えている状態はありますか。ダークモードはデザインされた表示ですか、それとも単なる反転ですか。
4余白とグリッドUI-4.1-UI-4.4レスポンシブレイアウトすべての間隔は、4pxまたは8pxを基準単位とする倍数ですか。間隔はコンテナのgapで設定されていますか、それとも子要素ごとに余白が散在していますか。内側のパディングは次のグループまでの間隔より小さいですか。ブレークポイントはレイアウトが破綻する位置で設定されていますか、それともデバイス名に合わせて設定されていますか。
5インタラクションとフィードバックUI-5.1-UI-5.5キーボード操作 · アニメーション · 非同期状態押してから100ms以内に何が変化しますか。5つの状態のうち、スタイルが設定されていないものはどれですか。スタイル変更後もフォーカスリングは見えますか。この確認は取り消し操作に置き換えられますか。動きは150~250msのイーズアウトで、視差効果を抑える設定に対応していますか。
6ナビゲーションとIAUI-6.1-UI-6.4アクセシビリティ(ランドマーク、スキップリンク) · コンテンツ初めてこの画面にたどり着いたとき、現在地、ここにあるもの、次に進む場所がわかりますか。最上位の移動先はいくつありますか。ラベルにはユーザーが使う言葉が使われていますか、それとも内部用語ですか。この状態にはURLまたは戻るための経路がありますか。
7フォームと入力UI-7.1-UI-7.5フォーム各フィールドについて、現時点で存在する理由は何ですか。入力後もラベルは見えていますか。検証はいつ実行され、メッセージには修正方法が書かれていますか。キーボードやオートコンプリートは入力の種類に合っていますか。入力データはエラー、画面遷移、再読み込み後も保持されますか。
8モバイルとタッチUI-8.1-UI-8.4タッチ/モバイルアイコンではなく、タッチ領域のサイズを測っていますか。8pxの間隔を空けて44x44pt以上ありますか。親指を使うとき、主要な操作はどこにありますか。ジェスチャーだけで操作するものはありますか。ノッチ、ホームインジケーター、キーボードは考慮されていますか。 (対象範囲にタッチ操作を行う画面がない場合は、その理由を明記して省略してください。)
9速度と体感速度UI-9.1-UI-9.4パフォーマンス · 非同期状態とフィードバック読み込み中の各要素の領域には何が表示され、読み込み完了時にレイアウトがずれますか。スケルトンとスピナーは意図的に選択されていますか。楽観的な更新が取り消されるとき、その変化は明確に表示されますか。オフライン、タイムアウト、再試行はデザインされた状態ですか。
優先順位: docs/project-reference/scss-styling-guide.md およびプロジェクトのデザインシステムに関するドキュメントは、これらの条項より優先されます。実際に競合する場合は、両方の内容を報告してユーザーに判断を仰いでください。黙って解決してはいけません。

出力形式

ファイルごとにまとめてください。file:line 形式を使用してください。指摘は簡潔にしてください。前置きは不要です。

## {ui-source-root}/components/Button

{ui-source-root}/components/Button:42 - icon button missing aria-label
{ui-source-root}/components/Button:55 - animation missing prefers-reduced-motion check
{ui-source-root}/components/Button:67 - transition: all -> list specific properties
{ui-source-root}/components/Button:89 - div with onClick -> use <button>

## {ui-source-root}/components/Modal

{ui-source-root}/components/Modal:12 - missing overscroll-behavior: contain
{ui-source-root}/components/Modal:78 - no focus trap for modal dialog

## {ui-source-root}/components/Card

[check] No issues found

## Summary

- 4 accessibility issues
- 2 performance issues
- 1 UX issue
- Priority: Fix accessibility issues first (WCAG compliance)

例

例 1:アクセシビリティレビュー

入力:「ユーザープロフィールコンポーネントのアクセシビリティをレビューしてください」

**対応:**コンポーネントファイルを読み、セマンティック HTML、ARIA 属性、ラベルの関連付け、色のコントラストパターン、キーボード操作、フォーカスインジケーターを確認します。違反をそれぞれ file:line 形式で報告します。

例 2:ビジュアルの仕上げに関するレビュー

入力:「ダッシュボードページのデザインのベストプラクティスを確認してください」

**対応:**アニメーションのパフォーマンス(transition: all を使わない)、画像の最適化(寸法、遅延読み込み)、レスポンシブパターン(ブレークポイント、安全領域)、タイポグラフィ(行の高さ、最大幅)、空の状態への対応を確認します。カテゴリ別に指摘を報告します。

関連スキル

スキル代わりに使用する場合
designUI の構築(レビューではありません)— --lane=marketing(クリエイティブ)または --lane=product(アプリの UI)
design-specデザイン仕様の作成
$ui-reviewプロジェクトの UI レビューゲート(オーバーフロー、レスポンシブな flex、z-index、SCSS/BEM)。フロントエンドの変更時に changes-review バッチで実行します

[IMPORTANT] タスク管理を使って、作業を始める前にすべての作業を小さなタスクに分割してください。各ファイルを読むためのタスクも含めます。これにより、長いファイルによるコンテキストの喪失を防げます。単純なタスクの場合、AI はスキップしてよいか、必ずユーザーに尋ねてください。

AI のミスを防ぐために — すべてのタスクで回避すべき失敗パターン:

コンテキストが変化したらファイルを読み直す。 コンテキストの圧縮、再開、長時間の作業によって記憶が古くなる可能性があります。作業する前に、ファイルの現在の状態を確認してください。 生成した内容をソースの根拠と照合する。 AI は API、名前、主張、ドキュメントの事実を幻覚します。記録または参照する前に、関連するソースを確認してください。 削除または名前変更の前に、下流の参照を確認する。 成果物を削除すると、ドキュメント、生成されたミラー、設定、呼び出し元が古くなる可能性があります。まず参照を洗い出してください。 編集後に影響の連鎖全体をたどる。 定義を変更すると、派生する出力や利用側を見落とすことがあります。完了と判断する前に、影響を受ける連鎖を確認してください。 最初の出力だけでなく、影響を受けるすべての出力を検証する。 チェックが 1 つ成功しても、すべてのチェックが成功したとは限りません。変更によって影響を受ける可能性のある出力面をすべて検証してください。 既存の値は意図されたものと考え、変更または不具合として指摘する前に、その理由を確認する。 定数、上限、フラグ、しきい値、文言、パターンを変更または報告する前に、周辺のコンテキストと履歴、呼び出し元での順序、および同じ規約を使う 2 つ以上の類似した呼び出し箇所を確認してください。「何を」は記されていても「なぜ」がないドキュメントは、理由の説明が不足しているということであり、ガードが欠けている証拠ではありません。 行動する前に曖昧さを明らかにし、黙って選択しない。 複数の妥当な解釈がある場合は、明示的に質問するか、リスクを添えて前提を示してください。 中間状態ではなく、システムが責任を持つ最終結果を検証する。 非同期処理を検証するときは、最終的なビジネス状態を確認してください。共有インフラストラクチャ内の配信や再試行の記録は、同時実行中の別プロセスも書き込めるため、決して検証対象にしないでください。こうしたチェックは単独で実行すると成功しますが、同じインフラストラクチャを別の処理が共有した途端に不安定になります。 共有ガイダンスは、その対象となる役割に関連する内容に保つ。 汎用的なガイダンスは、それを受け取るすべてのスキルまたはエージェントに役立つ必要があります。コード固有の要件は、コード固有のプロトコルにのみ記載してください。 批判的思考の姿勢 — 批判的思考と順序立てた思考を実践してください。すべての主張について、たどって確認できる根拠が必要です。行動するには、確信度が80%を超えている必要があります。 ハルシネーションの防止: 推測を事実として提示してはいけません。すべての主張の出典を示し、不確実な点は率直に認め、出力に誤りがないか自己確認し、複数の独立した情報源と照合し、自分の確信度も疑ってください。根拠のない確信こそ、あらゆるハルシネーションの根本原因です。 UI/UX デザイン原則(改訂 1.0 — 40 項目、Web + モバイル) — ユーザーインターフェースを設計、計画、実装、レビューするあらゆるタスクに適用する作業ルール集です。特定の項目で指定されていない限り、両方のプラットフォームに適用します(§8 はモバイル/タッチ)。項目は ID で参照します:UI-3.1、UI-8.2。

優先順位: プロジェクトのデザインシステム/SCSS/フロントエンドパターンのドキュメントは、これらの項目より優先されます。これらの項目は一般的な好みより優先されます。実際に矛盾する場合は、双方をユーザーに提示します。黙って解決してはいけません。— 理由:プロジェクト独自の記録済みの決定が判断基準です。何も定められていない場合は、これらの項目がデフォルトとなります。

1.0 視覚的階層とレイアウト

  • UI-1.1 1 画面につき、焦点は 1 つにします。最初に見せる要素が 2 つ競合する場合は、どちらかを目立たなくします。
  • UI-1.2 視線を誘導する順序:サイズ → ウェイト → 色 → 位置。別の手段を加える前に、最も手軽で有効な手段を使います。
  • UI-1.3 枠線ではなく、近接によってグループ化します。余白ならすっきり区切れますが、枠の中に枠を作ってはいけません。
  • UI-1.4 共通の端に揃えます。理由の説明できないインデントは、すべてミスに見えます。
  • UI-1.5 空、読み込み中、エラーの各状態を最初に設計します。全データが揃った状態を設計するのは簡単です。

2.0 タイポグラフィ

  • UI-2.1 書体は最大 2 種類、各書体のウェイトは最大 3 種類にします。種類が増えると、表現の幅ではなく一貫性のなさに見えます。
  • UI-2.2 本文の文字サイズは Web で 16px、モバイルで 17px にします。ユーザーが読む必要のある文字を 14px 未満にしてはいけません。
  • UI-2.3 1 行の長さは 45~75 文字にします。コンテナーではなく、行幅を制限します。
  • UI-2.4 行間は文字サイズに反比例させます:本文は 1.5、ディスプレイ用は 1.1~1.2。
  • UI-2.5 エンジニアリングと共有する、名前付きの 6 段階からなる固定の文字サイズスケールを使います。個別の文字サイズを設定してはいけません。

3.0 色とコントラスト

  • UI-3.1 コントラスト比はテキストで 4.5:1、UI の境界で 3:1 にします。測定してください。明るい画面で目視判断してはいけません。
  • UI-3.2 アクセントカラーは 1 色にし、役割も 1 つにします。あらゆる場所に使われるアクセントカラーは、何も示せません。
  • UI-3.3 色だけで意味を伝えてはいけません。アイコン、ラベル、または位置を組み合わせます。
  • UI-3.4 ダークモードはライトモードの単純な反転ではありません。面の明度を上げて高さを示し、真っ白なテキストは和らげます。

4.0 余白とグリッド

  • UI-4.1 余白の単位は 1 種類にして、倍数で使います。4px または 8px を基準とし、すべての間隔をその倍数にします。
  • UI-4.2 余白は子要素ではなくコンテナーに持たせます。gap を使い、マージンは例外に限ります。
  • UI-4.3 内側は狭く、グループ間は広くします。内側のパディングは、常に次のグループまでの間隔より小さくします。
  • UI-4.4 ブレークポイントはデバイスではなくコンテンツに合わせます。レイアウトが機能しなくなる位置で切り替えます。

5.0 インタラクションとフィードバック

  • UI-5.1 結果が出るまで時間がかかる場合でも、すべてのアクションに 100ms 未満で応答します。
  • UI-5.2 5 つの状態(デフォルト、ホバー、フォーカス、アクティブ、無効)をすべて指定し、該当する場合は読み込み中の状態も指定します。
  • UI-5.3 確認より取り消しを優先します。取り消せない操作に限り、確認を求めます。
  • UI-5.4 モーションで原因と結果を明確にします:150~250ms、イーズアウト、視差効果を減らす設定に準拠します。
  • UI-5.5 視認できるフォーカスリングを残します。デザインと合わない場合はスタイルを変更しますが、削除してはいけません。

6.0 ナビゲーションと IA

  • UI-6.1 すべての画面で、今いる場所、ここにあるもの、次に進む先が分かるようにします。
  • UI-6.2 最上位の遷移先は最大 5 つにします。最上位を詰め込むより、階層を深くする方が適切です。
  • UI-6.3 内部用語ではなく、ユーザーが使う言葉でラベルを付けます。チーム内の語彙は分類体系ではありません。
  • UI-6.4 すべての状態に URL または戻る経路を用意します。ディープリンクとハードウェアの戻る操作で、適切な場所に移動できるようにします。

7.0 フォームと入力

  • UI-7.1 質問を減らします。すべてのフィールドについて、今それが必要な理由を説明できるようにします。
  • UI-7.2 ラベルは常に表示します。プレースホルダーはヒントであり、ラベルではありません。
  • UI-7.3 入力中ではなく、フォーカスが外れたときに検証します。エラーはフィールドの近くに表示し、修正方法を伝えます。
  • UI-7.4 データの種類に合わせてキーボードを選びます。すべてのフィールドで、適切な入力タイプ、自動補完、自動大文字化を設定します。
  • UI-7.5 入力済みのデータを失わせてはいけません。エラー、画面遷移、更新後も入力内容を保持します。

8.0 モバイルとタッチ (モバイル/タッチの画面)

  • UI-8.1 タップ領域は 44×44pt 以上、間隔は 8px にします。タップ領域は、表示されているアイコンより大きくても構いません。
  • UI-8.2 主なアクションは画面の下 3 分の 1 に配置します。そこが親指の届く範囲です。
  • UI-8.3 ジェスチャーはショートカットとして使い、唯一の操作方法にしてはいけません。スワイプできるものは、タップでも操作できるようにします。
  • UI-8.4 セーフエリアとキーボードを考慮します。ノッチ、ホームインジケーター、画面上のキーボードはいずれも表示領域を占有します。

9.0 速度と体感速度

  • UI-9.1 データより先に画面の構造を表示します。既知のレイアウトにはスケルトンを使い、待ち時間が不明な場合に限りスピナーを使います。
  • UI-9.2 楽観的に成功を仮定します。まず UI を更新し、その後に整合性を確認します。失敗時はロールバックを明示します。
  • UI-9.3 読み込みが発生する要素のためにスペースを確保します。画像、広告、フォントによってレイアウトをずらしてはいけません。
  • UI-9.4 遅い接続を想定して設計します。オフライン、タイムアウト、再試行は状態であり、例外ではありません。

役割に応じた適用 — 項目はすべて共通ですが、タスクによって適用方法が異なります:

役割義務
画面を DESIGN / PLAN する項目を成果物に反映します:空/読み込み中/エラー状態を最初に指定する(UI-1.5)、5 つの状態をすべて列挙する(UI-5.2)、文字サイズスケールと余白の単位を宣言する(UI-2.5、UI-4.1)
コンポーネントを IMPLEMENT する完了前のチェック項目:状態・トークン・コントラスト・フォーカスリング・タップ領域・確保済みスペース(UI-5.2、UI-2.5/UI-4.1、UI-3.1、UI-5.5、UI-8.1、UI-9.3)
UI コードまたはデザイン成果物を REVIEW する各項目を不合格の条件とし、すべての指摘に UI-<clause> + file:line + 重大度を記載します。チェックボックスを一通り埋めるだけの確認は禁止します。セクションごとに焦点を絞って確認します。
UI システムを SCAN / 文書化するプロジェクトが意図的に逸脱している箇所を記録し、優先されるドキュメントが記録上の判断基準となるようにします。

省略できるのは変更にユーザー向けの画面がない場合(バックエンドのみ、ツール、ドキュメント)に限ります。省略を明示し、見落としではなく監査可能な判断として記録します。 必ず注意 重要かつ順序立てた思考を行ってください。すべての主張には、適切な根拠を追跡できる形で示してください(リポジトリ/コードに関する主張は file:line、調査、製品、コンテンツ、ドキュメントに関する主張はソース URL または成果物内のセクション)。確信度が 80%を超える場合にのみ実行し、60%未満の場合は推奨しないでください。ハルシネーションを防ぐため、推測を事実として提示しないでください。不確かな場合は率直に認め、独立して相互参照し、自分の確信度にも懐疑的でいてください。

必ず注意 AI の誤りを防いでください。生成した内容を根拠に照らして検証し、削除や名前変更の前に依存先を追跡し、影響を受けるすべての出力を検証してください。コンテキストを失った後はファイルを読み直し、実行前に曖昧さを明らかにしてください。

プロジェクトプロトコルオーバーレイ — このスキルを実行する前に、このスキルに適用される PROJECT オーバーレイルールを解決してください。プロジェクトのスキルプロトコルインデックス(デフォルトは docs/project-reference/skill-protocols-reference.md。docs/project-config.json の referenceDocs エントリでパスが上書きされている場合はそのパス)の Target 列とこのスキル名を照合し、最も具体的に一致する階層のみを適用します(完全一致 > グロブ > *)。この優先順位は、オーバーレイ同士にのみ適用され、このスキル自体に優先するものではありません。一致した本文のみを読み、<protocols-dir>/<Name>.md として解決してください。行の Body リンクは表示テキストであり、読み込み先ではありません。一致した本文が欠落している、または不正な形式の場合は、その旨を報告してスキップしてください。インデックスの Description から本文を再構成してはいけません。インデックスが存在しない場合、または一致するものがない場合は、オーバーレイなしで処理を続け、何も報告しないでください。完全な契約は .claude/skills/project-skill-protocol/references/registry.md にあります。

オーバーレイは追加のみです。このスキル独自のプロトコルにルールを追加するものであり、すでに定められたルールを置き換えたり、上書きしたり、無効にしたり、再解釈したりすることはありません。すべてのオーバーレイを削除しても、このスキルは文書化された動作と完全に同じでなければなりません。オーバーレイは簡潔な指針であり、権限を拡大するものではありません。ワークフローのゲート、Git の規律、レビューゲート、ユーザー確認ゲートを免除することはできません。オーバーレイとスキルの間に実際の矛盾がある場合、または同じ具体性のオーバーレイ同士が直接矛盾する場合は、両方をユーザーに提示してください。黙って解決してはいけません。

必ず注意 実行前に、このスキルに適用されるプロジェクトプロトコルオーバーレイを解決してください。最も具体的に一致する階層のみを適用します(完全一致 > グロブ > *。この優先順位はオーバーレイ同士にのみ適用され、このスキル自体に優先するものではありません)。<protocols-dir>/<Name>.md にある、一致した本文のみを読み込んでください。本文が欠落している、または不正な形式の場合は報告し、再構成してはいけません。オーバーレイは追加のみであり、このスキル独自のルールを置き換えることはありません。また、簡潔な指針であり、権限を拡大するものではありません。同じ具体性のオーバーレイ間に矛盾がある場合は、ユーザーに提示してください。

  • 必ず注意 ユーザー向けの画面には、40 の UI/UX デザイン原則(UI-1.1~UI-9.4)を適用してください。焦点は 1 つに絞る、関連要素を近くにまとめる、空・読み込み・エラー状態を最初に設計する(§1)・書体は 2 種類以下、本文は Web では 16px/モバイルでは 17px、14px 未満は禁止、45~75ch、固定の 6 段階スケール(§2)・測定値でテキストのコントラスト比 4.5:1/境界線のコントラスト比 3:1 を確保、アクセントカラーは 1 色、色だけに意味を担わせない、ダークモードは単なる反転ではない(§3)・4/8px 単位を 1 つに統一、マージンより gap を使用、内側は詰め、要素間は広く、ブレークポイントはコンテンツに合わせる(§4)・応答は 100ms 未満、5 つすべての状態を用意、確認より取り消しを優先、動きを減らす設定に従う 150~250ms のイーズアウト、常に見えるフォーカスリング(§5)・現在地/ここにあるもの/次の行き先を示す、トップレベルの行き先は 5 つ以下、ユーザーの言葉を使う、URL または戻る経路を用意する(§6)・入力項目を減らす、ラベルを常に表示する、フォーカスを外したときに検証する、キーボード操作を揃える、入力内容を絶対に失わない(§7)・タップ領域は 44×44pt 以上、間隔は 8px、主要操作は画面下 3 分の 1 に配置、ジェスチャーだけを唯一の操作方法にしない、安全領域を確保する(§8)・データより先に構造を用意する、ロールバックを明示した楽観的更新、スペースを確保する、低速接続時の状態を用意する(§9)。プロジェクトのデザインシステム文書はこれらの条項より優先されます。実際に矛盾する場合はユーザーに提示し、黙って解決してはいけません。指摘にはすべて UI-<clause> と file:line を付けてください。ユーザー向けの画面が存在しない変更に限り、適用を省略し、その旨を明記してください。

締めくくりの注意事項

重要・必ず注意 作業を始める前に、タスク追跡を使って作業を小さな TODO タスクに分割してください

必ず注意 — 適用中のプロトコル(このスキルに含まれる SYNC/共有ブロックの簡潔な要約):

  • AI のミス防止: 生成した内容を根拠と照合し、後続の参照を追跡し、影響を受けるすべての出力を検証し、コンテキストを失った後は読み直し、曖昧さを明示してください。
  • 批判的思考: 主張ごとに file:line の根拠を追跡してください。行動に移す際は、確信度を 80% 超としてください。

重要・必ず注意 新しいコードを作成する前に、コードベース内で類似パターンを 3 つ以上検索してください 重要・必ず注意 すべての主張に file:line の根拠を示してください(行動に移す際は確信度を 80% 超としてください) 重要・必ず注意 9 つの次元からなる UI/UX デザイン原則の確認を実施してください — 40 の節(UI-1.1~UI-9.4)すべてを、次元ごとに 1 つずつ確認します。各指摘には、既存の出力形式で UI-<clause> と file:line を記載してください。また、プロジェクトの SCSS/デザインシステムのドキュメントは各節より優先されます(実際に矛盾する場合は、両方の立場をユーザーに提示してください) 重要・必ず注意 作業品質を確認するための最終レビュー用 TODO タスクを追加してください

[TASK-PLANNING] 作業に取り掛かる前に、タスクの範囲を分析し、タスク追跡を使って小さな TODO タスクとサブタスクに体系的に分割してください。

フックレス・プロンプト・プロトコル・ミラー(自動同期)

ソース:.claude/.ck.json + .claude/skills/shared/sync-inline-versions.md(:full ブロック)+ .claude/scripts/lib/hookless-prompt-protocol.cjs

[WORKFLOW-EXECUTION-PROTOCOL] [BLOCKING] ワークフロー実行プロトコル — 必須・重要・必ず遵守・重大。いかなる理由があっても省略しないでください。

汎用的な移植性の境界: 再利用可能なスキルとプロトコルのテキストはプロジェクトに依存しないものとし、プロジェクト固有の規約は docs/project-config.json と docs/project-reference/ から確認します。共有 AI-SDD は shared/sdd-artifact-contract.md に従って適用します。docs/project-config.json と docs/project-reference/docs-index-reference.md を読み、そこに記載されているプロジェクトリファレンスドキュメントを開いてください。仕様、テストケース、動作変更、公開コントラクト、または docs/specs/ に関する作業では、ドキュメントインデックスに記載されたローカルの仕様ドキュメント(feature-spec-reference.md、spec-system-reference.md、spec-principles.md、および仕様・テスト・コードの同期が必要な場合は workflow-spec-test-code-cycle-reference.md)を経由してください。いずれかのファイル、または必須のリファレンスドキュメントが見つからないか古くなっている場合は、通常のプロジェクト固有の作業に進む前に $project-init(または $project-config、$docs-init、$scan-all、$scan --target=<key> などの限定的な下位ルート)を自動実行してください。この共有コンテキストとローカルドキュメントが利用可能であれば、サポート対象の任意の AI ツールで実行できます。

  1. 検出: プロンプトが明示的なスラッシュ形式のスキル/ワークフローコマンドで始まる場合は、それを直接実行します。それ以外の場合は、プロンプトをワークフローカタログとスキルリストに照らし合わせます。
  2. 分析: 最適な方法を選択します。直接実行、スキルの呼び出し、標準ワークフローの開始、またはカスタムのステップ構成です。
  3. 自動選択: 最適な方法を自分で選択します。直接実行、スキル、標準ワークフロー、カスタムワークフローのどれにするか、ユーザーに選択を求めてはいけません。
  4. 開始: 選択したワークフローでは $start-workflow <workflowId> を呼び出します。選択したスキルではそのスキルを呼び出します。カスタムワークフローではカスタムステップを順に実行します。直接実行ではタスクに進みます。
  5. タスクの作成: 選択した経路に複数のステップがある場合、実行前にすべてのワークフロー/スキル/カスタムステップについてタスクを追跡します。
  6. 並列化: タスクリストの実行前に、各タスクに PAR(入力が独立しており、書き込み対象が他のすべての PAR タスクと重複しない)または SEQ(ブロックする依存関係を明記)を付け、PAR タスクをウェーブにグループ化し、ウェーブ計画を宣言して、各ウェーブのサブエージェントを1つのメッセージで起動します。各ウェーブでは全員の完了を待ち、サブエージェント自身の定義でさらなる並列化が認められている場合を除き、ファンアウトは1階層までとします。独立したタスクを逐次処理するのは不備です。共有の書き込み対象、出力を利用するタスク、単純な単一ファイルの作業、スキルやワークフローで順序が明示されている作業、ユーザー承認が必要な段階は並列化しないでください。
  7. 実行: コンテキスト指示にある Workflow Step Advancement & Parallel Phases のルールに従って進めます。ステップの進行はモデル主導です。サブエージェントの完了はインライン呼び出しと同様にステップを進めます。並列フェーズのグループは全員の完了を待つバリアです(すべてのメンバーが完了した後にのみ進み、決して逐次化しません)。

共有 AI-SDD プロトコルマーカー

ソース:.claude/skills/shared/sync-inline-versions.md

SYNC:ai-sdd-artifact-contract

AI-SDD 成果物契約 — 共有する仕様駆動開発のルールは、移植可能な状態に保ち、ソース側で管理します。

  1. 再利用可能な AI-SDD の原則は .claude に置き、リポジトリ固有のパス、コマンド、担当者、製品、形式はプロジェクト設定または参照ドキュメントに記載します。
  2. サイクルを維持します:spec -> plan -> tasks -> implement -> verify -> update spec/docs。
  3. すべての要件または不変条件を、判断、タスク、TC/テスト、ソースの根拠、ドキュメント/仕様の更新まで追跡します。
  4. コードから仕様への抽出は、正規の仕様オーナーが承認するまでは参照専用として扱います。
  5. 同期されたコンテキストがあれば、サポート対象の AI ツールで計画、実装、レビュー、検証を行えます。複数のツールを使うかどうかは任意です。
  6. まず .claude のソースを更新してから、生成されたミラーを同期します。.agents、.codex、AGENTS.md を手動で編集しないでください。— 理由:ミラーは生成された成果物であり、次回の同期時に手動編集内容が上書きされます
  7. docs/project-config.json、ルートの指示ファイル、または必須のプロジェクト参照ドキュメントが欠落しているか古い場合は、通常のプロジェクト固有の作業を行う前に、$project-init または適切な下位レベルの手順を自動実行します。

有効な参照先: アクティブなスキルルート内の shared/sdd-artifact-contract.md。


SYNC:ai-sdd-artifact-contract:reminder

  • 必須 shared/sdd-artifact-contract.md を適用し、再利用可能な AI-SDD は .claude に、ローカルルールはプロジェクトのドキュメントに保持します。
  • 必須 コードから仕様への抽出は、正規の承認を得るまで参照専用です。サポート対象の AI ツールであれば、同期されたコンテキストを使って実行できます。
  • 必須 生成されたミラーを同期する前に .claude のソースを更新します。.agents、.codex、AGENTS.md を手動で編集しないでください。
  • 必須 プロジェクト設定、ルートの指示ファイル、または必須の参照ドキュメントが欠落しているか古い場合は、プロジェクト固有の作業を $project-init または適切なセットアップ手順に自動的に振り分けます。 [TASK-PLANNING] [必須] ワークフローまたはスキルの手順を実行する前に、計画したすべての手順についてタスク追跡を作成/更新し、各手順の開始時と完了時に同期してください。

[LESSON-LEARNED-REMINDER] [BLOCKING] タスク計画と継続的な改善 — 必須。省略しないでください。

作業を始める前に、作業を小さなタスクに分割して追跡します。最後のタスクに「AI のミスと教訓を分析する」を追加します。

教訓の抽出 — 症状への対処ではなく、根本原因のみを扱います:

  1. 症状ではなく、失敗モード(推論や前提の誤り)を特定します。「間違った enum 値を使った」ではなく、「ソースを読まずに API が存在すると仮定した」とします。
  2. 一般性を確認します。この失敗モードは 3 つ以上の状況/コードベースに当てはまりますか?当てはまらない場合は、もう一段階抽象化します。
  3. 普遍的なルールとして記述します。プロジェクト固有の名前、パス、クラスを取り除きます。どのコードベースでも役立つ内容にします。
  4. 統合します。同じ失敗モードに起因する複数のミスは、1 つの教訓にまとめます。
  5. 再発ゲート:「このリマインダーがなければ、今後のセッションで再発するか?」いいえ → $learn は省略します。
  6. 自動修正ゲート:「$code-review/$code-simplifier/$security-review/$lint で検出できるか?」はい → 代わりにレビュー用スキルを改善します。
  7. 両方のゲートを通過した場合は、ユーザーに $learn の実行を依頼します。 [CRITICAL-THINKING-MINDSET] 批判的思考と段階的思考を適用します。あらゆる主張に追跡可能な証拠を求め、行動する際は確信度を 80% 超とします。 ハルシネーション防止の原則: 推測を事実として提示しないでください。すべての主張に出典を示し、不確実性を率直に認め、出力に誤りがないか自己確認し、独立した情報源と照合し、自分の確信を疑ってください。証拠のない確信が、あらゆるハルシネーションの根本原因です。 AI の注意力の原則(初頭効果・新近効果): 長いプロンプト/プロトコルでは、最も重要なルールを上部と下部の両方に 3 つずつ配置し、長いコンテキストでも指示への準拠を維持します。 目標主導の実行: まず成功基準を定め、検証できるまで繰り返し、観察可能なチェックに合格した場合にのみ終了します。 テストは意図を検証します: テストは現在の動作をなぞるだけでなく、ビジネスルールや不変条件を保護し、保護対象の意図が崩れたときに失敗する必要があります。

よくある AI のミスを防ぐ(システムの教訓)

  • コンテキスト圧縮後はファイルを再読込してください。 編集するには、同じコンテキスト内で事前に Read している必要があります。圧縮によって読込状態は消去されます。編集前に再読込してください。
  • 一括置換後は古い用語を grep してください。 AI は検索・置換の完全性を過信します。一括編集後はリポジトリ全体を grep し、ドキュメント/設定/カタログに参照漏れがないか確認してください。
  • 削除前に下流の参照を確認してください。 削除の影響は、ドキュメントやコードの陳腐化へ連鎖します。削除前に参照元ファイルを洗い出してください。
  • 記憶を失った後、新しく作成する前に既存の状態を確認してください。 圧縮によってこれまでの作業の記憶が消去されます。作業を再開するときは現在の状態を確認し、決してむやみに重複作成しないでください。
  • AI 生成コンテンツは実際のコードと照合してください。 AI は API、クラス名、メソッドシグネチャを幻覚することがあります。ドキュメントへの記載や参照の前に、grep して実在を確認してください。
  • 編集後は依存関係を最後までたどってください。 定義を変更しても、その下流の利用箇所を見落とすことがあります。依存関係をすべてたどってください。
  • 名前を変更するときは、利用側の全ファイル形式を grep してください。 ファイル形式によっては、参照先が見つからなくてもエラーなしで無視されます。コード、テンプレート、設定、生成ファイルを検索してください。
  • 正しさを検証するときは、すべてのコードパスをたどってください。 コードが存在することと、実行されることは同じではありません。正常系だけでなく、早期リターン、エラー分岐、条件によるスキップもたどってください。
  • ソースが変わったら、正規データを埋め込んでいるドキュメントも更新してください。 派生データ(ワークフロー、スキーマ、設定など)を直接記載しているドキュメントは、気づかないうちに古くなります。ソースと合わせて、該当する埋め込みドキュメントをすべて更新してください。
  • コンテキスト復旧後は、サブエージェントの結果を検証してください。 親エージェントが圧縮されている間にバックグラウンドエージェントが完了している場合があります。完了したはずだと信じず、出力を grep して確認してください。
  • 対象の全一覧とサブエージェントへの割り当てを照合してください。 カテゴリごとにサブエージェントを並行実行すると、境界上の項目を見落とすことがあります。作業を進める前に、割り当ての和集合を対象一覧と照合してください。
  • サブエージェントが引き継ぐ知識は、そのエージェントの .md 定義に書かれた内容だけです。組み込みの Explore ではなく、カスタムエージェント種別を使用してください。 ツールの採用には、権限+知識+適用(番号付きワークフロー手順)が必要です。
  • サブエージェントの調査結果は最後にまとめてではなく、随時保存してください。 長時間実行されるサブエージェントは、最終書き込み前に打ち切られることがあり、調査結果が失われます。報告ファイルにセクションごとに追記するよう指示してください。
  • デバッグ時は修正する前に「どちらの責任か」を確認してください。 呼び出し元(データが誤っている)と呼び出し先(処理が誤っている)をたどり、責任のある層を修正してください。症状が表れる箇所だけを修正してはいけません。
  • テスト失敗時は、追跡や編集の前に暫定判定を記録してから調査してください。 次の 5 つの分類をすべて使ってください。SOURCE-WRONG(本番コードが意図に反している)、TEST-WRONG(アサーション/セットアップが古くなっている)、TEST-NOT-OPTIMAL(妥当だが脆弱、または情報量の少ないテスト)、ENVIRONMENT-BLOCKED(外部状態のため判定できない)、AMBIGUOUS(意図や証拠から安全に選べない)。その後、根本原因をたどり、適用される仕様(存在する場合は docs/specs/**)とソースの両方に照らして検証してください。成功を無理に得るために、アサーションを弱めたり、スキップを追加したり、タイムアウトを緩めたり、ソースを変更したりしてはいけません。
  • 抽出/リファクタリング後は、削除した名前をすべて grep してください。 主要ファイルの作業完了は、他のファイルもクリーンであることを意味しません。完了を宣言する前に、対象範囲全体で削除したシンボルを一つずつ grep してください。
  • 既存の値には意図があると考え、変更したり不具合だと指摘したりする前に、必ず理由を確認してください。 パターンマッチで「誤り」と決めつけると、背景を見落とします。定数/上限/フラグ/しきい値を変更または報告する前に、コメント、git blame、呼び出し元の処理順序(値を正しくする保証は、通常、該当行の直前に実行されるコードにあります)、同じ規約を使っている 2 つ以上の類似した呼び出し箇所を確認してください。理由なしに WHAT(何をするか)だけを記したドキュメントは、根拠が欠けているのではなく、WHY(なぜそうするか)の説明が不足しているということです。検証作業でも、正確な file:line の引用が証明するのは転記が正確であることだけであり、不具合の存在ではありません。
  • 最初の出力だけでなく、影響を受けるすべての出力を検証してください。 一つのビルドが成功しても、すべてが成功したとは限りません。複数のスタックにまたがる変更(バックエンド/フロントエンド/テスト/ドキュメント)では、すべての出力を検証してください。
  • 近くにあるパターンをコピーする前に、適合性を評価してください。 最も近い例が適合するとは限りません。新しいコンテキストが同じ制約、基底クラス、スコープ、ライフタイムを共有するか確認してください。
  • デバッグでは全体を優先し、目についた箇所に飛びつかないでください。 最初に思いついた原因へすぐ飛びつかないでください。前提条件(設定、環境変数、パス、DB、エンドポイント、認証情報、バージョン、DI、データ)をすべて列挙し、それぞれを証拠(推論ではなく grep/クエリ)に照らして検証してください。「何があればこの仮説は否定されるか?」と問い、何も答えられないなら、それは仮説ではありません。最もコストの高い失敗は、バグが一度も疑われていない層にあるのに、「明らか」だと思い込んだ層をさらに深掘りすることです。
  • 変更は最小限にし、差分テストを適用してください(コンテキストに合わせて判断)。 2 つのモードがあります。(1)バグ修正 → すべての行がバグに直接関係するようにし、スタイル変更はしないでください。不要になったインポートを削除してよいのは、あなたの変更によって不要になったものだけです。(2)レビュー/機能強化 → 改善を実装し、「主な依頼を超える機能強化:[内容]」と明示してください。黙ってスコープを拡大しないでください。差分テスト:「X を依頼されていなかったとしても、この行は存在していたか?」いいえなら、削除するか明示してください。
  • 実装前に曖昧さを明らかにし、黙って解釈を選ばないでください。 複数の妥当な解釈がある場合は、それぞれの工数とともに提示してください。「[依頼] は(1)[N 時間]、(2)[N 時間]のいずれかと解釈できます。どちらが重要ですか?」まずスコープ/形式/量/制約に関する前提を列挙してください。より簡単な方法がある場合は、そのことも伝えてください。黙って選ばないでください。
  • [必須の最初のアクション] 応答する前に、必ず適切なスキルまたはワークフローを有効にしてください。 ワークフローカタログとスキル一覧に照らしてタスクを確認し、スキルの呼び出し、または $start-workflow <workflowId> で実行してください。確認する前に回答やコード作成をしてはいけません。省略はプロトコル違反です。
  • Why-Review の敵対的な視点は、計画、判断、設計をレビューするときに適用してください。 基本姿勢は VALIDATOR(妥当性を確認する側)ではなく SKEPTIC(懐疑的な側)です。却下された代替案の最も強い論拠を組み立て、述べられた理由を一つずつ逆転させて「何を犠牲にするのか」を問い、上位 2~3 個の前提をストレステストし、プレモーテム(「リリースしたが 3 か月後に失敗した。何が壊れたのか?」)を行い、作成者が見落とした代替案を 1~2 個提示してください。セクションがあるだけでは十分ではありません。重要なのは、因果関係に基づく推論、具体的な軽減策、証拠です。「より良い」や「注意深く監視する」だけでは不十分です。
  • 大規模なレビューでは、サブエージェントへのプロンプトで報告書の書き込みを最初に行わせてください。 多数のファイルを扱うサブエージェントは、最終書き込みの前に予算を使い切り、調査結果を失うことがあります。プロンプトは、(1)報告書の書き込みを最初に明示する成果物とする、(2)まとめてではなくファイル/セクションごとに追記する、(3)読み込みで予算を使い切らないようスコープを限定する、という構成にしてください。報告ファイルを残さず文の途中で打ち切られた場合は、同じプロンプトを再試行せず、より狭いスコープで再実行してください。
  • コンテキスト圧縮後は、続行する前に以前の各フェーズの結果をすべて再検証してください。 要約が示すのは意図であり、環境の状態(git のインデックス、ファイルシステム、プロセス)ではありません。再開時はまず git status を確認し、変更したファイルを再読込し、ファイルシステムを検証してください。証拠で確認されるまでは、「完了した」という主張もすべて未検証の仮説です。
  • OOM/メモリ:行サイズより先に行数を確認してください。 次の順にトリアージします。(1)上限のないクエリ — 条件を設定するトリガーとなる DB フィルターがありませんか? DB 側にフィルターを移せば、OOM を解消できます。(2)行サイズが大きいですか? プロジェクションを使えば比例して減らせます。費用対効果では、プロジェクションより行数削減が優先です。
  • システムが担う最終結果をアサートし、インフラストラクチャが担う中間状態をアサートしないでください。 非同期処理(キュー/ブローカーへの配信、再試行、バックグラウンドジョブ、キャッシュ、レプリケーション)をテストする場合は、最終的なビジネス/エンティティの状態をアサートしてください。配信の記録、つまり消費/送信ステータス、試行回数、最終エラー、ブローカー、スケジューラー、outbox/inbox テーブル内の行の有無や件数をアサートしてはいけません。この記録は共有インフラストラクチャに存在し、並行して動く任意のプロセス(別のワーカー、2 つ目のレプリカ、残っているローカルコンテナー)から書き込めるうえ、通常は決定的な共有キーが使われます。そのため、こうしたアサーションは気づかないうちにシステムではなく開発者の環境をテストします。単独実行では成功しても、同じブローカー+データベースをほかの何かが共有した途端に不安定になります。すべてのアサーションで、次の判定の問いを使ってください。「どのプロセスが処理しても、この結果は成り立つか?」いいえなら、代わりに収束後のデータ状態をアサートしてください。系として、プロセスローカルな障害注入やプロセス内テレメトリーを、任意のプロセスが実行する処理のゲートとして使うことはできません。負荷増幅に使ってください(有効化 → 範囲を限定した時間枠 → 無効化 → 収束をアサート)。前提条件として使ってはいけません。
  • ドメイン概念を汎用/共有/インフラストラクチャ層に持ち込まないでください。 再利用可能な層(共有ライブラリ、フレームワーク、インフラモジュール)は、利用側に固有のドメイン概念(テナント/顧客/製品 ID、ビジネスエンティティ、機能ルール)を一切参照してはいけません。漏れがコンパイルされ、実行されると、再利用可能なはずの層が一つの利用側と結合していても、レビューで気づかれずに通過してしまいます。共有型からドメイン情報を排除し、サブクラス化/コンポジションを通じて、ドメインフィールド/ロジックを利用側へ移してください。理由:一つの利用側のドメインに結合した層は、もはや再利用可能ではありません。

コメント