chrome-devtools

Codex 互換性に関する注記：

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

Codex でのプロジェクト参照資料の読み込み（フックなし）

Codex では、Claude のフックによるドキュメントの自動挿入は行われません。 コーディング、計画、デバッグ、テスト、レビューを行う際は、このルーティングに従ってプロジェクトのドキュメントを明示的に開いてください。

必ず読むもの：

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

状況に応じて読むドキュメント：

• バックエンド／CQRS／API／ドメイン／エンティティの変更：backend-patterns-reference.md、domain-entities-reference.md、project-structure-reference.md
• フロントエンド／UI／スタイル／デザインシステム：frontend-patterns-reference.md、scss-styling-guide.md、design-system/README.md
• 仕様／テストケースの計画または TC マッピング：feature-docs-reference.md
• 統合テストの実装／レビュー：integration-test-reference.md
• E2E テストの実装／レビュー：e2e-test-reference.md
• コードレビュー／監査作業：変更対象のファイルに応じて、code-review-rules.md と上記のドメイン関連ドキュメント

すべてのドキュメントを無差別に読まないでください。まず docs-index-reference.md を確認し、タスクに関連するファイルだけを開いてください。

クイックサマリー

目標： 永続セッションを使った Puppeteer CLI スクリプトで、ブラウザー操作、デバッグ、パフォーマンス分析を自動化します。

ワークフロー：

1. 構造を確認する — 不明なページの ARIA ツリーを取得するには aria-snapshot.js を使用します
2. 参照で操作する — 安定した参照を使って要素をクリック、入力、ホバーするには select-ref.js を使用します
3. 証拠を収集する — スクリーンショットを撮影し、コンソールログを収集し、ネットワークトラフィックを監視します
4. 分析する — パフォーマンスのプロファイリング、アクセシビリティ監査、ビジュアルリグレッションチェックを行います

主なルール：

• Windows/macOS では headed モードを使用し、headless は Linux/WSL/CI でのみ使用します
• すべてのスクリプトは、構造化処理のために JSON を出力します
• スナップショットはタイムスタンプを付けて .claude/chrome-devtools/snapshots/ に保存します

懐疑的に考えてください。批判的思考と順を追った思考を適用してください。すべての主張には、たどることのできる証拠と確信度（パーセンテージ）が必要です（Idea は 80% を超えている必要があります）。

Chrome DevTools エージェントスキル

永続セッションを使った Puppeteer スクリプトによるブラウザー自動化。すべてのスクリプトは JSON を出力します。

スキルの場所

スキルはプロジェクトスコープまたはユーザースコープに存在します。優先順位：プロジェクトスコープ > ユーザースコープ。

# Detect skill location
SKILL_DIR=""
if [ -d ".claude/skills/chrome-devtools/scripts" ]; then
  SKILL_DIR=".claude/skills/chrome-devtools/scripts"
elif [ -d "$HOME/.claude/skills/chrome-devtools/scripts" ]; then
  SKILL_DIR="$HOME/.claude/skills/chrome-devtools/scripts"
fi
cd "$SKILL_DIR"

アプローチの選択

シナリオ	アプローチ
ソースを利用できるサイト	最初にソースコードを読み、セレクターを直接記述します
レイアウトが不明な場合	意味的な要素の検出に aria-snapshot.js を使用します
視覚的な確認	レンダリングを検証するためにスクリーンショットを撮影します
問題のデバッグ	コンソールログを収集し、セッションストレージを使って分析します
アクセシビリティ監査	意味的な構造の分析に ARIA スナップショットを使用します

自動ブラウジングの実行モード

• 現在の OS を検出し、Linux、WSL、または CI 環境で実行する場合にのみ、ヘッドレスでブラウザーを起動します。
• macOS/Windows では、デバッグを容易にするため、ブラウザーは常にヘッドありモードで実行されます。
• 実際のユーザーインタラクションをシミュレートするため、複数のスクリプト／セッションを並列で実行します。
• 異なるデバイスタイプ（モバイル、タブレット、デスクトップ）をシミュレートするため、複数のスクリプト／セッションを並列で実行します。
• スキルはプロジェクトスコープまたはユーザースコープに存在できます。優先順位：プロジェクトスコープ > ユーザースコープ。

ARIA スナップショット（要素の検出）

ページ構造が不明な場合は、aria-snapshot.js を使用して、意味的なロール、アクセシブルな名前、状態、安定した要素参照を含む、YAML 形式のアクセシビリティツリーを取得します。

ARIA スナップショットを取得する

# Generate ARIA snapshot and output to stdout
node aria-snapshot.js --url https://example.com

# Save to file in snapshots directory
node aria-snapshot.js --url https://example.com --output ./.claude/chrome-devtools/snapshots/page.yaml

YAML 出力の例

- banner:
  - link "Hacker News" [ref=e1]
    /url: https://news.ycombinator.com
  - navigation:
    - link "new" [ref=e2]
    - link "past" [ref=e3]
    - link "comments" [ref=e4]
- main:
  - list:
    - listitem:
      - link "Show HN: My new project" [ref=e8]
      - text: "128 points by user 3 hours ago"
- contentinfo:
  - textbox [ref=e10]
    /placeholder: "Search"

ARIA 表記の解釈

表記	意味
[ref=eN]	インタラクティブ要素の安定した識別子
[checked]	チェックボックス／ラジオボタンが選択されています
[disabled]	要素が無効になっています
[expanded]	アコーディオン／ドロップダウンが開いています
[level=N]	見出しの階層（1～6）
/url:	リンク先
/placeholder:	入力欄のプレースホルダーテキスト
/value:	現在の入力値

参照 ID で操作する

スキルはプロジェクトスコープまたはユーザースコープに存在できます。優先順位：プロジェクトスコープ > ユーザースコープ。 参照 ID で要素を操作するには、select-ref.js を使用します。

# Click element with ref e5
node select-ref.js --ref e5 --action click

# Fill input with ref e10
node select-ref.js --ref e10 --action fill --value "search query"

# Get text content
node select-ref.js --ref e8 --action text

# Screenshot specific element
node select-ref.js --ref e1 --action screenshot --output ./logo.png

# Focus element
node select-ref.js --ref e10 --action focus

# Hover over element
node select-ref.js --ref e5 --action hover

スナップショットを保存する

スキルはプロジェクトスコープまたはユーザースコープに存在できます。優先順位：プロジェクトスコープ > ユーザースコープ。 分析用のスナップショットを <project>/.claude/chrome-devtools/snapshots/ に保存します。

# Create snapshots directory
mkdir -p .claude/chrome-devtools/snapshots

# Capture and store with timestamp
SESSION="$(date +%Y%m%d-%H%M%S)"
node aria-snapshot.js --url https://example.com --output .claude/chrome-devtools/snapshots/$SESSION.yaml

ワークフロー：不明なページ構造

1. 要素を検出するためにスナップショットを取得します。

   node aria-snapshot.js --url https://example.com
   

2. YAML 出力から対象を特定します（例：ボタンの [ref=e5]）。

3. 参照 ID で操作します。

   node select-ref.js --ref e5 --action click
   

4. スクリーンショットまたは新しいスナップショットで結果を検証します。

   node screenshot.js --output ./result.png
   

ローカル HTML ファイル

スキルはプロジェクトスコープまたはユーザースコープに存在できます。優先順位：プロジェクトスコープ > ユーザースコープ。 重要：ローカル HTML ファイルを file:// プロトコル経由でブラウズしてはいけません。必ずローカルサーバー経由で配信してください。 理由：file:// プロトコルでは、多くのブラウザー機能（CORS、ES モジュール、fetch API、サービスワーカー）がブロックされます。ローカルサーバーを使用すると、適切な HTTP の動作が保証されます。

# Option 1: npx serve (recommended)
npx serve ./dist -p 3000 &
node navigate.js --url http://localhost:3000

# Option 2: Python http.server
python -m http.server 3000 --directory ./dist &
node navigate.js --url http://localhost:3000

注：ポート 3000 が使用中の場合は、lsof -i:3000 で利用可能なポートを確認し、別のポートを使用してください。

クイックスタート

# Install dependencies
cd .claude/skills/chrome-devtools/scripts
npm install  # Installs puppeteer, sharp, debug, yargs

# Test (browser stays running for session reuse)
node navigate.js --url https://example.com
# Output: {"success": true, "url": "...", "title": "..."}

Linux/WSL のみ：Chrome のシステムライブラリを用意するため、最初に ./install-deps.sh を実行してください。

セッションの永続化

ブラウザーの状態は、WebSocket エンドポイントファイル（.browser-session.json）を介してスクリプトの実行間で保持されます。

デフォルトの動作：スクリプトは接続を解除しますが、セッションを再利用できるようブラウザーは実行したままにします。

# First script: launches browser, navigates, disconnects (browser stays running)
node navigate.js --url https://example.com/login

# Subsequent scripts: connect to existing browser, reuse page state
node fill.js --selector "#email" --value "[email protected]"
node fill.js --selector "#password" --value "secret"
node click.js --selector "button[type=submit]"

# Close browser when done
node navigate.js --url about:blank --close true

セッション管理：

• --close true：ブラウザーを閉じ、セッションをクリアします
• デフォルト（フラグなし）：次のスクリプトのためにブラウザーを実行したままにします

利用可能なスクリプト

スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。 すべて .claude/skills/chrome-devtools/scripts/ にあります。

スクリプト	目的
navigate.js	URL に移動します
screenshot.js	スクリーンショットを撮影します（5MB 超の場合は Sharp で自動圧縮）
click.js	要素をクリックします
fill.js	フォームフィールドに入力します
evaluate.js	ページのコンテキストで JS を実行します
snapshot.js	インタラクティブ要素を抽出します（JSON 形式）
aria-snapshot.js	ARIA アクセシビリティツリーを取得します（参照付き YAML 形式）
select-ref.js	ARIA スナップショットの参照を使って要素を操作します
console.js	コンソールメッセージ／エラーを監視します
network.js	HTTP リクエスト／レスポンスを追跡します
performance.js	Core Web Vitals を測定します

ワークフローループ

1. 実行：単一タスクに特化したスクリプトを実行します
2. 観察：JSON 出力を確認します
3. 評価：完了状況を確認します
4. 決定：次のアクションを決めます
5. 反復：完了するまで繰り返します

カスタムテストスクリプトの作成

スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。 複雑な自動化では、<project>/.claude/chrome-devtools/tmp/ にスクリプトを作成します。

# Create tmp directory for test scripts
mkdir -p $SKILL_DIR/.claude/chrome-devtools/tmp

# Write a test script
cat > $SKILL_DIR/.claude/chrome-devtools/tmp/login-test.js << 'EOF'
import { getBrowser, getPage, disconnectBrowser, outputJSON } from '../scripts/lib/browser.js';

async function loginTest() {
  const browser = await getBrowser();
  const page = await getPage(browser);

  await page.goto('https://example.com/login');
  await page.type('#email', '[email protected]');
  await page.type('#password', 'secret');
  await page.click('button[type=submit]');
  await page.waitForNavigation();

  outputJSON({
    success: true,
    url: page.url(),
    title: await page.title()
  });

  await disconnectBrowser();
}

loginTest();
EOF

# Run the test
node $SKILL_DIR/.claude/chrome-devtools/tmp/login-test.js

カスタムスクリプトの主な原則：

• 単一目的：1 つのスクリプトにつき 1 つのタスク
• 最後に必ず disconnectBrowser() を呼び出します（ブラウザーの実行を継続します）
• セッションを完全に終了するときのみ closeBrowser() を使用します
• 解析しやすいよう JSON を出力します
• page.evaluate() コールバック内ではプレーンな JavaScript のみを使用します

スクリーンショット

スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。 分析用のスクリーンショットは <project>/.claude/chrome-devtools/screenshots/ に保存します。

# Basic screenshot
node screenshot.js --url https://example.com --output ./.claude/chrome-devtools/screenshots/page.png

# Full page
node screenshot.js --url https://example.com --output ./.claude/chrome-devtools/screenshots/page.png --full-page true

# Specific element
node screenshot.js --url https://example.com --selector ".main-content" --output ./.claude/chrome-devtools/screenshots/element.png

自動圧縮（Sharp）

5MB を超えるスクリーンショットは Sharp を使って自動圧縮されます（ImageMagick より 4～5 倍高速です）。

# Default: compress if >5MB
node screenshot.js --url https://example.com --output ./.claude/chrome-devtools/screenshots/page.png

# Custom threshold (3MB)
node screenshot.js --url https://example.com --output ./.claude/chrome-devtools/screenshots/page.png --max-size 3

# Disable compression
node screenshot.js --url https://example.com --output ./.claude/chrome-devtools/screenshots/page.png --no-compress

分析用のスクリーンショットは <project>/.claude/chrome-devtools/screenshots/ に保存します。

コンソールログの収集と分析

スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。

ログの取得

# Capture all logs for 10 seconds
node console.js --url https://example.com --duration 10000

# Filter by type
node console.js --url https://example.com --types error,warn --duration 5000

セッションストレージのパターン

分析用のログは <project>/.claude/chrome-devtools/logs/<session>/ に保存します。

# Create session directory
SESSION="$(date +%Y%m%d-%H%M%S)"
mkdir -p .claude/chrome-devtools/logs/$SESSION

# Capture and store
node console.js --url https://example.com --duration 10000 > .claude/chrome-devtools/logs/$SESSION/console.json
node network.js --url https://example.com > .claude/chrome-devtools/logs/$SESSION/network.json

# View errors
jq '.messages[] | select(.type=="error")' .claude/chrome-devtools/logs/$SESSION/console.json

根本原因分析

# 1. Check for JavaScript errors
node console.js --url https://example.com --types error,pageerror --duration 5000 | jq '.messages'

# 2. Correlate with network failures
node network.js --url https://example.com | jq '.requests[] | select(.response.status >= 400)'

# 3. Check specific error stack traces
node console.js --url https://example.com --types error --duration 5000 | jq '.messages[].stack'

要素の検索

スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。 操作する前に snapshot.js を使ってセレクターを確認します。

# Get all interactive elements
node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'

# Find buttons
node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="button")'

# Find by text content
node snapshot.js --url https://example.com | jq '.elements[] | select(.text | contains("Submit"))'

エラーからの復旧

スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。 スクリプトが失敗した場合：

# 1. Capture current state (without navigating to preserve state)
node screenshot.js --output ./.claude/skills/chrome-devtools/screenshots/debug.png

# 2. Get console errors
node console.js --url about:blank --types error --duration 1000

# 3. Discover correct selector
node snapshot.js | jq '.elements[] | select(.text | contains("Submit"))'

# 4. Try XPath if CSS fails
node click.js --selector "//button[contains(text(),'Submit')]"

よくあるパターン

Web スクレイピング

node evaluate.js --url https://example.com --script "
  Array.from(document.querySelectorAll('.item')).map(el => ({
    title: el.querySelector('h2')?.textContent,
    link: el.querySelector('a')?.href
  }))
" | jq '.result'

フォームの自動化

node navigate.js --url https://example.com/form
node fill.js --selector "#search" --value "query"
node click.js --selector "button[type=submit]"

パフォーマンステスト

node performance.js --url https://example.com | jq '.vitals'

スクリプトオプション

すべてのスクリプトで以下を使用できます。

• --headless false - ブラウザーウィンドウを表示します
• --close true - ブラウザーを完全に閉じます（デフォルト：実行を継続）
• --timeout 30000 - タイムアウトを設定します（ms）
• --wait-until networkidle2 - 待機方法を指定します スキルはプロジェクトスコープまたはユーザースコープで利用できます。優先順位：プロジェクトスコープ > ユーザースコープ。

トラブルシューティング

スキルはプロジェクトスコープまたはユーザースコープに存在できます。優先順位：プロジェクトスコープ > ユーザースコープ。

エラー	解決策
Cannot find package 'puppeteer'	scripts ディレクトリで npm install を実行します
libnss3.so が見つからない（Linux）	./install-deps.sh を実行します
要素が見つからない	snapshot.js を使って正しいセレクターを探します
スクリプトがハングする	--timeout 60000 または --wait-until load を使います
スクリーンショットが 5 MB を超える	自動圧縮されます。サイズを小さくするには --max-size 3 を使います
セッションが古い	.browser-session.json を削除して再試行します

スクリーンショットの分析：画像が表示されない

スクリーンショットに画像が表示されない場合、アニメーションのトリガーを待っている可能性があります。

1. スクロールでトリガーされるアニメーション：まず要素が表示領域に入るまでスクロールします

   node evaluate.js --script "document.querySelector('.lazy-image').scrollIntoView()"
   # アニメーションを待機
   node evaluate.js --script "await new Promise(r => setTimeout(r, 1000))"
   node screenshot.js --output ./result.png
   

2. 順次実行されるアニメーションキュー：さらに待ってから再試行します

   # 1 回目の試行
   node screenshot.js --url http://localhost:3000 --output ./attempt1.png
   
   # アニメーションが完了するまで待機
   node evaluate.js --script "await new Promise(r => setTimeout(r, 2000))"
   
   # スクリーンショットを再試行
   node screenshot.js --output ./attempt2.png
   

3. Intersection Observer によるアニメーション：ページ内をスクロールしてトリガーします

   node evaluate.js --script "window.scrollTo(0, document.body.scrollHeight)"
   node evaluate.js --script "await new Promise(r => setTimeout(r, 1500))"
   node evaluate.js --script "window.scrollTo(0, 0)"
   node screenshot.js --output ./full-loaded.png --full-page true
   

リファレンスドキュメント

• ./references/cdp-domains.md - Chrome DevTools Protocol のドメイン
• ./references/puppeteer-reference.md - Puppeteer API のパターン
• ./references/performance-guide.md - Core Web Vitals の最適化
• ./scripts/README.md - スクリプトオプションの詳細

---

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

AI のミスを防ぐ — あらゆるタスクで避けるべき失敗パターン：

削除する前に、後続の参照を確認してください。 コンポーネントを削除すると、ドキュメントやコードに古さが連鎖的に生じます。削除前に、参照しているすべてのファイルを特定してください。 AI が生成した内容を実際のコードと照合してください。 AI は API、クラス名、メソッドシグネチャを幻覚することがあります。ドキュメントに記載したり参照したりする前に、必ず grep で実在を確認してください。 編集後は依存関係を末端まで追跡してください。 定義を変更しても、そこから派生する後続の変数や利用箇所を見落とすことがあります。必ず依存関係をすべて追跡してください。 正しさを検証する際は、すべてのコードパスを追跡してください。 コードが存在することを確認しても、実行されることの確認にはなりません。正常系だけでなく、早期リターン、エラー分岐、条件によるスキップも必ず追跡してください。 デバッグ時は、修正する前に「どちらの責任か」を確認してください。 バグが呼び出し元（誤ったデータ）にあるのか、呼び出し先（誤った処理）にあるのかを追跡してください。責任のある層で修正し、症状が現れている箇所にパッチを当てないでください。 既存の値は意図的なものと考え、変更前に理由を確認してください。 定数、上限値、フラグ、パターンを変更する前に、コメントを読み、git blame を確認し、周辺のコードを調べてください。 最初の出力だけでなく、影響を受けるすべての出力を検証してください。 複数のスタックに関わる変更では、すべての出力を検証する必要があります。チェックが 1 つ成功しても、すべてのチェックが成功したことにはなりません。 全体を先に見るデバッグ — 直近の注意箇所に飛びつかないでください。 失敗を調査する際は、まずすべての前提条件（設定、環境変数、DB 名、エンドポイント、DI 登録、データの前提条件）を列挙し、コード層の仮説を立てる前に、それぞれを根拠に照らして検証してください。 変更は最小限に — 差分テストを適用してください。 バグ修正では、変更する各行がバグに直接結び付いている必要があります。隣接するコードのスタイル変更や改善はしないでください。機能強化タスクでは、改善を実装し、その内容を明示してください。 コーディング前に曖昧さを明らかにし、黙って選択しないでください。 依頼に複数の解釈がある場合は、それぞれの作業量の見積もりを提示して確認してください。全レコード対象、ファイルベース、またはより複雑な方法を前提にしないでください。

批判的思考の姿勢 — 批判的思考と段階的思考を適用してください。行動に移すには、すべての主張に追跡可能な証拠が必要で、確信度は 80% を超えていなければなりません。 幻覚の防止： 推測を事実として提示しないでください。すべての主張に出典を示し、不確実性を率直に認め、出力の誤りを自己点検し、独立して照合し、自分の確信を疑ってください。確かな根拠のない確信は、あらゆる幻覚の根本原因です。

必ず注意 批判的思考を適用してください。すべての主張には追跡可能な証拠が必要で、行動に移すには確信度が 80% を超えていなければなりません。幻覚を防ぎ、推測を事実として提示しないでください。

必ず注意 AI のミス防止策を適用してください。全体を先に見るデバッグ、責任のある層での修正、コーディング前の曖昧さの明示、コンパクション後のファイルの再読を徹底してください。

最後に確認すること

• 必須・重要・必ず注意 作業を始める前に、タスク追跡を使って作業を小さな TODO タスクに分割してください
• 必須・重要・必ず注意 新しいコードを作成する前に、コードベースで類似パターンを 3 つ以上検索してください
• 必須・重要・必ず注意 すべての主張について file:line 形式の根拠を示してください（行動に移すには確信度 >80%）
• 必須・重要・必ず注意 作業の品質を検証するための最終レビュー TODO タスクを追加してください

[TASK-PLANNING] 行動に移す前に、タスクの範囲を分析し、タスク追跡を使って小さな TODO タスクとサブタスクに体系的に分割してください。

フックレスプロンプトプロトコルミラー（自動同期）

出典：.claude/hooks/lib/prompt-injections.cjs + .claude/.ck.json

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

汎用的な移植性の境界： 再利用可能なスキルとプロトコルのテキストはプロジェクトに依存しないものとします。プロジェクト固有の規約は、docs/project-config.json と docs/project-reference/ から確認してください。shared/sdd-artifact-contract.md の共通 AI-SDD を適用します。docs/project-config.json と docs/project-reference/docs-index-reference.md を読み、そこに記載されているプロジェクト参照ドキュメントを開いてください。この共通コンテキストとローカルドキュメントを利用できる場合は、サポートされている任意の AI ツールで実行できます。

1. 検出： プロンプトをワークフローカタログと照合します
2. 分析： 最適なワークフローを見つけ、カスタムのステップ構成のほうが適しているかどうかも評価します
3. 確認（必須形式）： ユーザーが明示的にワークフロー／スキルを呼び出し、かつローカルプロトコルで明示的な呼び出しを確認とみなす場合を除き、次の構成でユーザーに直接質問します
   • 質問："どのワークフローを有効にしますか？"
   • 選択肢 1："[最適なワークフロー] を有効にする（推奨）"
   • 選択肢 2："カスタムワークフローを有効にする：[step1 → step2 → ...]"（1 行で理由を記載）
4. 有効化（確認後）： 標準ワークフローの場合は $workflow-start <workflowId> を呼び出し、カスタムステップの場合は手動で順に実行します
5. タスクを作成： ワークフローのすべてのステップについてタスク追跡を行います
6. 実行： 各ステップを順番に実行します [CRITICAL-THINKING-MINDSET] 批判的思考と段階的思考を適用します。すべての主張には追跡可能な根拠が必要であり、確信度が 80% を超える場合にのみ行動します。 ハルシネーション防止の原則： 推測を事実として提示しないでください。すべての主張に出典を示し、不確実な点は率直に認め、出力に誤りがないか自己確認し、独立した情報源と照合し、自分の確信を疑ってください。根拠のない確信こそが、あらゆるハルシネーションの根本原因です。 AI の注意力に関する原則（初頭効果・新近効果）： 長いプロンプト／プロトコルでは、指示の順守が長いコンテキストウィンドウでも保たれるよう、最も重要な 3 つのルールを冒頭と末尾の両方に配置します。 目標主導の実行： まず成功基準を定義し、検証が完了するまで繰り返し、観察可能なチェックに合格した場合にのみ終了します。 テストで意図を検証： テストでは、現在の挙動をなぞるだけでなく、ビジネスルール／不変条件を保護し、保護対象の意図が損なわれた場合に失敗するようにします。

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

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

教訓の抽出 — 症状への対処ではなく、根本原因のみ：

1. 症状ではなく、失敗モード（推論／前提の誤り）を特定します。「誤った列挙値を使った」ではなく、「ソースを読まずに API が存在すると仮定した」とします。
2. 一般性を検証します。この失敗モードは 3 つ以上のコンテキスト／コードベースに当てはまりますか？ 当てはまらない場合は、抽象度を 1 段階上げます。
3. 普遍的なルールとして記述します。プロジェクト固有の名前／パス／クラスを除き、どのコードベースでも役立つ内容にします。
4. 統合します。同じ失敗モードを共有する複数のミスは、1 つの教訓にまとめます。
5. 再発判定：「この注意書きがなければ、今後のセッションで再発するか？」いいえの場合は $learn を省略します。
6. 自動修正判定：「$code-review／$code-simplifier／$security／$lint で検出できるか？」はいの場合は、代わりにレビュー用スキルを改善します。
7. 両方の判定を通過した場合： $learn を実行するようユーザーに依頼します。 [TASK-PLANNING] [MANDATORY] ワークフローまたはスキルのステップを実行する前に、予定されているすべてのステップのタスク追跡を作成／更新し、各ステップの開始時と完了時に内容を同期してください。