@vodailoc/kilo-kit-mcp 1.1.0 → 1.2.0

package/skills/operations/chrome-devtools/scripts/PERSISTENT-BROWSER.md

@@ -1,107 +1,107 @@
-# Persistent Browser Mode
-
-These scripts enable you to launch Chrome once and keep it open for multiple commands, making it easier to interact with authenticated sessions and multi-step workflows.
-
-## Quick Start
-
-### 1. Launch Persistent Browser
-
-```bash
-# Launch browser (visible window)
-node launch-persistent.js --headless=false
-
-# Launch with initial URL
-node launch-persistent.js --headless=false --url=https://example.com/login
-
-# Launch headless
-node launch-persistent.js
-```
-
-The browser will stay open and print a message confirming it's ready.
-
-### 2. Run Commands
-
-All existing scripts will automatically connect to the persistent browser:
-
-```bash
-# Navigate to a page
-node navigate.js --url https://example.com/dashboard
-
-# Take a screenshot
-node screenshot.js --output ./screenshot.png
-
-# Run JavaScript
-node evaluate.js --script "document.title"
-
-# Get page snapshot
-node snapshot.js
-
-# Fill forms
-node fill.js --selector "#username" --value "user@example.com"
-node click.js --selector "button[type=submit]"
-```
-
-### 3. Close Browser
-
-```bash
-# Close the persistent browser
-node close-persistent.js
-
-# Or press Ctrl+C in the launch-persistent.js terminal
-```
-
-## How It Works
-
-1. **launch-persistent.js** starts Chrome with remote debugging enabled and saves the WebSocket endpoint to `.browser-endpoint`
-2. All other scripts check for this file first and connect to the existing browser if found
-3. If no persistent browser exists, scripts fall back to launching their own temporary browser (original behavior)
-
-## Use Cases
-
-### Authenticated Sessions
-```bash
-# Launch browser
-node launch-persistent.js --headless=false --url=https://app.example.com/login
-
-# Manually log in through the visible browser window
-# Then run commands on authenticated pages
-
-node navigate.js --url=https://app.example.com/dashboard
-node screenshot.js --output ./dashboard.png
-node evaluate.js --script "document.querySelector('.user-name').textContent"
-```
-
-### Multi-Step Workflows
-```bash
-# Launch browser
-node launch-persistent.js --headless=false
-
-# Fill out multi-page form
-node navigate.js --url=https://example.com/signup
-node fill.js --selector "#email" --value "user@example.com"
-node click.js --selector ".next-button"
-# Wait for page to load, then continue...
-node fill.js --selector "#password" --value "secret123"
-node click.js --selector ".submit-button"
-```
-
-### Accessibility Audits on Live Pages
-```bash
-# Launch and navigate manually to complex authenticated state
-node launch-persistent.js --headless=false
-
-# After manual navigation/interaction, run audits
-node evaluate.js --script "/* accessibility check script */"
-node screenshot.js --output ./audit.png
-```
-
-## Advantages
-
-- **Manual interaction**: Log in, navigate, or manipulate the page manually
-- **Persistent state**: Cookies, localStorage, and session state preserved
-- **Faster iterations**: No browser startup delay for each command
-- **Real-world testing**: Test on actual authenticated or complex application states
-
-## Backwards Compatibility
-
-All existing scripts work exactly as before if no persistent browser is running. The enhancement is completely opt-in.
+# Persistent Browser Mode
+
+These scripts enable you to launch Chrome once and keep it open for multiple commands, making it easier to interact with authenticated sessions and multi-step workflows.
+
+## Quick Start
+
+### 1. Launch Persistent Browser
+
+```bash
+# Launch browser (visible window)
+node launch-persistent.js --headless=false
+
+# Launch with initial URL
+node launch-persistent.js --headless=false --url=https://example.com/login
+
+# Launch headless
+node launch-persistent.js
+```
+
+The browser will stay open and print a message confirming it's ready.
+
+### 2. Run Commands
+
+All existing scripts will automatically connect to the persistent browser:
+
+```bash
+# Navigate to a page
+node navigate.js --url https://example.com/dashboard
+
+# Take a screenshot
+node screenshot.js --output ./screenshot.png
+
+# Run JavaScript
+node evaluate.js --script "document.title"
+
+# Get page snapshot
+node snapshot.js
+
+# Fill forms
+node fill.js --selector "#username" --value "user@example.com"
+node click.js --selector "button[type=submit]"
+```
+
+### 3. Close Browser
+
+```bash
+# Close the persistent browser
+node close-persistent.js
+
+# Or press Ctrl+C in the launch-persistent.js terminal
+```
+
+## How It Works
+
+1. **launch-persistent.js** starts Chrome with remote debugging enabled and saves the WebSocket endpoint to `.browser-endpoint`
+2. All other scripts check for this file first and connect to the existing browser if found
+3. If no persistent browser exists, scripts fall back to launching their own temporary browser (original behavior)
+
+## Use Cases
+
+### Authenticated Sessions
+```bash
+# Launch browser
+node launch-persistent.js --headless=false --url=https://app.example.com/login
+
+# Manually log in through the visible browser window
+# Then run commands on authenticated pages
+
+node navigate.js --url=https://app.example.com/dashboard
+node screenshot.js --output ./dashboard.png
+node evaluate.js --script "document.querySelector('.user-name').textContent"
+```
+
+### Multi-Step Workflows
+```bash
+# Launch browser
+node launch-persistent.js --headless=false
+
+# Fill out multi-page form
+node navigate.js --url=https://example.com/signup
+node fill.js --selector "#email" --value "user@example.com"
+node click.js --selector ".next-button"
+# Wait for page to load, then continue...
+node fill.js --selector "#password" --value "secret123"
+node click.js --selector ".submit-button"
+```
+
+### Accessibility Audits on Live Pages
+```bash
+# Launch and navigate manually to complex authenticated state
+node launch-persistent.js --headless=false
+
+# After manual navigation/interaction, run audits
+node evaluate.js --script "/* accessibility check script */"
+node screenshot.js --output ./audit.png
+```
+
+## Advantages
+
+- **Manual interaction**: Log in, navigate, or manipulate the page manually
+- **Persistent state**: Cookies, localStorage, and session state preserved
+- **Faster iterations**: No browser startup delay for each command
+- **Real-world testing**: Test on actual authenticated or complex application states
+
+## Backwards Compatibility
+
+All existing scripts work exactly as before if no persistent browser is running. The enhancement is completely opt-in.

package/skills/operations/chrome-devtools/scripts/README.md

@@ -1,213 +1,213 @@
-# Chrome DevTools Scripts
-
-CLI scripts for browser automation using Puppeteer.
-
-**CRITICAL**: Always check `pwd` before running scripts.
-
-## Installation
-
-### Quick Install
-
-```bash
-pwd  # Should show current working directory
-cd .claude/skills/chrome-devtools/scripts
-./install.sh  # Auto-checks dependencies and installs
-```
-
-### Manual Installation
-
-**Linux/WSL** - Install system dependencies first:
-```bash
-./install-deps.sh  # Auto-detects OS (Ubuntu, Debian, Fedora, etc.)
-```
-
-Or manually:
-```bash
-sudo apt-get install -y libnss3 libnspr4 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1
-```
-
-**All platforms** - Install Node dependencies:
-```bash
-npm install
-```
-
-## Scripts
-
-**CRITICAL**: Always check `pwd` before running scripts.
-
-### navigate.js
-Navigate to a URL.
-
-```bash
-node navigate.js --url https://example.com [--wait-until networkidle2] [--timeout 30000]
-```
-
-### screenshot.js
-Take a screenshot with automatic compression.
-
-**Important**: Always save screenshots to `./docs/screenshots` directory.
-
-```bash
-node screenshot.js --output screenshot.png [--url https://example.com] [--full-page true] [--selector .element] [--max-size 5] [--no-compress]
-```
-
-**Automatic Compression**: Screenshots >5MB are automatically compressed using ImageMagick to ensure compatibility with Gemini API and Claude Code. Install ImageMagick for this feature:
-- macOS: `brew install imagemagick`
-- Linux: `sudo apt-get install imagemagick`
-
-Options:
-- `--max-size N` - Custom size threshold in MB (default: 5)
-- `--no-compress` - Disable automatic compression
-- `--format png|jpeg` - Output format (default: png)
-- `--quality N` - JPEG quality 0-100 (default: auto)
-
-### click.js
-Click an element.
-
-```bash
-node click.js --selector ".button" [--url https://example.com] [--wait-for ".result"]
-```
-
-### fill.js
-Fill form fields.
-
-```bash
-node fill.js --selector "#input" --value "text" [--url https://example.com] [--clear true]
-```
-
-### evaluate.js
-Execute JavaScript in page context.
-
-```bash
-node evaluate.js --script "document.title" [--url https://example.com]
-```
-
-### snapshot.js
-Get DOM snapshot with interactive elements.
-
-```bash
-node snapshot.js [--url https://example.com] [--output snapshot.json]
-```
-
-### console.js
-Monitor console messages.
-
-```bash
-node console.js --url https://example.com [--types error,warn] [--duration 5000]
-```
-
-### network.js
-Monitor network requests.
-
-```bash
-node network.js --url https://example.com [--types xhr,fetch] [--output requests.json]
-```
-
-### performance.js
-Measure performance metrics and record trace.
-
-```bash
-node performance.js --url https://example.com [--trace trace.json] [--metrics] [--resources true]
-```
-
-## Common Options
-
-- `--headless false` - Show browser window
-- `--close false` - Keep browser open
-- `--timeout 30000` - Set timeout in milliseconds
-- `--wait-until networkidle2` - Wait strategy (load, domcontentloaded, networkidle0, networkidle2)
-
-## Selector Support
-
-Scripts that accept `--selector` (click.js, fill.js, screenshot.js) support both **CSS** and **XPath** selectors.
-
-### CSS Selectors (Default)
-
-```bash
-# Element tag
-node click.js --selector "button" --url https://example.com
-
-# Class selector
-node click.js --selector ".btn-submit" --url https://example.com
-
-# ID selector
-node fill.js --selector "#email" --value "user@example.com" --url https://example.com
-
-# Attribute selector
-node click.js --selector 'button[type="submit"]' --url https://example.com
-
-# Complex selector
-node screenshot.js --selector "div.container > button.btn-primary" --output btn.png
-```
-
-### XPath Selectors
-
-XPath selectors start with `/` or `(//` and are automatically detected:
-
-```bash
-# Text matching - exact
-node click.js --selector '//button[text()="Submit"]' --url https://example.com
-
-# Text matching - contains
-node click.js --selector '//button[contains(text(),"Submit")]' --url https://example.com
-
-# Attribute matching
-node fill.js --selector '//input[@type="email"]' --value "user@example.com"
-
-# Multiple conditions
-node click.js --selector '//button[@type="submit" and contains(text(),"Save")]'
-
-# Descendant selection
-node screenshot.js --selector '//div[@class="modal"]//button[@class="close"]' --output modal.png
-
-# Nth element
-node click.js --selector '(//button)[2]'  # Second button on page
-```
-
-### Discovering Selectors
-
-Use `snapshot.js` to discover correct selectors:
-
-```bash
-# Get all interactive elements
-node snapshot.js --url https://example.com | jq '.elements[]'
-
-# Find buttons
-node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="BUTTON")'
-
-# Find inputs
-node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="INPUT")'
-```
-
-### Security
-
-XPath selectors are validated to prevent injection attacks. The following patterns are blocked:
-- `javascript:`
-- `<script`
-- `onerror=`, `onload=`, `onclick=`
-- `eval(`, `Function(`, `constructor(`
-
-Selectors exceeding 1000 characters are rejected (DoS prevention).
-
-## Output Format
-
-All scripts output JSON to stdout:
-
-```json
-{
-  "success": true,
-  "url": "https://example.com",
-  "title": "Example Domain",
-  ...
-}
-```
-
-Errors are output to stderr:
-
-```json
-{
-  "success": false,
-  "error": "Error message",
-  "stack": "..."
-}
-```
+# Chrome DevTools Scripts
+
+CLI scripts for browser automation using Puppeteer.
+
+**CRITICAL**: Always check `pwd` before running scripts.
+
+## Installation
+
+### Quick Install
+
+```bash
+pwd  # Should show current working directory
+cd .claude/skills/chrome-devtools/scripts
+./install.sh  # Auto-checks dependencies and installs
+```
+
+### Manual Installation
+
+**Linux/WSL** - Install system dependencies first:
+```bash
+./install-deps.sh  # Auto-detects OS (Ubuntu, Debian, Fedora, etc.)
+```
+
+Or manually:
+```bash
+sudo apt-get install -y libnss3 libnspr4 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1
+```
+
+**All platforms** - Install Node dependencies:
+```bash
+npm install
+```
+
+## Scripts
+
+**CRITICAL**: Always check `pwd` before running scripts.
+
+### navigate.js
+Navigate to a URL.
+
+```bash
+node navigate.js --url https://example.com [--wait-until networkidle2] [--timeout 30000]
+```
+
+### screenshot.js
+Take a screenshot with automatic compression.
+
+**Important**: Always save screenshots to `./docs/screenshots` directory.
+
+```bash
+node screenshot.js --output screenshot.png [--url https://example.com] [--full-page true] [--selector .element] [--max-size 5] [--no-compress]
+```
+
+**Automatic Compression**: Screenshots >5MB are automatically compressed using ImageMagick to ensure compatibility with Gemini API and Claude Code. Install ImageMagick for this feature:
+- macOS: `brew install imagemagick`
+- Linux: `sudo apt-get install imagemagick`
+
+Options:
+- `--max-size N` - Custom size threshold in MB (default: 5)
+- `--no-compress` - Disable automatic compression
+- `--format png|jpeg` - Output format (default: png)
+- `--quality N` - JPEG quality 0-100 (default: auto)
+
+### click.js
+Click an element.
+
+```bash
+node click.js --selector ".button" [--url https://example.com] [--wait-for ".result"]
+```
+
+### fill.js
+Fill form fields.
+
+```bash
+node fill.js --selector "#input" --value "text" [--url https://example.com] [--clear true]
+```
+
+### evaluate.js
+Execute JavaScript in page context.
+
+```bash
+node evaluate.js --script "document.title" [--url https://example.com]
+```
+
+### snapshot.js
+Get DOM snapshot with interactive elements.
+
+```bash
+node snapshot.js [--url https://example.com] [--output snapshot.json]
+```
+
+### console.js
+Monitor console messages.
+
+```bash
+node console.js --url https://example.com [--types error,warn] [--duration 5000]
+```
+
+### network.js
+Monitor network requests.
+
+```bash
+node network.js --url https://example.com [--types xhr,fetch] [--output requests.json]
+```
+
+### performance.js
+Measure performance metrics and record trace.
+
+```bash
+node performance.js --url https://example.com [--trace trace.json] [--metrics] [--resources true]
+```
+
+## Common Options
+
+- `--headless false` - Show browser window
+- `--close false` - Keep browser open
+- `--timeout 30000` - Set timeout in milliseconds
+- `--wait-until networkidle2` - Wait strategy (load, domcontentloaded, networkidle0, networkidle2)
+
+## Selector Support
+
+Scripts that accept `--selector` (click.js, fill.js, screenshot.js) support both **CSS** and **XPath** selectors.
+
+### CSS Selectors (Default)
+
+```bash
+# Element tag
+node click.js --selector "button" --url https://example.com
+
+# Class selector
+node click.js --selector ".btn-submit" --url https://example.com
+
+# ID selector
+node fill.js --selector "#email" --value "user@example.com" --url https://example.com
+
+# Attribute selector
+node click.js --selector 'button[type="submit"]' --url https://example.com
+
+# Complex selector
+node screenshot.js --selector "div.container > button.btn-primary" --output btn.png
+```
+
+### XPath Selectors
+
+XPath selectors start with `/` or `(//` and are automatically detected:
+
+```bash
+# Text matching - exact
+node click.js --selector '//button[text()="Submit"]' --url https://example.com
+
+# Text matching - contains
+node click.js --selector '//button[contains(text(),"Submit")]' --url https://example.com
+
+# Attribute matching
+node fill.js --selector '//input[@type="email"]' --value "user@example.com"
+
+# Multiple conditions
+node click.js --selector '//button[@type="submit" and contains(text(),"Save")]'
+
+# Descendant selection
+node screenshot.js --selector '//div[@class="modal"]//button[@class="close"]' --output modal.png
+
+# Nth element
+node click.js --selector '(//button)[2]'  # Second button on page
+```
+
+### Discovering Selectors
+
+Use `snapshot.js` to discover correct selectors:
+
+```bash
+# Get all interactive elements
+node snapshot.js --url https://example.com | jq '.elements[]'
+
+# Find buttons
+node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="BUTTON")'
+
+# Find inputs
+node snapshot.js --url https://example.com | jq '.elements[] | select(.tagName=="INPUT")'
+```
+
+### Security
+
+XPath selectors are validated to prevent injection attacks. The following patterns are blocked:
+- `javascript:`
+- `<script`
+- `onerror=`, `onload=`, `onclick=`
+- `eval(`, `Function(`, `constructor(`
+
+Selectors exceeding 1000 characters are rejected (DoS prevention).
+
+## Output Format
+
+All scripts output JSON to stdout:
+
+```json
+{
+  "success": true,
+  "url": "https://example.com",
+  "title": "Example Domain",
+  ...
+}
+```
+
+Errors are output to stderr:
+
+```json
+{
+  "success": false,
+  "error": "Error message",
+  "stack": "..."
+}
+```