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

• 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)

  7w4.net小蔥技能。

• 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 的思路很有用，但別指望直接複製貼上就能用。