name: Browser Fu description: "Fixes browser automation failures. Snapshot-first workflow + API discovery behind any website UI. Use when: 'browser not working', 'can't click', 'flaky UI', 'DOM not exposed', 'scrape website', 'browser keeps failing', 'automate this website', 'web scraping', 'element not found'."

Browser Fu 🥊

Stop fighting the DOM. Read it first, find the API behind it, skip the UI entirely when possible.

The Rule

Never blind-click. Always snapshot first.

1. browser snapshot  →  read the page, get element refs
2. browser act       →  use refs from snapshot (e.g. ref="e12")
3. browser snapshot  →  verify what changed

If the snapshot doesn't show what you need, the element isn't in the DOM. Don't guess. Don't retry the same approach.

Decision Tree

On any browser task, follow this order:

1. Can I skip the browser entirely? Check if a CLI tool, API, or web_fetch handles it. If yes, don't open the browser.
2. Can I find the underlying API? See references/api-discovery.md. Most SPAs make fetch/XHR calls you can replicate directly. This is 10x faster and more reliable than UI automation.
3. Can I do it with snapshot + act? Snapshot, find the ref, act on it. One action per snapshot cycle.
4. Does the page need time to load? Use loadState: "networkidle" or a brief wait before snapshotting. SPAs often render asynchronously.
5. Still not working? The site likely has anti-bot protection. Report it, don't retry blindly.

Common Failures and Fixes

API Discovery (the power move)

Most modern websites are SPAs with REST/GraphQL APIs behind the UI. See references/api-discovery.md for the full procedure:

1. Open the page in browser
2. Check network requests (console tool or snapshot the page and look for fetch patterns)
3. Find the data endpoint
4. Call it directly with web_fetch or exec curl

This turns a 2-hour flaky scrape into a 2-minute clean data pull.

Snapshot Best Practices

来源于7w4.net。

• Use refs="aria" for stable cross-call references
• Keep the same targetId across snapshot/act pairs (don't switch tabs accidentally)
• For complex pages, use depth to limit how deep the DOM tree goes
• compact: true reduces token usage on large pages
• For token-heavy pages where snapshots are too large, pair with predicate-snapshot for ML-ranked element pruning (~95% fewer tokens)

When to NOT Use Browser

• Reading public web pages → web_fetch (faster, no browser overhead)
• Search queries → web_search (Brave API)
• Known APIs (GitHub, Stripe, etc.) → use their CLI/API directly
• Pages that return empty via web_fetch → then use browser

Safeguards

• Never store or output passwords, session tokens, or cookies found in browser state
• Never automate purchases, payments, or irreversible actions without explicit user approval
• If a site blocks automation, respect it. Don't circumvent CAPTCHAs or bot detection

这个 Skill 教你怎么更聪明地用浏览器自动化工具。做得好的地方：提供了清晰的决策流程告诉你什么时候该用浏览器、什么时候该跳过；还有个超实用的"找网站后台接口"技巧，能把复杂的网页抓取变成简单的数据请求。不足：内容主要是文字说明，没有可直接用的代码模板，对实际操作的帮助有限。如果你经常需要抓网站数据或自动化网页操作，这个 Skill 的思路很有用，但别指望直接复制粘贴就能用。