Case Radar · Authentic Case Scanner
Shift the process of "learning about new things" from "reading third-hand SEO articles" → "obtaining first-hand authentic assets (screenshots/source code/demos)".
Input: Name of a new thing + one-sentence context ("I want to use it for X").
Output: A browsable HTML case collection, with each card paired with real materials (not textual descriptions).
Core Belief: Menus are worthless, the actual "dishes" are what matter. GitHub repo homepage is a file list (menu), while screenshots in README, installation counts on store pages, original paragraphs in SKILL.md, real website building effects on product landing pages—these are the authentic assets (dishes).
Workflow Overview
| Phase | Name | Goal | Main Tools |
|---|
| 0 | Environment Check | Confirm agent-browser is installed + clear theme | Bash + Conversation |
| 1 | scan | Scan multiple sources to list candidate cases | WebSearch / Agent (no reinvention, direct call) |
| 2 | recon | Recon the "authentic asset location" for each candidate — core value add | Read reference/recon-heuristics.md
|
| 3 | capture | Fetch authentic assets (direct resources via curl + screenshots via agent-browser) | curl + agent-browser |
| 4 | embed | Output via HTML template | Refer to reference/html-template-spec.md
|
Each step can be interrupted. Users can say "stop", "skip this step", "go back to the previous step" at any time.
Phase 0: Environment Check + Theme Alignment
0.1 Check if agent-browser is installed
- ❌ Not installed → Tell user: "This Skill depends on vercel-labs/agent-browser for capturing screenshots. Install with one command:
brew install agent-browser && agent-browser install
- ✅ Installed → Continue
Note:
will download Chrome binary (~169 MB). In mainland China, the download may fail. But in practice, even if install gets stuck, agent-browser can reuse the existing Playwright Chromium on the machine (
~/Library/Caches/ms-playwright/
). So even if install reports an error, try
agent-browser open https://example.com
first; if it works, skip install.
0.2 Check if gh CLI is logged in (required for recon phase)
- ❌ Not logged in → Prompt , terminate
- ✅ → Continue
0.3 Theme Alignment — 3 questions, asked at most once
Use AskUserQuestion to ask all at once, avoid repeated back-and-forth:
- Name and context of the new thing (e.g., "Claude Skills ecosystem" / "Latest MCP use cases" / "AI Agent framework comparison")
- Purpose: ① For research/product development (depth-first) ② For content creation (balance "memorable" and "citable") ③ Pure knowledge-seeking/expanding horizons (breadth-first) ④ All three, adjust as we go
- Scope: ① Anchor an ecosystem (e.g., Claude Skills) ② A single tool/product (e.g., cline, cursor) ③ A concept (e.g., MCP, Subagent) ④ No limits, decide temporarily
⚠️ Do not expand this into a discussion. Start working right after asking the 3 questions. If the user can't answer a question, set a reasonable default (default purpose: "all three", default scope: "anchor an ecosystem") and proceed.
Phase 1: scan · Multi-source scanning
No reinvention — directly call WebSearch or launch an Agent to run the scan.
1.1 Launch a scan agent (recommended)
If there may be >20 cases, use the
tool to launch a general-purpose subagent for parallel scanning to avoid polluting the main context. Key prompt points:
- Source hierarchy requirements: First-hand sources (official docs/author blogs/original tweets/changelog) / High-quality second-hand sources (high-score HN posts / Reddit / deep players like Simon Willison / well-known engineers' blogs) / Third-hand Chinese sources (WeChat official accounts/Zhihu/CSDN, only those with independent observations; pure translations are excluded)
- Strictly exclude: Basic tutorials, awesome-lists (meta repos, except for highlighted good cases within the list), pure SaaS API wrappers, official document operation demos
- Output format: Each entry
[Title](URL) — 1-sentence intro + why it's worth deep diving
- Quantity: Target 25-40 qualified cases
- End with a 100-200 word "scan impression" (ecosystem overview: 3 hot trends / 3 gaps / 1 strongest signal)
1.2 User confirms candidate scope
After the scan agent finishes, do not proceed to recon immediately. First share the source list with the user and let them:
- Cut out cases they are clearly not interested in
- Mark 5-8 cases as deep dive list (these will go through recon + capture for in-depth processing)
- The rest will be in the "regular cards" layer (only show title + link, no authentic assets captured)
⚠️ If the user says "I want all of them", remind them: v2 testing shows that 35-case grids cause a "cliff-like attention drop" — readers get tired by the 35th case. Recommend 5-7 deep dive cases, keep the rest as indexes. Final decision is up to the user.
Phase 2: recon · Authentic Asset Recon (Core Value Add)
This is the exclusive value of Case Radar. Other phases are covered by existing Skills, but this step of "judging where each case's authentic assets reside" is new.
Read reference/recon-heuristics.md
For each candidate in the deep dive list, ask yourself:
- Which habitat is most likely to contain this object's authentic assets? (Refer to the 7 patterns in heuristics)
- Which tool is most suitable for capturing it? (Direct resources via curl / source code via gh API / full-page screenshots via agent-browser)
Write down the "authentic asset location" for each case — this is the construction plan for the capture phase.
Anti-checklist reminder: recon-heuristics is a collection of patterns, not a checklist. The authentic assets of a case may be in an 8th habitat outside the 7 listed. Keep the possibility of discovering new habitats, and update the heuristics file if found.
Phase 3: capture · Fetch Authentic Assets
Follow the construction plan from the recon phase to fetch authentic assets for each deep dive case.
3.1 Prioritize direct resources via curl (fastest, cleanest)
bash
curl -sLo screenshots/cases/<name>.<ext> "<url>"
Suitable for: Images, GIFs, demo videos in
directories in README. No browser rendering overhead, no borders/black bars.
3.2 Pull source code snippets via gh API
Suitable for: Original SKILL.md content, configuration files, key changelog paragraphs.
bash
gh api repos/<owner>/<repo>/contents/<path>/SKILL.md --jq '.content' | base64 -d
Save key paragraphs (10-30 lines) to
screenshots/cases/<name>-skillmd.txt
, and display them in
blocks in HTML.
3.3 Capture web pages via agent-browser
Suitable for: Product landing pages (Next.js SPA), official store pages (e.g., Anthropic plugin store), full-length blogs.
bash
agent-browser open <url>
agent-browser wait 2000 # Wait for JS rendering
agent-browser screenshot --full screenshots/cases/<name>-fullpage.png
⚠️ agent-browser saves screenshots to the current directory by default, not the parameter path — either cd into screenshots/cases, or move the file after capture.
3.4 Cases where authentic assets cannot be captured/found
Do not force it. These cases will not enter the deep dive list, and will be downgraded to the regular cards layer (only show textual description + link). Decorative images are worse than no images — verified in v2 review (the pure cover image of NeoLab was criticized as "decorative layer" by 2 out of 4 perspectives).
Phase 4: embed · Output HTML
Refer to the visual specifications and hierarchical tag system in
reference/html-template-spec.md
.
4.1 File Naming
<working-directory>/<theme-abbreviation>-case-collection-YYYY-MM-DD.html
Example:
skills-ecosystem-creative-cases-2026-05-14.html
Use relative paths for images:
— HTML can load images directly when opened in the original location.
4.2 HTML Structure (4 Blocks)
[Header] Title + one-sentence lede + hierarchical tag legend + upgrade notes (if v2)
[Tool Spotlight] If a tool was heavily used in the capture phase (e.g., agent-browser), highlight it separately
[Deep Dive Cards] 5-7 rich cards, each with authentic asset hero + key highlights + why it matters + big CTA
[Next Step] 3-5 optional next steps (no conclusions, let the user choose)
⚠️ Do not add structural layers like "3 hot trends in ecosystem overview" or "6-group grid" — v2 review verified these are decorative layers that "make AI seem more complete". If the user specifically asks for an overview, add it as an optional layer.
4.3 Hierarchical Tags (max 3 layers, no 4 layers)
Refer to
reference/html-template-spec.md
.
Default lightweight 3 layers: Fact layer / AI inference layer / Your judgment area. The complex version (add consensus layer, authentic asset layer) is optional and not mandatory.
Phase 5: Completion Output
✅ Case Radar scan completed!
- Scanned cases: [N] total, [M] deep dive cases
- Authentic assets: [K] items (X screenshots + Y source code snippets + Z comparison charts)
- HTML: [relative path]
- agent-browser usage: [A] screenshots + [B] navigations
Next:
- Open the HTML in a browser to view the result
- If you find that the authentic assets of a deep dive card are not captured properly, tell me which one and I'll recapture it separately
- If you want to turn a case into a short article/visual content, let me know
Core Principles
1. Authentic Assets First, Descriptions Second
What text can tell vs what images can tell — always prioritize images. Menus are worthless, the actual dishes are what matter. Cases where authentic assets cannot be captured are downgraded to regular cards; do not force decorative images.
2. Source Hierarchy, Cut SEO Junk
First-hand sources (official/author) / high-quality second-hand sources (deep players) / third-hand Chinese sources (with independent observations) — exclude all SEO articles, awesome-lists, pure translations outside these three layers.
3. 5-7 Deep Dive Cases, Index the Rest
35 full deep dive cases will cause readers to have a "cliff-like attention drop". The deep dive list is decided by the user, not AI — share the candidate list with the user to choose, do not make decisions on your own.
4. Recon is Not Checklist-Based
reference/recon-heuristics.md
is a collection of patterns for Claude to flexibly select from. If a case's authentic assets are outside the patterns,
record it and update the heuristics — this Skill should become sharper with use.
5. Each Step Can Be Interrupted
Users can say "stop", "skip", "change theme" at any time. Do not run from scan to embed without giving the user a chance to respond — v2 testing verified that user confirmation is needed at each step.
6. Anti-Overengineering
Read
reference/workflow-anti-patterns.md
. This Skill easily falls into the trap of "building tools instead of doing things" — its real value depends on whether the user can turn the case collection into action (writing articles, doing experiments, setting directions), not on how beautiful the HTML is.
When Not to Use This Skill (Important)
This section is a self-reminder after 4-perspective diagnosis. Skill works ≠ Skill should be used.
Read the "4 reverse signals" at the end of
reference/workflow-anti-patterns.md
for judgment. Simplified version:
- ✗ If you're just curious but don't plan to do anything with it → Reading original articles/browsing X lists is lighter; no need to run the full workflow
- ✗ If you're already writing a related article → Finish writing the article first, and capture cases manually as materials
- ✗ If you've already made progress on another specific task this week → Do not use this Skill to create a false sense of "busy building tools"
- ✗ If the "authentic assets" of the new thing are hard to define (e.g., abstract concepts/non-tool categories) → The recon phase will lose focus; use long-research instead
Usage Examples
Scenario 1: Scan a new ecosystem
User: Scan the latest use cases in the MCP ecosystem
Skill:
→ 0.1 ✅ agent-browser installed
→ 0.2 ✅ gh logged in
→ 0.3 Ask 3 alignment questions (purpose / scope / one other)
→ 1.1 Launch scan agent, run for 5-8 minutes to return 32 candidates + scan impression
→ 1.2 User selects 6 cases from 32 for deep dive
→ 2 Run recon on the 6 cases to identify authentic asset locations
→ 3 Fetch authentic assets (5 direct images via curl + 3 SKILL.md snippets via gh + 2 landing page screenshots via agent-browser)
→ 4 Output HTML
→ 5 ✅ Completed
Scenario 2: Resume interrupted scan
User: How's the previous Skills ecosystem scan going?
Skill:
→ Find the latest case-radar output file
→ Report current status: scan completed (35 cases) / recon completed for 7 cases / capture completed for 4 cases
→ Ask the user which step to continue from
Scenario 3: User says "I'm already writing an article"
User: I'm preparing to write an article about Cursor 0.50, first scan the ecosystem
Skill:
→ ⚠️ Trigger "Reverse Signal #2": User is already writing an article
→ Ask: "Do you need an HTML case collection or just a few key screenshots to insert directly into your article?"
- Case collection → Proceed with full workflow
- A few screenshots → Skip scan + embed, directly enter capture phase, use agent-browser to capture the URLs you specify
Scenario 4: Discover authentic assets outside heuristics temporarily
During recon phase, find that the authentic assets of a Skill are YouTube demo video subtitles.
This habitat is not listed in the heuristics file.
Skill:
→ Use agent-browser to capture subtitles (snapshot -i to get YouTube subtitle panel)
→ After capture, prompt user: "New habitat discovered this time: YouTube subtitles.
Do you want to update recon-heuristics.md to add the 8th habitat?"
→ User confirms → Update reference file
Maintenance and Expansion
- Add new recon patterns → Edit
reference/recon-heuristics.md
- Add new HTML visual templates → Edit
reference/html-template-spec.md
- Modify anti-pattern list → Edit
reference/workflow-anti-patterns.md
- Add new dimensions (e.g., multilingual case support) → Refer to
reference/_how-to-extend.md