SuperAPI AI Directory
Partner中文AI newsFavorites
Skillscase-radar

case-radar

General & other

View repository

Updated 10-16 07:23

About this skill

Case Radar · Case Radar

Tool adaptation

AskUserQuestion、Agent、Read and other names correspond to inquiries, sub-agents, and file-reading capabilities; use the equivalent tools on the current platform. When there is no structured Q&A tool, ask about the missing parameters in a single message; if answers already exist, inherit them directly. When there is no sub-agent capability, have the main agent complete the scan.

Turn "wanting to learn about something new" from "reading third-hand SEO articles" → "getting first-hand real stuff (screenshots/source code/demos)".

Input: the name of something new + one sentence of context ("I want to use it to do X"). Output: a browsable HTML case collection, with each card paired with real material (not a text description).

Core belief: the menu is worthless; the dishes are the real thing. A GitHub repo homepage is a file list (the menu); the screenshots in the README, the install counts on the store page, the original paragraphs of SKILL.md, the real site-building results of a product landing page—these are the real thing (the dishes).

Process overview

Stage Name Goal Main tools
0 Environment self-check Confirm agent-browser is installed + the topic is clear Bash + conversation
1 scan Scan sources across multiple channels and list candidate cases WebSearch / Agent (don't reinvent, call directly)
2 recon Scout the "real stuff location" for each candidate—the core value-add Read reference/recon-heuristics.md
3 capture Pull the real stuff (curl direct resources + agent-browser screenshots) curl + agent-browser
4 embed Apply the HTML template and output Reference reference/html-template-spec.md

Every step can be interrupted. The user can say "stop", "skip this step", or "go back to the previous step" at any time.

Stage 0: Environment self-check + topic alignment

0.1 Check whether agent-browser is installed

command -v agent-browser
  • ❌ Not installed → tell the user: "This Skill depends on vercel-labs/agent-browser to capture screenshots. Install it with one command:brew install agent-browser && agent-browser install. Come back after installing." Terminate.
  • ✅ Installed → continue

Note:agent-browser install will download the Chrome binary (~169 MB). If you are in mainland China, the download may fail. But in practice, even if install gets stuck, agent-browser can reuse the Playwright Chromium already on the machine (~/Library/Caches/ms-playwright/). So even if install reports an error, first try agent-browser open https://example.com, and if it runs, skip install.

0.2 Check that gh CLI is logged in (needed for the recon stage)

gh auth status
  • ❌ Not logged in → prompt gh auth login, terminate
  • ✅ → continue

0.3 Topic alignment—3 questions, ask at most once

Use AskUserQuestion to ask them all at once; don't ping-pong back and forth:

  1. The name and context of the new thing("Claude Skills ecosystem" / "the latest ways to play with MCP" / "AI Agent framework comparison", etc.)
  2. Purpose: ① Serve research/product development (depth-first) ② Serve content creation (balance "I can remember it" and "can be cited in the future") ③ Pure knowledge seeking/broadening horizons (breadth-first) ④ All three, go by task (decide as you go)
  3. Scope circle: ① Anchor to one ecosystem (e.g. Claude Skills) ② One tool/product (e.g. cline, cursor) ③ One concept (e.g. MCP, Subagent) ④ No limits, decide on the fly

⚠️ This stepdo not expand into a discussion meeting. Once the 3 questions are asked, get to work. If the user cannot answer one of them, give a reasonable default value (purpose defaults to "all three", scope defaults to "anchor to one ecosystem") and continue.

Phase 1: scan · Multi-channel source scanning

Don't reinvent—just call WebSearch or spin up an Agent to run the scan.

1.1 Spin up a scan agent (recommended)

If there may be >20 cases, use the Agent tool to spin up a general-purpose subagent to run the scan in parallel, avoiding polluting the main context. Key points for the Prompt:

  • Source tiering requirements:First-hand sources(official docs/author blogs/original tweets/changelog) / High-quality second-hand(high-scoring HN posts / Reddit / deep players like Simon Willison / well-known engineer blogs) / Third-hand Chinese(WeChat official accounts/Zhihu/CSDN, only those with "independent observation"; no pure translation pieces)
  • Strictly cut: basic tutorials, awesome-lists (meta repos, unless a good case is named in the list), pure SaaS API wrappers, official docs how-to demonstrations
  • Output format: each entry [标题](URL) — 1 句话简介 + 为什么值得深挖
  • Quantity: target 25-40 qualified cases
  • At the end, require a 100-200 word "scan impression" (ecosystem overview: 3 major hot spots / 3 major gaps / 1 strongest signal)

1.2 User decides the candidate scope

After the scan agent finishes,do not immediately send everything into recon. First give the source list to the user so she can:

  • Cut the few she is clearly not interested in
  • Mark the 5-8 she "especially wants to see" as thedeep-read list(this part goes into recon + capture deep processing)
  • The rest go into the "ordinary card" layer (only show title + link, do not capture the real thing)

⚠️ If the user says "I want them all", remind her: in v2 testing, a 35-case grid was a "cliff-like attention trough"—readers are already tired by the time they reach 35. Suggest deep-reading 5-7 and keeping the rest as an index. The final decision is the user's.

Phase 2: recon · Real-thing reconnaissance (core value-add)

This is Case Radar's exclusive value-add. All other phases are covered by existing Skills; only the step of "judging which habitat each case's real thing lives in" is new.

Read reference/recon-heuristics.md to get the discrimination patterns for the 7 kinds of "real-thing habitats".

For each candidate case in the deep-read list, ask yourself:

  1. Which habitat is this object's real thing most likely in? (Refer to the 7 patterns in heuristics)
  2. What tool is best for capturing it? (curl direct resource / gh API to pull source code / agent-browser to screenshot the full page)

Write down each case's "real-thing location"—this is the construction blueprint for the capture phase.

Anti-checklist reminder: recon-heuristics is a collection of patterns, not a checklist. The real thing for a given case may be in an 8th location outside the 7 habitats.Keep open the possibility of discovering new habitats, and update the heuristics file once discovered.

Phase 3: capture · capture the real thing

Following the construction blueprint from the recon phase, capture the real thing for each close-read case.

3.1 Prefer curl for direct resources (fastest, cleanest)

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

Suitable for: images, GIFs, and demo videos already in the README's screenshots/ examples/ assets/ directory. No browser rendering overhead, no borders/black bars.

3.2 Pull source code snippets with the gh API

Suitable for: the original SKILL.md text, config files, key passages of the changelog.

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

Keep the key passages (10-30 lines) in screenshots/cases/<name>-skillmd.txt, and present them in the HTML with a <pre> block.

3.3 Screenshot web pages with agent-browser

Suitable for: product landing pages (Next.js SPA), official store pages (such as the Anthropic plugin store), full pages of long blog posts.

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

⚠️ By default agent-browser saves screenshots to the current directory at the time of the call, not the argument path—either cd into screenshots/cases, or use mv after capturing.

3.4 Cases where the real thing can't be captured/found

Don't force it. Such casesdon't go into the close-read list, and are downgraded back to the ordinary card layer (showing only a text description + link).A decorative image is worse than no image—the v2 retrospective already verified this (the pure cover image for NeoLab was called out by 2 of 4 perspectives as a "decorative layer").

Phase 4: embed · output HTML

Refer to reference/html-template-spec.md 's visual specification and hierarchy label system.

4.1 File naming

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

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

Use relative paths for image paths:screenshots/cases/<file> — the HTML can load them when opened in place.

4.2 HTML structure (4 blocks)

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

⚠️ Don't add structural layers like "3 major ecosystem hotspots" or "6-group grid"—the v2 retrospective already verified these are decorative layers that "make AI look highly complete." If the user specifically wants a panorama, make it an optional additional layer.

4.3 Hierarchy labels (at most 3 layers, not 4)

Refer to reference/html-template-spec.md。Default lightweight 3 layers: fact layer / AI speculation layer / your judgment zone. The complex version (adding a consensus layer and a real-thing layer) is optional, not imposed.

Phase 5: finish output

✅ 案例雷达扫描完成！

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

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

Core principles

1. Real thing first, description second

Whatever a text description can convey and whatever an image can convey, always ask for the image first.A menu is worthless; the dishes are the real thing. For cases where the real thing can't be captured, downgrade to the ordinary card layer; don't force in decorative images.

2. Grade sources, cut SEO junk

First-hand sources (official/author) / high-quality second-hand (deep players) / third-hand Chinese (with independent observations); anything outside these three layers—SEO articles, awesome marketplaces, pure translation pieces—is cut without exception.

3. Close-read 5-7, index the rest

Close-reading all 35 would give readers a "cliff-like attention trough."The close-read list is decided by the user, not fully handled by AI—give the candidate list to the user to choose from; don't take it upon yourself to deep-process everything.

4. Don't turn recon into a checklist

reference/recon-heuristics.md is a collection of patterns, for Claude to select from flexibly. If a given case's real thing is outside the patterns,Write down and update heuristics— this Skill should get sharper the more it is used.

5. Every step can be interrupted

The user can say "stop", "skip", or "switch topics" at any time. Do not run straight through from scan to embed without giving a chance to react — v2 testing showed that every step requires the user to make the call.

6. Anti-over-engineering

Read reference/workflow-anti-patterns.md. This Skill easily falls into the "building tools instead of doing work" trap — its real value depends on whether the user can turn the case set into action (writing articles, running experiments, setting direction), not on how polished the HTML is.

When not to use this Skill (important)

This paragraph is a self-reminder left after the 4-perspective diagnosis.A Skill that runs ≠ a Skill that should be opened。

Read reference/workflow-anti-patterns.md the "4 negative signals" judgment at the end. Short version:

  • ✗ If you are just curious but do not intend to use it for anything → reading the original text / browsing the X list is lighter, no need to run the full set
  • ✗ If you are already writing a related article → finish that article first, just grab the cases as material by hand
  • ✗ If you have already made progress on another concrete thing this week → do not use this Skill to create a new "feeling of busyness from building tools"
  • ✗ If the "real thing" of the new thing is hard to define(such as some abstract concept / non-tool type) → the recon stage will lose its anchor, and you should directly do conclusion-oriented research rather than use this skill

Usage examples

Scenario 1: Scanning a new ecosystem

用户：扫一下 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 ✅ 完成

Scenario 2: Resuming an interrupted scan

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

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

Scenario 3: The user says "I am already writing an article"

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

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

Scenario 4: Temporarily discovering that the real thing is outside the heuristics

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

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

Maintenance and extension

  • Add a new recon pattern → edit reference/recon-heuristics.md
  • Add a new HTML visual template → edit reference/html-template-spec.md
  • Modify the anti-anti-pattern list → edit reference/workflow-anti-patterns.md
  • Add an entire new dimension (such as adding multilingual case support) → refer to reference/_how-to-extend.md