القائمة
when asking to check ui or tests automation in browser
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | agent-browser |
| description | when asking to check ui or tests automation in browser |
Use agent-browser CLI for browser automation tasks: UI checks, form testing, screenshots, visual diffs.
Requires: npm install -g agent-browser && agent-browser install
Save screenshots, PDFs and diffs to .claude/local/screenshots/ (unversioned via .claude/ gitignore).
Create the directory before first use: mkdir -p .claude/local/screenshots
agent-browser screenshot .claude/local/screenshots/page.png
agent-browser pdf .claude/local/screenshots/page.pdf
agent-browser diff screenshot --baseline .claude/local/screenshots/before.png -o .claude/local/screenshots/diff.png
agent-browser open <url>agent-browser snapshot (returns elements with refs like @e1, @e2)@refs from the snapshotagent-browser close
@eNrefs are single-use per snapshot. Any click that triggers navigation invalidates all refs. Always callsnapshotagain before the next interaction.
scrollintoview expects a CSS selector, not an @eN ref — use eval instead:
agent-browser eval "document.querySelector('[aria-label=\"Label\"]').scrollIntoView()"
find text/role only supports click and hover as subactions — for fill or other interactions, use snapshot + @refagent-browser open <url> # Navigate to URL
agent-browser close # Close browser
agent-browser snapshot # Accessibility tree with @refs
agent-browser screenshot [path] # Screenshot (--full for full page, --annotate for labels)
agent-browser pdf <path> # Save as PDF
agent-browser click @e1 # Click
agent-browser dblclick @e1 # Double-click
agent-browser fill @e2 "text" # Clear and type
agent-browser type @e2 "text" # Type without clearing
agent-browser press Enter # Press key
agent-browser press Control+a # Key combination
agent-browser hover @e1 # Hover
agent-browser check @e1 # Check checkbox
agent-browser uncheck @e1 # Uncheck checkbox
agent-browser select @e1 "value" # Select dropdown
agent-browser scroll down 500 # Scroll page
agent-browser scrollintoview @e1 # Scroll element into view
agent-browser drag @e1 @e2 # Drag and drop
agent-browser upload @e1 file.png # Upload file
agent-browser get text @e1 # Get element text
agent-browser get value @e1 # Get input value
agent-browser get html @e1 # Get innerHTML
agent-browser get attr @e1 href # Get attribute
agent-browser get title # Get page title
agent-browser get url # Get current URL
agent-browser get count @e1 # Count matching elements
agent-browser is visible @e1 # Check visibility
agent-browser is enabled @e1 # Check if enabled
agent-browser is checked @e1 # Check if checked
agent-browser wait @e1 # Wait for element
agent-browser wait 2000 # Wait milliseconds
agent-browser wait --text "Success" # Wait for text
agent-browser wait --url "**/path" # Wait for URL pattern
agent-browser wait --load networkidle
agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "user@test.com"
agent-browser find testid "login-btn" click
agent-browser tab # List tabs
agent-browser tab new [url] # New tab
agent-browser tab <n> # Switch to tab n
agent-browser tab close [n] # Close tab
agent-browser diff snapshot # Compare current vs last
agent-browser diff snapshot --baseline before.txt # Compare vs saved file
agent-browser diff screenshot --baseline before.png # Visual pixel diff
agent-browser diff url <url1> <url2> # Compare two URLs
agent-browser eval "document.title"
agent-browser network requests # View requests
agent-browser network requests --filter api # Filter
agent-browser network route <url> --abort # Block requests
agent-browser set viewport 1280 720
agent-browser set device "iPhone 15"
agent-browser set media dark
agent-browser set offline on
agent-browser console # View console messages
agent-browser errors # View uncaught errors
| DO | DON'T |
|---|---|
Call snapshot again after every click, navigation, or DOM mutation | Reuse @eN refs from a previous snapshot — they are invalid after any page change |
Use eval "document.querySelector('...').scrollIntoView()" to scroll to an element | Use scrollintoview @eN — it expects a CSS selector, not a ref |
Use find role/text/label/testid for stable semantic locators when only click or hover is needed | Use find ... fill — find only supports click and hover as subactions |
Create .claude/local/screenshots/ before the first screenshot command | Assume the directory exists |
Call wait --load networkidle after navigation-triggering clicks | Proceed immediately after a click — network may not have settled |
Close the browser with agent-browser close when done | Leave the session open between tasks |
Use this checklist when running a multi-step browser flow:
.claude/local/screenshots/ exists before saving any fileopen <url> called — browser is on the correct pagesnapshot called — you have fresh @eN refssnapshot again before the next interactionwait --load networkidle (or wait --text / wait --url) used after navigation-triggering clicksclose called at the end of the sessionagent-browser open https://example.com/form
agent-browser snapshot
# Output: textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot # Check result
Onboard a developer to an unfamiliar repository, big-picture first. Produces a Purpose/Context section (what the repo is and why it exists), a Big Picture built with C4 diagrams (L1 System Context, L2 Container, optional L3 Component) plus event-reaction flow diagrams for async triggers (stream/queue/schedule/object-event), a Navigating-the-Code section (conventions, lean directory map, testing strategy), a Running-It-Locally checklist with the fast pre-PR loop, a Deploying-It section (deployment model, function/trigger inventory, managed-service graph, envs/secrets, CI/CD), and a Security Posture map — every claim cited to exact files, diagrams before code. Use for "onboard me", "help me understand this repo", "give me an overview", "explain this codebase's architecture", "what architecture pattern does this use", "how is this repo structured", "how do I run this locally", "what's the testing strategy here", "how is this service deployed", "how does CI/CD work here", or "what's the security posture". Read-on
Orchestrate implementation of one hexagonal Rust slice by dispatching agents in the correct order — build the domain core (model + use case + ports) first, then fan out the driven and driving adapters in parallel, then wire bootstrap serially. Use when you want to implement a ports-and-adapters slice with parallel adapter work that does not interfere. Trigger for "implement this slice hexagonally", "build the domain then the adapters in parallel", "scaffold a ports-and-adapters feature end to end". For the layering RULES themselves use rust-hexagonal; this skill is the DISPATCH recipe.
Structure and write user documentation with the Diátaxis framework (Tutorials, How-to guides, Reference, Explanation). Use when documenting content for users, designing the architecture of a docs set, or deciding what kind of doc a piece of content should be. Trigger for: "document this for users", "write a tutorial", "write a how-to guide", "structure our docs", "organize the documentation", "what kind of doc is this", "how should I document X", "audit our docs", "are these docs in the right place". NOT for: API rule extraction from code (use spec-extract), feature specs (use spec-create), or onboarding a developer to a repo (use onboarding).
Design or review Rust services using hexagonal (ports and adapters) architecture with idiomatic ownership, errors, and testing. Use when structuring a Rust project, deciding where a trait or dependency belongs, or auditing layering between domain and infrastructure.
Structure Rust code into cohesive modules and functions. Use when writing new Rust feature code, adding a module or a non-trivial function, deciding how to organize a file, splitting a god-file into a directory module, breaking a long function into an orchestrator plus phase functions, keeping an owned resource (transaction, lock, accumulator) from leaking across boundaries, or reviewing module/function structure. Apply while writing, not only when refactoring. Architecture-agnostic — any Rust code, hexagonal or not.
Interview the user relentlessly about every aspect of a plan, walking down each branch of the design tree and resolving dependencies between decisions one-by-one until a shared understanding is reached. Use when pressure-testing a plan, design, or feature idea before implementation, or before running spec-create. Trigger for "grill me", "interview me about this plan", "poke holes in my design", "challenge my assumptions", "stress-test this approach". NOT for writing code or implementing tasks (use spec-impl).