chore: add a skill for chrome-devtools

skills/chrome-devtools-cli/SKILL.md

@@ -0,0 +1,152 @@
+---
+name: chrome-devtools-cli
+description: Use this to skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.
+---
+
+The `chrome-devtools-mcp` package includes a CLI interface that allows you to interact with the browser directly from your terminal. This is particularly useful for debugging or when you want an agent to generate scripts that automate browser actions.
+
+## Getting started
+
+Install the package globally to make the `chrome-devtools` command available:
+
+```sh
+npm i chrome-devtools-mcp@latest -g
+chrome-devtools status # check if install worked.
+```
+
+## How it works
+
+The CLI acts as a client to a background `chrome-devtools-mcp` daemon.
+
+- **Automatic Start**: The first time you call a tool (e.g., `list_pages`), the CLI automatically starts the MCP server and the browser in the background if they aren't already running.
+- **Persistence**: The same background instance is reused for subsequent commands, preserving the browser state (open pages, cookies, etc.).
+- **Manual Control**: You can explicitly manage the background process using `start`, `stop`, and `status`. The `start` command forwards all subsequent arguments to the underlying MCP server (e.g., `--headless`, `--userDataDir`).
+
+Snapshots looks like this:
+
+```
+uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
+  uid=1_1 heading "Example Domain" level="1"
+  uid=1_2 StaticText "This domain is for use in documentation examples without needing permission. Avoid use in operations."
+  uid=1_3 link "Learn more" url="https://iana.org/domains/example"
+    uid=1_4 StaticText "Learn more
+```
+
+## Command Usage
+
+The CLI supports all tools available in the Chrome DevTools MCP by default.
+
+```sh
+chrome-devtools <tool> [arguments] [flags]
+```
+
+- **Required Arguments**: Passed as positional arguments.
+- **Optional Arguments**: Passed as flags (e.g., `--filePath`, `--fullPage`).
+- **--help**: Each command supports `--help` for details about arguments.
+
+Each command accepts `--format=json` to output in JSON format. The default format is Markdown (`md`).
+
+## Input Automation (<uid> from snapshot)
+
+```bash
+chrome-devtools take_snapshot --help # Help message for commands, works for any command.
+chrome-devtools take_snapshot # Take a text snapshot of the page to get UIDs for elements
+chrome-devtools click "id" # Clicks on the provided element
+chrome-devtools click "id" --dblClick true --includeSnapshot true # Double clicks and returns a snapshot
+chrome-devtools drag "src" "dst" # Drag an element onto another element
+chrome-devtools drag "src" "dst" --includeSnapshot true # Drag an element and return a snapshot
+chrome-devtools fill "id" "text" # Type text into an input or select an option
+chrome-devtools fill "id" "text" --includeSnapshot true # Fill an element and return a snapshot
+chrome-devtools fill_form "json" # Fill out multiple form elements at once
+chrome-devtools fill_form "json" --includeSnapshot true # Fill a form and return a snapshot
+chrome-devtools handle_dialog accept # Handle a browser dialog
+chrome-devtools handle_dialog dismiss --promptText "hi" # Dismiss a dialog with prompt text
+chrome-devtools hover "id" # Hover over the provided element
+chrome-devtools hover "id" --includeSnapshot true # Hover over an element and return a snapshot
+chrome-devtools press_key "Enter" # Press a key or key combination
+chrome-devtools press_key "Control+A" --includeSnapshot true # Press a key and return a snapshot
+chrome-devtools type_text "hello" # Type text using keyboard into a focused input
+chrome-devtools type_text "hello" --submitKey "Enter" # Type text and press a submit key
+chrome-devtools upload_file "id" "file.txt" # Upload a file through a provided element
+chrome-devtools upload_file "id" "file.txt" --includeSnapshot true # Upload a file and return a snapshot
+```
+
+## Navigation
+
+```bash
+chrome-devtools close_page 1 # Closes the page by its index
+chrome-devtools list_pages # Get a list of pages open in the browser
+chrome-devtools navigate_page --url "https://example.com" # Navigates the currently selected page to a URL
+chrome-devtools navigate_page --type "reload" --ignoreCache true # Reload page ignoring cache
+chrome-devtools navigate_page --url "https://example.com" --timeout 5000 # Navigate with a timeout
+chrome-devtools navigate_page --handleBeforeUnload "accept" # Handle before unload dialog
+chrome-devtools navigate_page --type "back" --initScript "foo()" # Navigate back and run an init script
+chrome-devtools new_page "https://example.com" # Creates a new page
+chrome-devtools new_page "https://example.com" --background true --timeout 5000 # Create new page in background
+chrome-devtools new_page "https://example.com" --isolatedContext "ctx" # Create new page with isolated context
+chrome-devtools select_page 1 # Select a page as a context for future tool calls
+chrome-devtools select_page 1 --bringToFront true # Select a page and bring it to front
+chrome-devtools wait_for "Success!" # Wait for the specified text to appear on the page
+chrome-devtools wait_for "Success!" --timeout 10000 # Wait for text with a timeout
+```
+
+## Emulation
+
+```bash
+chrome-devtools emulate --networkConditions "Offline" # Emulate network conditions
+chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0,0" # Emulate CPU throttling and geolocation
+chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080" # Emulate color scheme and viewport
+chrome-devtools emulate --userAgent "Mozilla/5.0..." # Emulate user agent
+chrome-devtools resize_page 1920 1080 # Resizes the selected page's window
+```
+
+## Performance
+
+```bash
+chrome-devtools performance_analyze_insight "1" "LCPBreakdown" # Get more details on a specific Performance Insight
+chrome-devtools performance_start_trace true false # Starts a performance trace recording
+chrome-devtools performance_start_trace true true --filePath t.gz # Start trace and save to a file
+chrome-devtools performance_stop_trace # Stops the active performance trace
+chrome-devtools performance_stop_trace --filePath "t.json" # Stop trace and save to a file
+chrome-devtools take_memory_snapshot "./snap.heapsnapshot" # Capture a memory heapsnapshot
+```
+
+## Network
+
+```bash
+chrome-devtools get_network_request # Get the currently selected network request
+chrome-devtools get_network_request --reqid 1 --requestFilePath req.json # Get request by id and save to file
+chrome-devtools get_network_request --responseFilePath res.json # Save response body to file
+chrome-devtools list_network_requests # List all network requests
+chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 # List network requests with pagination
+chrome-devtools list_network_requests --resourceTypes '["Fetch"]' # Filter requests by resource type
+chrome-devtools list_network_requests --includePreservedRequests true # Include preserved requests
+```
+
+## Debugging & Inspection
+
+```bash
+chrome-devtools evaluate_script "() => document.title" # Evaluate a JavaScript function on the page
+evaluate_script "(a) => a.innerText" --args 1_4 # Evaluate JS with UID arguments
+chrome-devtools get_console_message 1 # Gets a console message by its ID
+chrome-devtools lighthouse_audit --mode "navigation" # Run Lighthouse audit for navigation
+chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile" # Run Lighthouse audit for a snapshot on mobile
+chrome-devtools lighthouse_audit --outputDirPath ./out # Run Lighthouse audit and save reports
+chrome-devtools list_console_messages # List all console messages
+chrome-devtools list_console_messages --pageSize 20 --pageIdx 1 # List console messages with pagination
+chrome-devtools list_console_messages --types '["error"]' # Filter console messages by type
+chrome-devtools list_console_messages --includePreservedMessages true # Include preserved messages
+chrome-devtools take_screenshot # Take a screenshot of the page viewport
+chrome-devtools take_screenshot --fullPage true --format "jpeg" --quality 80 # Take a full page screenshot as JPEG with quality
+chrome-devtools take_screenshot --uid "id" --filePath "s.png" # Take a screenshot of an element
+chrome-devtools take_snapshot # Take a text snapshot of the page from the a11y tree
+chrome-devtools take_snapshot --verbose true --filePath "s.txt" # Take a verbose snapshot and save to file
+```
+
+## Service Management
+
+```bash
+chrome-devtools start   # Start or restart chrome-devtools-mcp
+chrome-devtools status  # Checks if chrome-devtools-mcp is running
+chrome-devtools stop    # Stop chrome-devtools-mcp if any
+```