agentleFS
AhmedMerzaAhmedMerza/agent-skills/skills/browse/SKILL.md

browse

Skill2 starsChanged 41 days agoMITView on GitHub

View app pages via Playwright — authenticated, scrolling screenshots

We split this skill into the rules it gives an agent

5 rules. 0 are common, 2 are distinctive, and 3 are very specific to this project.

  • 0

    Common

    Most of the 42 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    If absent, the helper falls back to sensible defaults (http://localhost:8080, /login, input[type=email] / input[type=password], submit …

    line 19
  2. Very specific:

    Use a timeout of 120000ms.

    line 39
  3. Distinctive:

    Laravel apps only (optional fallback): if login fails because the account password is unknown and this is a Laravel app you control, you …

    line 54
  4. Distinctive:

    Only do this with the user's go-ahead and a non-production database.

    line 59
  5. Very specific:

    If a shot still shows a skeleton or spinner, the page is slower than the cap: re-run with --wait 30000 rather than assuming the page is …

    line 71

“Common” is measured: kept by at least 6 in 10 of the 42 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

/browse - View App Pages via Playwright

Take authenticated, scrolling screenshots of a running app's page and describe them.

Project-agnostic resolution

This command works in any repo that has Playwright installed locally. App-specifics (base URL, login flow, default user) come from an optional <repo>/.claude/browse-config.json; credentials are never stored — they come from PW_EMAIL / PW_PASS env at run time.

  • Config: .claude/browse-config.json (see ~/.claude/gitlab-config.example.json's sibling pattern). Keys: baseUrl, loginPath, defaultUser, channel, playwrightDir, outDir, and auth selectors (emailTabText, emailSelector, passwordSelector, submitButtonName). If absent, the helper falls back to sensible defaults (http://localhost:8080, /login, input[type=email] / input[type=password], submit button named "Login").
  • Playwright is resolved from the project's own install (playwrightDir, else storage/playwright, else repo root). If a repo has no Playwright, /browse can't run there.

Arguments

$ARGUMENTS - the URL path to browse, with optional flags: --mobile (iPhone 14 viewport), --login (force re-login), --user <email> (override login email), --wait <ms> (raise the settle cap, default 15000 — see Notes). Examples: /admin/welcome, --mobile /admin/welcome, --login --user ops@example.com /admin/orders.

Instructions

  1. Ensure credentials. Login needs PW_PASS (and an email via --user, PW_EMAIL, or config defaultUser). If PW_PASS isn't set in the environment, ask the user for the password and pass it inline for this run only — do not store it. Example invocation:
    PW_PASS='<password>' node ~/.claude/scripts/browse.mjs $ARGUMENTS
    Use a timeout of 120000ms. Run from the project root (so the helper finds .claude/browse-config.json and the project's Playwright).
  2. Read the output. The helper prints OK <url> and the absolute paths of the screenshots it wrote (page-1.png, page-2.png, … in the configured outDir). Read ALL of those page-*.png files and describe what's on the page to the user.
  3. Handle failures by exit code:
    • exit 2 — Playwright not resolvable → the repo has no Playwright install (or set playwrightDir/BROWSE_PW_DIR).
    • exit 3 — missing PW_PASS/email → ask the user, re-run.
    • exit 4 — LOGIN FAILED → wrong credentials, or the login selectors in browse-config.json don't match this app's form. Confirm creds, then check the auth block.
    • Session/auth-state.json expired → re-run with --login.
  4. Laravel apps only (optional fallback): if login fails because the account password is unknown and this is a Laravel app you control, you can set a known password:
    php artisan tinker --execute="\$u = App\\Models\\User::where('email','<email>')->first(); \$u->password = Hash::make('<password>'); \$u->save();"
    Only do this with the user's go-ahead and a non-production database.

Notes

  • Base URL, login behavior, and the default user are per-project (.claude/browse-config.json).
  • The helper reuses auth-state.json in outDir; --login forces a fresh login.
  • Screenshots are 1920×1080 (desktop) or iPhone 14 size (--mobile).
  • It waits for the page to actually render, not for a fixed delay. Local dev is slow twice over: a dev server compiles modules on demand so first paint lags domcontentloaded, and SPA pages then fetch their data after hydrating, which no page-load event covers. The helper waits until document/script/XHR traffic goes quiet (capped at 15s, raise with --wait <ms> or BROWSE_WAIT_MS). Deliberately NOT networkidle — HMR channels and browser-log shippers keep the network permanently busy, so it would just burn its timeout.
  • If a shot still shows a skeleton or spinner, the page is slower than the cap: re-run with --wait 30000 rather than assuming the page is broken.
  • Set outDir to an absolute path or a project-relative one — the helper resolves it absolutely to avoid nested-output bugs when run from inside the Playwright dir.

Download now (ZIP)

  • Other versions52 projects use a version of this.

    Word for word · 1

    1. AhmedMerza/claude-skills★ 2100% same

    Edited · 0

    None found.

    Wrote their own version · 51

    1. garrytan/gstack★ 139ksame name
    2. WordPress/gutenberg★ 12ksame name
    3. SeifBenayed/cloclo★ 114same name
    4. mr-daedalium/ostack-saas★ 108same name
    5. no-session/pstack★ 96same name
    6. lucas-flatwhite/gstack-ko★ 45same name
    7. shipshitdev/skills★ 38same name
    8. WillNigri/Agentic-Tool-Optimization★ 34same name
    9. Scino/fstack★ 18same name
    10. ulpi-io/browse★ 15same name

    41 more not listed

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use setup-gbrain, open-gstack-browser and 10 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • ShreyRaviSkill

      setup-gbrain

      Set up gbrain for this coding agent: install the CLI, initialize a local PGLite or Supabase brain, register MCP, capture per-remote trust policy. One command from zero to "gbrain is running, and this agent can call it." Use when: "setup gbrain", "connect gbrain", "start gbrain", "install gbrain", "configure gbrain for this machine". (gstack)

      Also in 9 projects that use this

    • seek888Skill

      open-gstack-browser

      Launch GStack Browser — AI-controlled Chromium with the sidebar extension baked in. Opens a visible browser window where you can watch every action in real time. The sidebar shows a live activity feed and chat. Anti-bot stealth built in. Use when asked to "open gstack browser", "launch browser", "connect chrome", "open chrome", "real browser", "launch chrome", "side panel", or "control my browser". Voice triggers (speech-to-text aliases): "show me the browser".

      Also in 11 projects that use this

    • Saqlain-811Skill

      ios-sync

      Regenerate the iOS debug bridge against the latest upstream gstack templates. (gstack)

      Also in 6 projects that use this

    • ShreyRaviSkill

      benchmark-models

      Cross-model benchmark for gstack skills. Runs the same prompt through Claude, GPT (via Codex CLI), and Gemini side-by-side — compares latency, tokens, cost, and optionally quality via LLM judge. Answers "which model is actually best for this skill?" with data instead of vibes. Separate from /benchmark, which measures web page performance. Use when: "benchmark models", "compare models", "which model is best for X", "cross-model comparison", "model shootout". (gstack) Voice triggers (speech-to-text aliases): "compare models", "model shootout", "which model is best".

      Also in 8 projects that use this

    • ayudaySkill

      setup-deploy

      Configure deployment settings for /land-and-deploy. Detects your deploy platform (Fly.io, Render, Vercel, Netlify, Heroku, GitHub Actions, custom), production URL, health check endpoints, and deploy status commands. Writes the configuration to CLAUDE.md so all future deploys are automatic. Use when: "setup deploy", "configure deployment", "set up land-and-deploy", "how do I deploy with gstack", "add deploy config".

      Also in 18 projects that use this

    • Saqlain-811Skill

      ios-clean

      Remove the DebugBridge SPM package and all #if DEBUG wiring from an iOS app. (gstack)

      Also in 5 projects that use this

    • +3 more from ShreyRavi
    • +1 more from Saqlain-811
  • In this repository53 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.