case-radar

Case Radar · 事例レーダー

ツールの適応

AskUserQuestion、Agent、Read などの名称は、質問、サブエージェント、ファイル読み取りの機能に対応しています。現在のプラットフォームで同等のツールを使用してください。構造化された質問ツールがない場合は、1つのメッセージで不足しているパラメーターを確認してください。すでに回答がある場合は、そのまま引き継ぎます。サブエージェント機能がない場合は、メインエージェントがスキャンを実施します。

「新しいものを知りたい」ということを、「三次情報のSEO記事を読む」から「一次情報の実物（スクリーンショット／ソースコード／デモ）を手に入れる」へ。

入力：新しいものの名前＋1文の背景（「X に使いたい」）。 出力：閲覧できる HTML 事例集。各カードには実物資料を添えます（説明文ではありません）。

基本理念：メニューには価値がありません。料理こそが本物です。GitHub リポジトリのトップページはファイル一覧（メニュー）です。README のスクリーンショット、ストアページのインストール数、SKILL.md の原文の段落、製品のランディングページにある実際のサイト構築例——これこそが本物です（料理です）。

---

フロー概要

段階	名称	目標	主なツール
0	環境の自己診断	agent-browser がインストール済みで、テーマが明確であることを確認します	Bash + 対話
1	scan	複数のチャネルから情報源をスキャンし、事例候補を一覧にします	WebSearch / Agent（作り直さず、そのまま呼び出します）
2	recon	候補ごとに「実物の所在」を偵察します——ここが主な付加価値です	reference/recon-heuristics.md を読みます
3	capture	実物を取得します（curl で直接リソースを取得 + agent-browser でスクリーンショットを撮影）	curl + agent-browser
4	embed	HTML テンプレートを適用して出力します	reference/html-template-spec.md を参照します

各ステップはいつでも中断できます。ユーザーはいつでも「停止」「このステップをスキップ」「前のステップに戻る」と言えます。

---

段階 0：環境の自己診断 + テーマの確認

0.1 agent-browser がインストール済みか確認します

command -v agent-browser

• ❌ 未インストール → ユーザーに「この Skill はスクリーンショットの取得に vercel-labs/agent-browser を使用します。次の1行のコマンドでインストールできます：brew install agent-browser && agent-browser install。インストール後に戻ってきてください。」と伝えて終了します。
• ✅ インストール済み → 続行します

注意：agent-browser install は Chrome のバイナリ（~169 MB）をダウンロードします。中国本土では、ダウンロードに失敗する場合があります。ただし、実測では install が途中で止まっても、agent-browser はマシン上に既存の Playwright Chromium（~/Library/Caches/ms-playwright/）を再利用できます。そのため、install がエラーになっても、まず agent-browser open https://example.com を試してください。動作すれば install はスキップできます。

0.2 gh CLI にログイン済みか確認します（recon 段階で使用します）

gh auth status

• ❌ 未ログイン → gh auth login を案内して終了します
• ✅ → 続行します

0.3 テーマの確認——3つの質問を一度だけ行います

AskUserQuestion を使って一度に質問し、何度もやり取りを繰り返さないでください。

1. 新しいものの名前と背景（「Claude Skills エコシステム」「MCP の最新の使い方」「AI Agent フレームワークの比較」など）
2. 用途：① 研究／製品開発に使う（深さを優先）② コンテンツ制作に使う（「記憶に残ること」と「将来引用できること」を両立）③ 純粋な知識欲／視野を広げるため（幅広さを優先）④ 3つすべて、状況に応じて（進めながら決める）
3. 範囲：① 1つのエコシステムに絞る（例：Claude Skills）② 1つのツール／製品（例：cline、cursor）③ 1つの概念（例：MCP、Subagent）④ 限定せず、その都度決める

⚠️ このステップを議論の場に発展させないでください。3つの質問が終わったら、すぐに作業を開始します。ユーザーが答えられない項目には、妥当なデフォルト値（用途は「3つすべて」、範囲は「1つのエコシステムに絞る」）を設定して続行してください。

---

段階 1：scan · 複数チャネルから情報源をスキャン

作り直さないでください——WebSearch を直接呼び出すか、Agent を起動してスキャンします。

1.1 scan agent を起動します（推奨）

事例が20件を超える可能性がある場合は、Agent ツールを使って general-purpose の subagent を起動し、スキャンを並行して実施します。これにより、メインのコンテキストが汚染されるのを防げます。プロンプトの要点：

• 情報源の分類要件：一次情報（公式ドキュメント／著者のブログ／元の投稿／changelog）／質の高い二次情報（HN の高評価投稿／Reddit／Simon Willison のような深く追究する人／著名なエンジニアのブログ）／中国語の三次情報（公式アカウント／知乎／CSDN。ただし「独自の観察」があるものに限り、単なる翻訳記事は除外）
• 厳格に除外するもの：基本チュートリアル、awesome-list（メタリポジトリ。ただし、リスト内で取り上げられた優れた事例は除く）、SaaS API の単なるラッパー、公式ドキュメントの操作例
• 出力形式：各項目を [タイトル](URL) — 1文の概要 + さらに深掘りする価値がある理由 とする
• 件数：条件を満たす事例を25～40件目指す
• 最後に100～200字の「スキャン所感」（エコシステムの全体像：大きなトレンド3つ、大きな空白3つ、最も強いシグナル1つ）を付ける

1.2 ユーザーに候補の範囲を決めてもらいます

scan agent の実行後、すぐにすべてを recon に進めないでください。まず情報源の一覧をユーザーに渡し、次のようにしてもらいます。

• 明らかに興味のないものをいくつか除外する
• 「特に見たい」ものを5～8件選び、精読リストに指定する（これらは recon + capture に進めて詳しく調査します）
• 残りは「通常カード」層に入れます（タイトルとリンクのみ表示し、実物は取得しません）

⚠️ ユーザーが「全部ほしい」と言った場合は、v2 の実測では、35事例のグリッドが「注意力を急激に低下させる」ことを伝えてください。読者は35件目に達する頃には、すでに疲れています。精読するのは5～7件にして、残りはインデックスとして残すことを推奨します。最終的な決定権はユーザーにあります。

---

段階 2：recon · 実物の偵察（主な付加価値）

ここが Case Radar 独自の付加価値です。他の段階は既存の Skill でカバーされていますが、「各事例の実物がどの生息地にあるかを判断する」ステップだけは新しいものです。

reference/recon-heuristics.md を読み、7種類の「実物の生息地」を見分けるパターンを確認してください。

精読リストの候補ごとに、次の点を確認します。

1. この対象の実物は、どの生息地にある可能性が最も高いか？（heuristics の7種類のパターンを参照）
2. どのツールで取得するのが最適か？（curl で直接リソースを取得／gh API でソースコードを取得／agent-browser でページ全体のスクリーンショットを撮影）

各事例の「実物の所在」を書き留めます。これは capture 段階の作業図になります。

チェックリスト化しないための注意：recon-heuristics はパターンの集合であり、チェックリストではありません。ある事例の実物は、7種類の生息地以外の8番目の場所にある可能性もあります。新しい生息地を発見する可能性を残してください。発見したら、heuristics ファイルを更新します。

---

段階 3：capture · 実物を取得

recon 段階の作業図に従って、精読する各事例の実物を取得します。

3.1 curl で直接リソースを取得します（最速で、最もクリーンです）

curl -sLo screenshots/cases/<name>.<ext> "<url>"

適しているもの：README にある screenshots/ examples/ assets/ ディレクトリ内の画像、GIF、デモ動画。ブラウザーでのレンダリング処理がなく、枠線や黒帯も入りません。

3.2 gh API でソースコードの断片を取得します

適しているもの：SKILL.md の原文、設定ファイル、changelog の重要な段落。

gh api repos/<owner>/<repo>/contents/<path>/SKILL.md --jq '.content' | base64 -d

重要な段落（10～30行）を screenshots/cases/<name>-skillmd.txt に保存し、HTML では <pre> ブロックで表示します。

3.3 agent-browser でウェブページを撮影します

適しているもの：製品のランディングページ（Next.js SPA）、公式ストアページ（Anthropic plugin store など）、長いブログ記事の全ページ。

agent-browser open <url>
agent-browser wait 2000             # 等 JS 渲染
agent-browser screenshot --full screenshots/cases/<name>-fullpage.png

⚠️ agent-browser はデフォルトで、パラメーターのパスではなく、呼び出し時の現在のディレクトリにスクリーンショットを保存します。screenshots/cases に移動するか、撮影後に mv してください。

3.4 撮影できない／実物が見つからない事例

無理にでっち上げないでください。このような事例は精読リストに入れず、通常カード層に戻します（テキストの説明とリンクのみを表示）。装飾画像は画像なしよりも悪い——v2 の振り返りで検証済みです（NeoLab の表紙だけの画像は、4つの視点のうち2つから「装飾層」と指摘されました）。

---

段階 4：embed · HTML を出力

reference/html-template-spec.md のビジュアル仕様と階層ラベルシステムを参照してください。

4.1 ファイル名

<工作目录>/<主题简称>-案例集-YYYY-MM-DD.html

例：skills-生态创意案例集-2026-05-14.html

画像パスには相対パスを使います：screenshots/cases/<file> —— HTML を元の場所で開けば読み込めます。

4.2 HTML の構造（4ブロック）

[Header]           标题 + 一句话 lede + 层级标签图例 + 升级说明（如有 v2）
[工具 Spotlight]   如果 capture 阶段重度使用了某个工具（如 agent-browser），单独 spotlight
[精读卡]           5-7 张富卡片，每张有真物 hero + 妙在 + 为什么是你 + 大 CTA
[Next Step]        3-5 个可选下一步（不下结论，给用户选）

⚠️ 「エコシステム全体像：大きなトレンド3つ」や「6つのグループのグリッド」といった構造層を追加しないでください。v2 の振り返りで、こうしたものは「AI が完成度を高く見せるための」装飾層だと検証されています。ユーザーが全体像を特に求める場合は、任意の追加レイヤーとして含めてください。

4.3 层级标签（最多 3 层，不要 4 层）

参考 reference/html-template-spec.md。默认轻量 3 层：事实层 / AI 推测层 / 你的判断区。复杂版（加 共识层、真物层）作为可选，不强加。

---

阶段 5：完成输出

✅ 案例雷达扫描完成！

- 扫描案例：[N] 个，精读 [M] 个
- 真物物料：[K] 件（X 张截图 + Y 段源码 + Z 个对比图）
- HTML：[相对路径]
- agent-browser 用量：[A] 次截图 + [B] 次 navigate

Next：
  - 在浏览器中打开 HTML 查看效果
  - 如发现某张精读卡的真物没抓到位，告诉我哪张，单独重抓
  - 如想把某个案例拆成短文/图文，告诉我

---

核心原则

1. 真物优先，描述其次

文字描述能讲什么、图能讲什么，永远先要图。菜单一文不值，菜才是真东西。 截不到真物的案例，降级到普通卡片层，不要硬塞装饰图。

2. 信源分级，砍掉 SEO 垃圾

一手源（官方/作者）/ 二手优质（深度玩家）/ 三手中文（有独立观察的），三层之外的 SEO 文、awesome 集市、纯翻译稿一律砍掉。

3. 精读 5-7 个，其他索引化

35 个全做精读会让读者"断崖式注意力低谷"。精读单是用户拍的板，不是 AI 全包——把候选清单给用户选，不要自作主张全部深加工。

4. recon 不 checklist 化

reference/recon-heuristics.md 是 patterns 集合，给 Claude 灵活选取。如果某案例的真物在 patterns 之外，记下来更新 heuristics——这个 Skill 应该越用越锋利。

5. 每一步可中断

用户随时可以说"停"、"跳过"、"换主题"。不要一口气从 scan 跑到 embed 不给反应机会——v2 实测每一步都需要用户拍板。

6. 反过度工程化

读 reference/workflow-anti-patterns.md。这个 Skill 容易落入"建工具不做事"陷阱——它的真正价值取决于用户能不能把案例集变成行动（写文章、做实验、定方向），不取决于 HTML 多精美。

---

什么时候不该用这个 Skill（重要）

这一段是 4 视角诊断后留下的自我提醒。Skill 跑得动 ≠ Skill 该被点开。

读 reference/workflow-anti-patterns.md 末尾的"4 个反向信号"判断。简版：

• ✗ 如果你只是好奇但没想拿去做点什么 → 直接读原文/翻 X 列表更轻，不需要跑全套
• ✗ 如果你已经在写一篇相关文章了 → 先把那篇写完，案例当素材手抓即可
• ✗ 如果你这周已经在另一件具体的事上有进展了 → 不要用这个 Skill 制造新的"建工具的忙碌感"
• ✗ 如果新东西的"真物"很难界定（如某种抽象概念/非工具类） → recon 阶段会失锚，应该直接做结论型调研，而非使用本 skill

---

使用示例

场景 1：扫一个新生态

用户：扫一下 MCP 生态最新玩法

Skill：
→ 0.1 ✅ agent-browser 装好
→ 0.2 ✅ gh 已登录
→ 0.3 问 3 个对齐问题（用途 / 范围 / 1 个其他）
→ 1.1 起 scan agent，跑 5-8 分钟拉回 32 个候选 + 扫描印象
→ 1.2 用户从 32 个里挑 6 个精读
→ 2 对 6 个跑 recon，判别每个的真物位置
→ 3 拉真物（curl 5 个直接图 + gh 拉 3 段 SKILL.md + agent-browser 截 2 个落地页）
→ 4 出 HTML
→ 5 ✅ 完成

场景 2：恢复中断的 scan

用户：之前那个 Skills 生态扫得怎么样了

Skill：
→ 找最近的 case-radar 输出文件
→ 报告当前状态：scan 已完成（35 个）/ recon 完成 7 个 / capture 完成 4 个
→ 问用户从哪一步继续

场景 3：用户说"我已经在写文章了"

用户：我准备写一篇关于 Cursor 0.50 的文章，先扫一下生态

Skill：
→ ⚠️ 触发"反向信号 #2"：用户已在写文章
→ 反问："你需要的是案例集 HTML 还是几张关键截图直接放进文章？"
   - 案例集 → 继续走全流程
   - 几张截图 → 跳过 scan + embed，直接进 capture，用 agent-browser 抓你指定的 URL

场景 4：临时发现真物在 heuristics 之外

recon 阶段发现某 Skill 的真物是一段 YouTube demo 视频字幕。
heuristics 文件没列这种栖息地。

Skill：
→ 用 agent-browser 抓字幕（snapshot -i 拿 YouTube 字幕面板）
→ 完成 capture 后，提示用户："本次发现新栖息地：YouTube 字幕。
   是否更新 recon-heuristics.md 加入第 8 种栖息地？"
→ 用户确认 → 更新 reference 文件

---

维护与扩展

• 加新的 recon pattern → 编辑 reference/recon-heuristics.md
• 加新的 HTML 视觉模板 → 编辑 reference/html-template-spec.md
• 修改反 anti-pattern 列表 → 编辑 reference/workflow-anti-patterns.md
• 新增整个新维度（如新增多语言案例支持） → 参考 reference/_how-to-extend.md