WonderPanda/agent-browser-testing
.claude/skills/agent-browser-testing/SKILL.md
Browser E2E testing patterns using agent-browser CLI for Mana Vault. Use when running end-to-end tests, verifying UI behavior, testing login flows, or debugging browser-based issues. Covers agent-browser commands, test credentials, login flow, and best practices.
tools
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add WonderPanda/mana-vault agent-browser-testingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 4:49 PM7.4s1 file scanned
SKILL.md
- name:
- agent-browser-testing
- description:
- >
Browser End-to-End Testing (agent-browser)
IMPORTANT: All browser-based end-to-end testing MUST be performed using the
agent-browserCLI tool. Do not use Playwright, Puppeteer, or other browser automation libraries directly.
Default Test Credentials:
- Email:
[email protected] - Password:
Password1!
Common Commands:
agent-browser open http://localhost:3001 # Open the web app
agent-browser snapshot -i # Get interactive elements with refs
agent-browser click @e2 # Click element by ref from snapshot
agent-browser fill @e3 "text" # Clear and fill input field
agent-browser type @e3 "text" # Type into input field
agent-browser press Enter # Press keyboard key
agent-browser screenshot # Take screenshot
agent-browser screenshot --full # Full page screenshot
agent-browser get text @e1 # Get text content of element
agent-browser wait 2000 # Wait 2 seconds
agent-browser wait "[data-testid='element']" # Wait for element
Typical Login Flow:
agent-browser open http://localhost:3001/login
agent-browser snapshot -i
agent-browser fill "[name='email']" "[email protected]"
agent-browser fill "[name='password']" "Password1!"
agent-browser click "button[type='submit']"
agent-browser wait 2000
agent-browser snapshot -i # Verify logged in state
Best Practices:
- Always use
snapshot -iafter navigation or actions to get current interactive elements with refs - Use refs (@e1, @e2, etc.) from snapshots for reliable element targeting
- Use CSS selectors when refs are not suitable (e.g.,
[data-testid='...'],[name='...']) - Add waits after actions that trigger navigation or async updates
- Take screenshots when debugging or verifying visual state
- Use sessions (
--session <name>) to isolate test runs - Use short wait times - The app is designed to be snappy. Start with short intervals like
150msand only increase if needed. Avoid defaulting to long waits like1000msor2000ms.
Session Management:
agent-browser --session test1 open http://localhost:3001 # Isolated session
agent-browser --session test1 snapshot -i # Same session
agent-browser session list # List active sessions
Debugging:
agent-browser --headed open http://localhost:3001 # Show browser window
agent-browser console # View console logs
agent-browser errors # View page errors
agent-browser highlight "[selector]" # Highlight element
Related Skills
WonderPanda/worktrunk-setup
development
VerifiedTrustedCommunity
Set up worktrunk (git worktree manager) with dynamic port allocation for Better-T-Stack monorepos using Doppler, Alchemy, and Vite. Use when bootstrapping a new project's worktree workflow, or when asked to "set up worktrunk", "configure worktrees", "add worktree support", or "set up dynamic ports for worktrees". Covers: post-create hooks (Doppler setup, dependency install, .env.worktree generation), env-based port overrides in Vite and Alchemy configs, and dev script modification to source worktree-specific env vars after Doppler injection.
SKILL.mdUpdated Apr 16, 2026
WonderPanda/tanstack-db-client
tools
VerifiedTrustedCommunity
TanStack DB client-side reactive data patterns for Mana Vault. Use when working with useLiveQuery hooks, client-side collections, RxDB/Dexie sync, or any reactive data queries in the web app. Covers hook locations, DB setup, and query builder best practices.
SKILL.mdUpdated Apr 16, 2026
WonderPanda/react-native-expo
development
VerifiedTrustedCommunity
React Native and Expo patterns for Mana Vault mobile app. Use when working on the native app in apps/native/, modifying Expo Router routes, HeroUI Native components, or Uniwind styling. Covers project structure and key conventions.
SKILL.mdUpdated Apr 16, 2026
WonderPanda/react-components
development
VerifiedTrustedCommunity
React component patterns, styling conventions, and UI guidelines for Mana Vault web app. Use when creating or modifying React components, working with TailwindCSS, shadcn/ui, class-variance-authority, or route components in TanStack Router.
SKILL.mdUpdated Apr 16, 2026