ReddRadar
Agent skill
browser-automation
This skill should be used when the user asks about browser automation, testing web pages, scraping content, filling forms, taking screenshots, or monitoring console/network activity. Activates for E2E testing, web scraping, form automation, or debugging web applications.
Install this agent skill to your Project
npx add-skill https://github.com/mozilla/firefox-devtools-mcp/tree/main/plugins/claude/firefox-devtools/skills/browser-automation
SKILL.md
When the user asks about browser automation, use Firefox DevTools MCP to control a real Firefox browser.
When to Use This Skill
Activate this skill when the user:
- Wants to automate browser interactions ("Fill out this form", "Click the login button")
- Needs E2E testing ("Test the checkout flow", "Verify the login works")
- Requests web scraping ("Extract prices from this page", "Get all links")
- Needs screenshots ("Screenshot this page", "Capture the error state")
- Wants to debug ("Check for JS errors", "Show failed network requests")
Core Workflow
Step 1: Navigate and Snapshot
navigate_page url="https://example.com"
take_snapshot
The snapshot returns a DOM representation with UIDs (e.g., e42) for each interactive element.
Step 2: Interact with Elements
Use UIDs from the snapshot:
fill_by_uid uid="e5" text="user@example.com"
click_by_uid uid="e8"
Step 3: Re-snapshot After Changes
DOM changes invalidate UIDs. Always re-snapshot after:
- Page navigation
- Form submissions
- Dynamic content loads
take_snapshot # Get fresh UIDs
Quick Reference
| Task | Tools |
|---|---|
| Navigate | navigate_page |
| See DOM | take_snapshot |
| Click | click_by_uid |
| Type | fill_by_uid, fill_form_by_uid |
| Screenshot | screenshot_page, screenshot_by_uid |
| Debug | list_console_messages, list_network_requests |
Guidelines
- Always snapshot first: UIDs only exist after
take_snapshot - Re-snapshot after DOM changes: UIDs become stale after interactions
- Check for errors: Use
list_console_messages level="error"to catch JS issues - Firefox only: This MCP controls Firefox, not Chrome or Safari
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
mozilla/bigquery-etl-skills
model-requirements
Use this skill when gathering requirements for new BigQuery data models OR when asked to edit existing queries in bqetl. For new models, guides structured requirements interviews. For existing queries, understands current model, checks downstream dependencies, and gathers requirements for changes. Works as pre-planning before query-writer skill.
mozilla/bigquery-etl-skills
metadata-manager
Use this skill when creating or updating DAG configurations (dags.yaml), schema.yaml, and metadata.yaml files for BigQuery tables. Handles creating new DAGs when needed and coordinates test updates when queries are modified (invokes sql-test-generator as needed). Works with bigquery-etl-core, query-writer, and sql-test-generator skills.
mozilla/bigquery-etl-skills
bigconfig-generator
Use this skill when creating or updating Bigeye monitoring configurations (bigconfig.yml files) for BigQuery tables. Works with metadata-manager skill.
mozilla/bigquery-etl-skills
bigquery-etl-core
The core skill for working within the bigquery-etl repository. Use this skill when understanding project structure, conventions, and common patterns. Works with model-requirements, query-writer, metadata-manager, sql-test-generator, and bigconfig-generator skills.
mozilla/bigquery-etl-skills
query-writer
Use this skill when writing or updating SQL queries (query.sql) or Python ETL scripts (query.py) following Mozilla BigQuery ETL conventions. ALWAYS checks for and updates existing tests when modifying queries. Coordinates downstream updates to schemas and tests. Works with bigquery-etl-core, metadata-manager, and sql-test-generator skills.
mozilla/bigquery-etl-skills
schema-readme-generator
Use this skill to create or update README.md files for BigQuery ETL tables in the mozilla bigquery-etl repository. Follows layout conventions derived from comparing README files across the repo — rich style with emoji headings, Mermaid data flow diagram, graduated example queries, and concise metadata overview table. Requires schema.yaml with complete descriptions (run schema-enricher first if needed) and a complete metadata.yaml.
Didn't find tool you were looking for?