[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D16FR362WF7GR0H2FPHM02":3,"skill-same:01M6D16FR362WF7GR0H2FPHM02":190},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":14,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M6D16FR362WF7GR0H2FPHM02","ck:chrome-devtools",null,"Automate browsers with Puppeteer CLI scripts and persistent sessions. Use for screenshots, performance analysis, network monitoring, web scraping, form automation, JavaScript debugging.","MinhHoangDono\u002Fantigravity-kit","MinhHoangDono","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62208550?v=4","01M6D15EY1G5VZYWSRXHRFQREJ","Hoang_Gummy","01M6D15F2G9Y2R9EYWF8X3XPWA",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"chrome devtools","ck:chrome devtools","devtools","chrome","automation","sessions","debugging","puppeteer","performance","monitoring","screenshots","network","analysis","automate","web scraping","scraping","use","network monitoring","task","cli","2026-11-10 10:12:30",false,"---\nname: ck:chrome-devtools\ndescription: Automate browsers with Puppeteer CLI scripts and persistent sessions. Use for screenshots, performance analysis, network monitoring, web scraping, form automation, JavaScript debugging.\nlicense: Apache-2.0\nversion: 1.1.0\nargument-hint: \"[url or task]\"\n---\n\n# Chrome DevTools Agent Skill\n\nBrowser automation via Puppeteer scripts with persistent sessions. All scripts output JSON.\n\n## Skill Location\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n\n```bash\n# Detect skill location (no cd needed - scripts use __dirname for paths)\nSKILL_DIR=\"\"\nif [ -d \".claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\" ]; then\n  SKILL_DIR=\".claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\"\nelif [ -d \"$HOME\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\" ]; then\n  SKILL_DIR=\"$HOME\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\"\nfi\n# Run scripts with full path: node \"$SKILL_DIR\u002Fscript.js\" --args\n```\n\n## Choosing Your Approach\n\n| Scenario | Approach |\n|----------|----------|\n| **Source-available sites** | Read source code first, write selectors directly |\n| **Unknown layouts** | Use `aria-snapshot.js` for semantic discovery |\n| **Visual inspection** | Take screenshots to verify rendering |\n| **Debug issues** | Collect console logs, analyze with session storage |\n| **Accessibility audit** | Use ARIA snapshot for semantic structure analysis |\n\n## Automation Browsing Running Mode\n\nBrowser visibility is resolved automatically by `resolveHeadless()` in `lib\u002Fbrowser.js`:\n\n| Environment | Default | Why |\n|-------------|---------|-----|\n| **macOS \u002F Windows** | **Headed** (visible) | Better debugging, OAuth login support |\n| **Linux \u002F WSL** | **Headless** | Servers typically have no display |\n| **CI** (`CI`, `GITHUB_ACTIONS`, `GITLAB_CI`, `JENKINS_URL` env vars) | **Headless** | No display available |\n\nOverride with `--headless true` or `--headless false` on any script.\n\n- Run multiple scripts\u002Fsessions in parallel to simulate real user interactions.\n- Run multiple scripts\u002Fsessions in parallel to simulate different device types (mobile, tablet, desktop).\n\n## ARIA Snapshot (Element Discovery)\n\nWhen page structure is unknown, use `aria-snapshot.js` to get a YAML-formatted accessibility tree with semantic roles, accessible names, states, and stable element references.\n\n### Get ARIA Snapshot\n\n```bash\n# Generate ARIA snapshot and output to stdout\nnode \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com\n\n# Save to file in snapshots directory\nnode \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fsnapshots\u002Fpage.yaml\n```\n\n### Example YAML Output\n\n```yaml\n- banner:\n  - link \"Hacker News\" [ref=e1]\n    \u002Furl: https:\u002F\u002Fnews.ycombinator.com\n  - navigation:\n    - link \"new\" [ref=e2]\n    - link \"past\" [ref=e3]\n    - link \"comments\" [ref=e4]\n- main:\n  - list:\n    - listitem:\n      - link \"Show HN: My new project\" [ref=e8]\n      - text: \"128 points by user 3 hours ago\"\n- contentinfo:\n  - textbox [ref=e10]\n    \u002Fplaceholder: \"Search\"\n```\n\n### Interpreting ARIA Notation\n\n| Notation | Meaning |\n|----------|---------|\n| `[ref=eN]` | Stable identifier for interactive elements |\n| `[checked]` | Checkbox\u002Fradio is selected |\n| `[disabled]` | Element is inactive |\n| `[expanded]` | Accordion\u002Fdropdown is open |\n| `[level=N]` | Heading hierarchy (1-6) |\n| `\u002Furl:` | Link destination |\n| `\u002Fplaceholder:` | Input placeholder text |\n| `\u002Fvalue:` | Current input value |\n\n### Interact by Ref\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nUse `select-ref.js` to interact with elements by their ref:\n\n```bash\n# Click element with ref e5\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e5 --action click\n\n# Fill input with ref e10\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e10 --action fill --value \"search query\"\n\n# Get text content\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e8 --action text\n\n# Screenshot specific element\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e1 --action screenshot --output .\u002Flogo.png\n\n# Focus element\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e10 --action focus\n\n# Hover over element\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e5 --action hover\n```\n\n### Store Snapshots\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nStore snapshots for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Fsnapshots\u002F`:\n\n```bash\n# Create snapshots directory\nmkdir -p .claude\u002Fchrome-devtools\u002Fsnapshots\n\n# Capture and store with timestamp\nSESSION=\"$(date +%Y%m%d-%H%M%S)\"\nnode \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com --output .claude\u002Fchrome-devtools\u002Fsnapshots\u002F$SESSION.yaml\n```\n\n### Workflow: Unknown Page Structure\n\n1. **Get snapshot** to discover elements:\n   ```bash\n   node \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com\n   ```\n\n2. **Identify target** from YAML output (e.g., `[ref=e5]` for a button)\n\n3. **Interact by ref**:\n   ```bash\n   node \"$SKILL_DIR\u002Fselect-ref.js\" --ref e5 --action click\n   ```\n\n4. **Verify result** with screenshot or new snapshot:\n   ```bash\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Fresult.png\n   ```\n\n## Local HTML Files\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n**IMPORTANT**: Never browse local HTML files via `file:\u002F\u002F` protocol. Always serve via local server:\n**Why**: `file:\u002F\u002F` protocol blocks many browser features (CORS, ES modules, fetch API, service workers). Local server ensures proper HTTP behavior.\n\n```bash\n# Option 1: npx serve (recommended)\nnpx serve .\u002Fdist -p 3000 &\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url http:\u002F\u002Flocalhost:3000\n\n# Option 2: Python http.server\npython -m http.server 3000 --directory .\u002Fdist &\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url http:\u002F\u002Flocalhost:3000\n```\n\n**Note**: when port 3000 is busy, find an available port with `lsof -i :3000` and use a different one.\n\n## Quick Start\n\n```bash\n# Install dependencies (one-time setup)\nnpm install --prefix \"$SKILL_DIR\"\n\n# Test (browser stays running for session reuse)\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fexample.com\n# Output: {\"success\": true, \"url\": \"...\", \"title\": \"...\"}\n```\n\n**Linux\u002FWSL only**: Run `\"$SKILL_DIR\u002Finstall-deps.sh\"` first for Chrome system libraries.\n\n## Session Persistence\n\nBrowser state persists across script executions via WebSocket endpoint file (`.browser-session.json`).\n\n**Default behavior**: Scripts disconnect but keep browser running for session reuse.\n\n```bash\n# First script: launches browser, navigates, disconnects (browser stays running)\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fexample.com\u002Flogin\n\n# Subsequent scripts: connect to existing browser, reuse page state\nnode \"$SKILL_DIR\u002Ffill.js\" --selector \"#email\" --value \"user@example.com\"\nnode \"$SKILL_DIR\u002Ffill.js\" --selector \"#password\" --value \"secret\"\nnode \"$SKILL_DIR\u002Fclick.js\" --selector \"button[type=submit]\"\n\n# Close browser when done\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url about:blank --close true\n```\n\n**Session management**:\n- `--close true`: Close browser and clear session\n- Default (no flag): Keep browser running for next script\n\n## Available Scripts\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nAll in `.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F`:\n\n| Script | Purpose |\n|--------|---------|\n| `navigate.js` | Navigate to URLs |\n| `screenshot.js` | Capture screenshots (auto-compress >5MB via Sharp) |\n| `click.js` | Click elements |\n| `fill.js` | Fill form fields |\n| `evaluate.js` | Execute JS in page context |\n| `snapshot.js` | Extract interactive elements (JSON format) |\n| `aria-snapshot.js` | Get ARIA accessibility tree (YAML format with refs) |\n| `select-ref.js` | Interact with elements by ref from ARIA snapshot |\n| `console.js` | Monitor console messages\u002Ferrors |\n| `network.js` | Track HTTP requests\u002Fresponses |\n| `performance.js` | Measure Core Web Vitals |\n| `ws-debug.js` | Debug WebSocket connections (basic) |\n| `ws-full-debug.js` | Debug WebSocket with full events\u002Fframes |\n| `inject-auth.js` | Inject cookies\u002Ftokens for authentication |\n| `import-cookies.js` | Import cookies from JSON\u002FNetscape file |\n| `connect-chrome.js` | Connect to Chrome with remote debugging |\n\n## Workflow Loop\n\n1. **Execute** focused script for single task\n2. **Observe** JSON output\n3. **Assess** completion status\n4. **Decide** next action\n5. **Repeat** until done\n\n## Writing Custom Test Scripts\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nFor complex automation, write scripts to `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Ftmp\u002F`:\n\n```bash\n# Create tmp directory for test scripts\nmkdir -p $SKILL_DIR\u002F.claude\u002Fchrome-devtools\u002Ftmp\n\n# Write a test script\ncat > $SKILL_DIR\u002F.claude\u002Fchrome-devtools\u002Ftmp\u002Flogin-test.js \u003C\u003C 'EOF'\nimport { getBrowser, getPage, disconnectBrowser, outputJSON } from '..\u002Fscripts\u002Flib\u002Fbrowser.js';\n\nasync function loginTest() {\n  const browser = await getBrowser();\n  const page = await getPage(browser);\n\n  await page.goto('https:\u002F\u002Fexample.com\u002Flogin');\n  await page.type('#email', 'user@example.com');\n  await page.type('#password', 'secret');\n  await page.click('button[type=submit]');\n  await page.waitForNavigation();\n\n  outputJSON({\n    success: true,\n    url: page.url(),\n    title: await page.title()\n  });\n\n  await disconnectBrowser();\n}\n\nloginTest();\nEOF\n\n# Run the test\nnode $SKILL_DIR\u002F.claude\u002Fchrome-devtools\u002Ftmp\u002Flogin-test.js\n```\n\n**Key principles for custom scripts**:\n- Single-purpose: one script, one task\n- Always call `disconnectBrowser()` at the end (keeps browser running)\n- Use `closeBrowser()` only when ending session completely\n- Output JSON for easy parsing\n- Plain JavaScript only in `page.evaluate()` callbacks\n\n## Screenshots\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nStore screenshots for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002F`:\n\n```bash\n# Basic screenshot\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png\n\n# Full page\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png --full-page true\n\n# Specific element\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --selector \".main-content\" --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Felement.png\n```\n\n### Auto-Compression (Sharp)\n\nScreenshots >5MB auto-compress using Sharp (4-5x faster than ImageMagick):\n\n```bash\n# Default: compress if >5MB\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png\n\n# Custom threshold (3MB)\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png --max-size 3\n\n# Disable compression\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png --no-compress\n```\n\nStore screenshots for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002F`.\n\n## Console Log Collection & Analysis\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n\n### Capture Logs\n\n```bash\n# Capture all logs for 10 seconds\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --duration 10000\n\n# Filter by type\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --types error,warn --duration 5000\n```\n\n### Session Storage Pattern\n\nStore logs for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Flogs\u002F\u003Csession>\u002F`:\n\n```bash\n# Create session directory\nSESSION=\"$(date +%Y%m%d-%H%M%S)\"\nmkdir -p .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\n\n# Capture and store\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --duration 10000 > .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\u002Fconsole.json\nnode \"$SKILL_DIR\u002Fnetwork.js\" --url https:\u002F\u002Fexample.com > .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\u002Fnetwork.json\n\n# View errors\njq '.messages[] | select(.type==\"error\")' .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\u002Fconsole.json\n```\n\n### Root Cause Analysis\n\n```bash\n# 1. Check for JavaScript errors\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --types error,pageerror --duration 5000 | jq '.messages'\n\n# 2. Correlate with network failures\nnode \"$SKILL_DIR\u002Fnetwork.js\" --url https:\u002F\u002Fexample.com | jq '.requests[] | select(.response.status >= 400)'\n\n# 3. Check specific error stack traces\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --types error --duration 5000 | jq '.messages[].stack'\n```\n\n## Finding Elements\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nUse `snapshot.js` to discover selectors before interacting:\n\n```bash\n# Get all interactive elements\nnode \"$SKILL_DIR\u002Fsnapshot.js\" --url https:\u002F\u002Fexample.com | jq '.elements[] | {tagName, text, selector}'\n\n# Find buttons\nnode \"$SKILL_DIR\u002Fsnapshot.js\" --url https:\u002F\u002Fexample.com | jq '.elements[] | select(.tagName==\"button\")'\n\n# Find by text content\nnode \"$SKILL_DIR\u002Fsnapshot.js\" --url https:\u002F\u002Fexample.com | jq '.elements[] | select(.text | contains(\"Submit\"))'\n```\n\n## Error Recovery\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nIf script fails:\n\n```bash\n# 1. Capture current state (without navigating to preserve state)\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscreenshots\u002Fdebug.png\n\n# 2. Get console errors\nnode \"$SKILL_DIR\u002Fconsole.js\" --url about:blank --types error --duration 1000\n\n# 3. Discover correct selector\nnode \"$SKILL_DIR\u002Fsnapshot.js\" | jq '.elements[] | select(.text | contains(\"Submit\"))'\n\n# 4. Try XPath if CSS fails\nnode \"$SKILL_DIR\u002Fclick.js\" --selector \"\u002F\u002Fbutton[contains(text(),'Submit')]\"\n```\n\n## Common Patterns\n\n### Web Scraping\n```bash\nnode \"$SKILL_DIR\u002Fevaluate.js\" --url https:\u002F\u002Fexample.com --script \"\n  Array.from(document.querySelectorAll('.item')).map(el => ({\n    title: el.querySelector('h2')?.textContent,\n    link: el.querySelector('a')?.href\n  }))\n\" | jq '.result'\n```\n\n### Form Automation\n```bash\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fexample.com\u002Fform\nnode \"$SKILL_DIR\u002Ffill.js\" --selector \"#search\" --value \"query\"\nnode \"$SKILL_DIR\u002Fclick.js\" --selector \"button[type=submit]\"\n```\n\n### Performance Testing\n```bash\nnode \"$SKILL_DIR\u002Fperformance.js\" --url https:\u002F\u002Fexample.com | jq '.vitals'\n```\n\n## Script Options\n\nAll scripts support:\n- `--headless true\u002Ffalse` - Override auto-detected headless mode (default: auto by OS)\n- `--close true` - Close browser completely (default: stay running)\n- `--timeout 30000` - Set timeout (ms)\n- `--wait-until networkidle2` - Wait strategy\n\n`navigate.js` additionally supports:\n- `--wait-for-login \u003Cpattern>` - Interactive login: open headed, wait for URL regex match\n- `--login-timeout \u003Cms>` - Max wait for login completion (default: 300000 = 5 min)\n\n## Troubleshooting\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n\n| Error | Solution |\n|-------|----------|\n| `Cannot find package 'puppeteer'` | Run `npm install` in scripts directory |\n| `libnss3.so` missing (Linux) | Run `.\u002Finstall-deps.sh` |\n| Element not found | Use `snapshot.js` to find correct selector |\n| Script hangs | Use `--timeout 60000` or `--wait-until load` |\n| Screenshot >5MB | Auto-compressed; use `--max-size 3` for lower |\n| Session stale | Delete `.browser-session.json` and retry |\n\n### Screenshot Analysis: Missing Images\n\nIf images don't appear in screenshots, they may be waiting for animation triggers:\n\n1. **Scroll-triggered animations**: Scroll element into view first\n   ```bash\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"document.querySelector('.lazy-image').scrollIntoView()\"\n   # Wait for animation\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"await new Promise(r => setTimeout(r, 1000))\"\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Fresult.png\n   ```\n\n2. **Sequential animation queue**: Wait longer and retry\n   ```bash\n   # First attempt\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --url http:\u002F\u002Flocalhost:3000 --output .\u002Fattempt1.png\n\n   # Wait for animations to complete\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"await new Promise(r => setTimeout(r, 2000))\"\n\n   # Retry screenshot\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Fattempt2.png\n   ```\n\n3. **Intersection Observer animations**: Trigger by scrolling through page\n   ```bash\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"window.scrollTo(0, document.body.scrollHeight)\"\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"await new Promise(r => setTimeout(r, 1500))\"\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"window.scrollTo(0, 0)\"\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Ffull-loaded.png --full-page true\n   ```\n\n## Authentication & Cookies\n\nFor accessing protected\u002Fauthenticated pages, use one of these methods:\n\n### Method 1: Inject Cookies Directly\n\nUse when you have cookie values (from DevTools or manual extraction):\n\n```bash\n# Inject single cookie\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com \\\n  --cookies '[{\"name\":\"session\",\"value\":\"abc123\",\"domain\":\".site.com\"}]'\n\n# Multiple cookies with all properties\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com \\\n  --cookies '[{\"name\":\"session\",\"value\":\"abc\",\"domain\":\".site.com\",\"httpOnly\":true,\"secure\":true}]'\n\n# With Bearer token header\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fapi.site.com \\\n  --token \"Bearer eyJhbG...\" --header Authorization\n```\n\n### Method 2: Import from Browser Extension\n\nBest for complex auth (OAuth, multi-cookie sessions):\n\n```bash\n# 1. Install \"Cookie-Editor\" or \"EditThisCookie\" Chrome extension\n# 2. Navigate to site → Log in manually\n# 3. Click extension → Export as JSON → Save to cookies.json\n# 4. Import into puppeteer session:\n\nnode \"$SKILL_DIR\u002Fimport-cookies.js\" --file .\u002Fcookies.json --url https:\u002F\u002Fsite.com\n\n# Netscape format (from curl\u002Fwget):\nnode \"$SKILL_DIR\u002Fimport-cookies.js\" --file .\u002Fcookies.txt --format netscape --url https:\u002F\u002Fsite.com\n\n# Only import cookies matching target domain:\nnode \"$SKILL_DIR\u002Fimport-cookies.js\" --file .\u002Fcookies.json --url https:\u002F\u002Fsite.com --strict-domain\n```\n\n### Method 3: Use Your Chrome Profile\n\nMost reliable for complex auth (2FA, OAuth, SSO). Uses your existing Chrome session:\n\n```bash\n# Use Chrome's default profile (preserves all cookies, extensions, saved passwords)\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fsite.com --use-default-profile true\n\n# Use specific Chrome profile directory\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fsite.com --profile \"\u002Fpath\u002Fto\u002Fchrome\u002Fprofile\"\n```\n\n**[!] Important**: Chrome must be fully closed when using its profile (single instance lock).\n\n**Profile paths by OS:**\n- **macOS**: `~\u002FLibrary\u002FApplication Support\u002FGoogle\u002FChrome`\n- **Windows**: `%LOCALAPPDATA%\u002FGoogle\u002FChrome\u002FUser Data`\n- **Linux**: `~\u002F.config\u002Fgoogle-chrome`\n\n### Method 4: Connect to Running Chrome\n\nBest for debugging (can see browser window while scripts run):\n\n```bash\n# Step 1: Launch Chrome with remote debugging (in separate terminal)\n# macOS:\n\u002FApplications\u002FGoogle\\ Chrome.app\u002FContents\u002FMacOS\u002FGoogle\\ Chrome --remote-debugging-port=9222\n\n# Windows:\n\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" --remote-debugging-port=9222\n\n# Linux:\ngoogle-chrome --remote-debugging-port=9222\n\n# Step 2: Log in manually in the Chrome window\n\n# Step 3: Connect and automate\nnode \"$SKILL_DIR\u002Fconnect-chrome.js\" --browser-url http:\u002F\u002Flocalhost:9222 --url https:\u002F\u002Fsite.com\n\n# Or launch Chrome automatically (opens new window):\nnode \"$SKILL_DIR\u002Fconnect-chrome.js\" --launch --port 9222 --url https:\u002F\u002Fsite.com\n```\n\n### Method 5: Interactive Login (OAuth\u002FSSO)\n\nBest for OAuth, SSO, or any login requiring manual interaction in the browser:\n\n```bash\n# Open browser at login page, wait for redirect to dashboard after OAuth\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fapp.example.com\u002Flogin \\\n  --wait-for-login \"\u002Fdashboard\"\n\n# With longer timeout (10 min) for slow SSO providers\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fapp.example.com\u002Flogin \\\n  --wait-for-login \"\u002Fdashboard\" --login-timeout 600000\n\n# Use regex for complex URL patterns\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fapp.example.com\u002Flogin \\\n  --wait-for-login \"\u002F(dashboard|home|app)\"\n```\n\n**How it works:**\n1. Opens browser in **headed mode** (always, regardless of OS)\n2. Navigates to the login URL\n3. Waits for you to complete the login flow manually (OAuth, 2FA, etc.)\n4. Detects success when URL matches the regex pattern\n5. Saves all cookies to `.auth-session.json` for 24-hour reuse\n6. Subsequent scripts reuse the authenticated session automatically\n\n### Session Persistence\n\nAuth sessions are saved to `.auth-session.json` for 24-hour reuse:\n\n```bash\n# First script injects auth\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com --cookies '[...]'\n\n# Subsequent scripts reuse saved auth automatically\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fsite.com\u002Fdashboard\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fsite.com\u002Fprofile --output .\u002Fprofile.png\n\n# Clear auth session when done\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com --clear true\n```\n\n### Choosing the Right Method\n\n| Method | Best For | Complexity |\n|--------|----------|------------|\n| Inject cookies | Simple session cookies, API tokens | Low |\n| Import from extension | Multi-cookie auth, OAuth tokens | Medium |\n| Chrome profile | 2FA, SSO, complex OAuth flows | Low* |\n| Connect to Chrome | Debugging, visual verification | Medium |\n| Interactive login | OAuth\u002FSSO with manual browser interaction | Low |\n\n*Requires Chrome to be closed first\n\n## Reference Documentation\n\n- `.\u002Freferences\u002Fcdp-domains.md` - Chrome DevTools Protocol domains\n- `.\u002Freferences\u002Fpuppeteer-reference.md` - Puppeteer API patterns\n- `.\u002Freferences\u002Fperformance-guide.md` - Core Web Vitals optimization\n- `.\u002Fscripts\u002FREADME.md` - Detailed script options\n","# Chrome DevTools Agent Skill\n\nBrowser automation via Puppeteer scripts with persistent sessions. All scripts output JSON.\n\n## Skill Location\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n\n```bash\n# Detect skill location (no cd needed - scripts use __dirname for paths)\nSKILL_DIR=\"\"\nif [ -d \".claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\" ]; then\n  SKILL_DIR=\".claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\"\nelif [ -d \"$HOME\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\" ]; then\n  SKILL_DIR=\"$HOME\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\"\nfi\n# Run scripts with full path: node \"$SKILL_DIR\u002Fscript.js\" --args\n```\n\n## Choosing Your Approach\n\n| Scenario | Approach |\n|----------|----------|\n| **Source-available sites** | Read source code first, write selectors directly |\n| **Unknown layouts** | Use `aria-snapshot.js` for semantic discovery |\n| **Visual inspection** | Take screenshots to verify rendering |\n| **Debug issues** | Collect console logs, analyze with session storage |\n| **Accessibility audit** | Use ARIA snapshot for semantic structure analysis |\n\n## Automation Browsing Running Mode\n\nBrowser visibility is resolved automatically by `resolveHeadless()` in `lib\u002Fbrowser.js`:\n\n| Environment | Default | Why |\n|-------------|---------|-----|\n| **macOS \u002F Windows** | **Headed** (visible) | Better debugging, OAuth login support |\n| **Linux \u002F WSL** | **Headless** | Servers typically have no display |\n| **CI** (`CI`, `GITHUB_ACTIONS`, `GITLAB_CI`, `JENKINS_URL` env vars) | **Headless** | No display available |\n\nOverride with `--headless true` or `--headless false` on any script.\n\n- Run multiple scripts\u002Fsessions in parallel to simulate real user interactions.\n- Run multiple scripts\u002Fsessions in parallel to simulate different device types (mobile, tablet, desktop).\n\n## ARIA Snapshot (Element Discovery)\n\nWhen page structure is unknown, use `aria-snapshot.js` to get a YAML-formatted accessibility tree with semantic roles, accessible names, states, and stable element references.\n\n### Get ARIA Snapshot\n\n```bash\n# Generate ARIA snapshot and output to stdout\nnode \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com\n\n# Save to file in snapshots directory\nnode \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fsnapshots\u002Fpage.yaml\n```\n\n### Example YAML Output\n\n```yaml\n- banner:\n  - link \"Hacker News\" [ref=e1]\n    \u002Furl: https:\u002F\u002Fnews.ycombinator.com\n  - navigation:\n    - link \"new\" [ref=e2]\n    - link \"past\" [ref=e3]\n    - link \"comments\" [ref=e4]\n- main:\n  - list:\n    - listitem:\n      - link \"Show HN: My new project\" [ref=e8]\n      - text: \"128 points by user 3 hours ago\"\n- contentinfo:\n  - textbox [ref=e10]\n    \u002Fplaceholder: \"Search\"\n```\n\n### Interpreting ARIA Notation\n\n| Notation | Meaning |\n|----------|---------|\n| `[ref=eN]` | Stable identifier for interactive elements |\n| `[checked]` | Checkbox\u002Fradio is selected |\n| `[disabled]` | Element is inactive |\n| `[expanded]` | Accordion\u002Fdropdown is open |\n| `[level=N]` | Heading hierarchy (1-6) |\n| `\u002Furl:` | Link destination |\n| `\u002Fplaceholder:` | Input placeholder text |\n| `\u002Fvalue:` | Current input value |\n\n### Interact by Ref\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nUse `select-ref.js` to interact with elements by their ref:\n\n```bash\n# Click element with ref e5\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e5 --action click\n\n# Fill input with ref e10\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e10 --action fill --value \"search query\"\n\n# Get text content\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e8 --action text\n\n# Screenshot specific element\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e1 --action screenshot --output .\u002Flogo.png\n\n# Focus element\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e10 --action focus\n\n# Hover over element\nnode \"$SKILL_DIR\u002Fselect-ref.js\" --ref e5 --action hover\n```\n\n### Store Snapshots\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nStore snapshots for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Fsnapshots\u002F`:\n\n```bash\n# Create snapshots directory\nmkdir -p .claude\u002Fchrome-devtools\u002Fsnapshots\n\n# Capture and store with timestamp\nSESSION=\"$(date +%Y%m%d-%H%M%S)\"\nnode \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com --output .claude\u002Fchrome-devtools\u002Fsnapshots\u002F$SESSION.yaml\n```\n\n### Workflow: Unknown Page Structure\n\n1. **Get snapshot** to discover elements:\n   ```bash\n   node \"$SKILL_DIR\u002Faria-snapshot.js\" --url https:\u002F\u002Fexample.com\n   ```\n\n2. **Identify target** from YAML output (e.g., `[ref=e5]` for a button)\n\n3. **Interact by ref**:\n   ```bash\n   node \"$SKILL_DIR\u002Fselect-ref.js\" --ref e5 --action click\n   ```\n\n4. **Verify result** with screenshot or new snapshot:\n   ```bash\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Fresult.png\n   ```\n\n## Local HTML Files\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n**IMPORTANT**: Never browse local HTML files via `file:\u002F\u002F` protocol. Always serve via local server:\n**Why**: `file:\u002F\u002F` protocol blocks many browser features (CORS, ES modules, fetch API, service workers). Local server ensures proper HTTP behavior.\n\n```bash\n# Option 1: npx serve (recommended)\nnpx serve .\u002Fdist -p 3000 &\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url http:\u002F\u002Flocalhost:3000\n\n# Option 2: Python http.server\npython -m http.server 3000 --directory .\u002Fdist &\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url http:\u002F\u002Flocalhost:3000\n```\n\n**Note**: when port 3000 is busy, find an available port with `lsof -i :3000` and use a different one.\n\n## Quick Start\n\n```bash\n# Install dependencies (one-time setup)\nnpm install --prefix \"$SKILL_DIR\"\n\n# Test (browser stays running for session reuse)\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fexample.com\n# Output: {\"success\": true, \"url\": \"...\", \"title\": \"...\"}\n```\n\n**Linux\u002FWSL only**: Run `\"$SKILL_DIR\u002Finstall-deps.sh\"` first for Chrome system libraries.\n\n## Session Persistence\n\nBrowser state persists across script executions via WebSocket endpoint file (`.browser-session.json`).\n\n**Default behavior**: Scripts disconnect but keep browser running for session reuse.\n\n```bash\n# First script: launches browser, navigates, disconnects (browser stays running)\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fexample.com\u002Flogin\n\n# Subsequent scripts: connect to existing browser, reuse page state\nnode \"$SKILL_DIR\u002Ffill.js\" --selector \"#email\" --value \"user@example.com\"\nnode \"$SKILL_DIR\u002Ffill.js\" --selector \"#password\" --value \"secret\"\nnode \"$SKILL_DIR\u002Fclick.js\" --selector \"button[type=submit]\"\n\n# Close browser when done\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url about:blank --close true\n```\n\n**Session management**:\n- `--close true`: Close browser and clear session\n- Default (no flag): Keep browser running for next script\n\n## Available Scripts\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nAll in `.claude\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F`:\n\n| Script | Purpose |\n|--------|---------|\n| `navigate.js` | Navigate to URLs |\n| `screenshot.js` | Capture screenshots (auto-compress >5MB via Sharp) |\n| `click.js` | Click elements |\n| `fill.js` | Fill form fields |\n| `evaluate.js` | Execute JS in page context |\n| `snapshot.js` | Extract interactive elements (JSON format) |\n| `aria-snapshot.js` | Get ARIA accessibility tree (YAML format with refs) |\n| `select-ref.js` | Interact with elements by ref from ARIA snapshot |\n| `console.js` | Monitor console messages\u002Ferrors |\n| `network.js` | Track HTTP requests\u002Fresponses |\n| `performance.js` | Measure Core Web Vitals |\n| `ws-debug.js` | Debug WebSocket connections (basic) |\n| `ws-full-debug.js` | Debug WebSocket with full events\u002Fframes |\n| `inject-auth.js` | Inject cookies\u002Ftokens for authentication |\n| `import-cookies.js` | Import cookies from JSON\u002FNetscape file |\n| `connect-chrome.js` | Connect to Chrome with remote debugging |\n\n## Workflow Loop\n\n1. **Execute** focused script for single task\n2. **Observe** JSON output\n3. **Assess** completion status\n4. **Decide** next action\n5. **Repeat** until done\n\n## Writing Custom Test Scripts\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nFor complex automation, write scripts to `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Ftmp\u002F`:\n\n```bash\n# Create tmp directory for test scripts\nmkdir -p $SKILL_DIR\u002F.claude\u002Fchrome-devtools\u002Ftmp\n\n# Write a test script\ncat > $SKILL_DIR\u002F.claude\u002Fchrome-devtools\u002Ftmp\u002Flogin-test.js \u003C\u003C 'EOF'\nimport { getBrowser, getPage, disconnectBrowser, outputJSON } from '..\u002Fscripts\u002Flib\u002Fbrowser.js';\n\nasync function loginTest() {\n  const browser = await getBrowser();\n  const page = await getPage(browser);\n\n  await page.goto('https:\u002F\u002Fexample.com\u002Flogin');\n  await page.type('#email', 'user@example.com');\n  await page.type('#password', 'secret');\n  await page.click('button[type=submit]');\n  await page.waitForNavigation();\n\n  outputJSON({\n    success: true,\n    url: page.url(),\n    title: await page.title()\n  });\n\n  await disconnectBrowser();\n}\n\nloginTest();\nEOF\n\n# Run the test\nnode $SKILL_DIR\u002F.claude\u002Fchrome-devtools\u002Ftmp\u002Flogin-test.js\n```\n\n**Key principles for custom scripts**:\n- Single-purpose: one script, one task\n- Always call `disconnectBrowser()` at the end (keeps browser running)\n- Use `closeBrowser()` only when ending session completely\n- Output JSON for easy parsing\n- Plain JavaScript only in `page.evaluate()` callbacks\n\n## Screenshots\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nStore screenshots for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002F`:\n\n```bash\n# Basic screenshot\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png\n\n# Full page\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png --full-page true\n\n# Specific element\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --selector \".main-content\" --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Felement.png\n```\n\n### Auto-Compression (Sharp)\n\nScreenshots >5MB auto-compress using Sharp (4-5x faster than ImageMagick):\n\n```bash\n# Default: compress if >5MB\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png\n\n# Custom threshold (3MB)\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png --max-size 3\n\n# Disable compression\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fexample.com --output .\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002Fpage.png --no-compress\n```\n\nStore screenshots for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Fscreenshots\u002F`.\n\n## Console Log Collection & Analysis\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n\n### Capture Logs\n\n```bash\n# Capture all logs for 10 seconds\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --duration 10000\n\n# Filter by type\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --types error,warn --duration 5000\n```\n\n### Session Storage Pattern\n\nStore logs for analysis in `\u003Cproject>\u002F.claude\u002Fchrome-devtools\u002Flogs\u002F\u003Csession>\u002F`:\n\n```bash\n# Create session directory\nSESSION=\"$(date +%Y%m%d-%H%M%S)\"\nmkdir -p .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\n\n# Capture and store\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --duration 10000 > .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\u002Fconsole.json\nnode \"$SKILL_DIR\u002Fnetwork.js\" --url https:\u002F\u002Fexample.com > .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\u002Fnetwork.json\n\n# View errors\njq '.messages[] | select(.type==\"error\")' .claude\u002Fchrome-devtools\u002Flogs\u002F$SESSION\u002Fconsole.json\n```\n\n### Root Cause Analysis\n\n```bash\n# 1. Check for JavaScript errors\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --types error,pageerror --duration 5000 | jq '.messages'\n\n# 2. Correlate with network failures\nnode \"$SKILL_DIR\u002Fnetwork.js\" --url https:\u002F\u002Fexample.com | jq '.requests[] | select(.response.status >= 400)'\n\n# 3. Check specific error stack traces\nnode \"$SKILL_DIR\u002Fconsole.js\" --url https:\u002F\u002Fexample.com --types error --duration 5000 | jq '.messages[].stack'\n```\n\n## Finding Elements\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nUse `snapshot.js` to discover selectors before interacting:\n\n```bash\n# Get all interactive elements\nnode \"$SKILL_DIR\u002Fsnapshot.js\" --url https:\u002F\u002Fexample.com | jq '.elements[] | {tagName, text, selector}'\n\n# Find buttons\nnode \"$SKILL_DIR\u002Fsnapshot.js\" --url https:\u002F\u002Fexample.com | jq '.elements[] | select(.tagName==\"button\")'\n\n# Find by text content\nnode \"$SKILL_DIR\u002Fsnapshot.js\" --url https:\u002F\u002Fexample.com | jq '.elements[] | select(.text | contains(\"Submit\"))'\n```\n\n## Error Recovery\n\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\nIf script fails:\n\n```bash\n# 1. Capture current state (without navigating to preserve state)\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002F.claude\u002Fskills\u002Fchrome-devtools\u002Fscreenshots\u002Fdebug.png\n\n# 2. Get console errors\nnode \"$SKILL_DIR\u002Fconsole.js\" --url about:blank --types error --duration 1000\n\n# 3. Discover correct selector\nnode \"$SKILL_DIR\u002Fsnapshot.js\" | jq '.elements[] | select(.text | contains(\"Submit\"))'\n\n# 4. Try XPath if CSS fails\nnode \"$SKILL_DIR\u002Fclick.js\" --selector \"\u002F\u002Fbutton[contains(text(),'Submit')]\"\n```\n\n## Common Patterns\n\n### Web Scraping\n```bash\nnode \"$SKILL_DIR\u002Fevaluate.js\" --url https:\u002F\u002Fexample.com --script \"\n  Array.from(document.querySelectorAll('.item')).map(el => ({\n    title: el.querySelector('h2')?.textContent,\n    link: el.querySelector('a')?.href\n  }))\n\" | jq '.result'\n```\n\n### Form Automation\n```bash\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fexample.com\u002Fform\nnode \"$SKILL_DIR\u002Ffill.js\" --selector \"#search\" --value \"query\"\nnode \"$SKILL_DIR\u002Fclick.js\" --selector \"button[type=submit]\"\n```\n\n### Performance Testing\n```bash\nnode \"$SKILL_DIR\u002Fperformance.js\" --url https:\u002F\u002Fexample.com | jq '.vitals'\n```\n\n## Script Options\n\nAll scripts support:\n- `--headless true\u002Ffalse` - Override auto-detected headless mode (default: auto by OS)\n- `--close true` - Close browser completely (default: stay running)\n- `--timeout 30000` - Set timeout (ms)\n- `--wait-until networkidle2` - Wait strategy\n\n`navigate.js` additionally supports:\n- `--wait-for-login \u003Cpattern>` - Interactive login: open headed, wait for URL regex match\n- `--login-timeout \u003Cms>` - Max wait for login completion (default: 300000 = 5 min)\n\n## Troubleshooting\nSkills can exist in **project-scope** or **user-scope**. Priority: project-scope > user-scope.\n\n| Error | Solution |\n|-------|----------|\n| `Cannot find package 'puppeteer'` | Run `npm install` in scripts directory |\n| `libnss3.so` missing (Linux) | Run `.\u002Finstall-deps.sh` |\n| Element not found | Use `snapshot.js` to find correct selector |\n| Script hangs | Use `--timeout 60000` or `--wait-until load` |\n| Screenshot >5MB | Auto-compressed; use `--max-size 3` for lower |\n| Session stale | Delete `.browser-session.json` and retry |\n\n### Screenshot Analysis: Missing Images\n\nIf images don't appear in screenshots, they may be waiting for animation triggers:\n\n1. **Scroll-triggered animations**: Scroll element into view first\n   ```bash\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"document.querySelector('.lazy-image').scrollIntoView()\"\n   # Wait for animation\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"await new Promise(r => setTimeout(r, 1000))\"\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Fresult.png\n   ```\n\n2. **Sequential animation queue**: Wait longer and retry\n   ```bash\n   # First attempt\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --url http:\u002F\u002Flocalhost:3000 --output .\u002Fattempt1.png\n\n   # Wait for animations to complete\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"await new Promise(r => setTimeout(r, 2000))\"\n\n   # Retry screenshot\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Fattempt2.png\n   ```\n\n3. **Intersection Observer animations**: Trigger by scrolling through page\n   ```bash\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"window.scrollTo(0, document.body.scrollHeight)\"\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"await new Promise(r => setTimeout(r, 1500))\"\n   node \"$SKILL_DIR\u002Fevaluate.js\" --script \"window.scrollTo(0, 0)\"\n   node \"$SKILL_DIR\u002Fscreenshot.js\" --output .\u002Ffull-loaded.png --full-page true\n   ```\n\n## Authentication & Cookies\n\nFor accessing protected\u002Fauthenticated pages, use one of these methods:\n\n### Method 1: Inject Cookies Directly\n\nUse when you have cookie values (from DevTools or manual extraction):\n\n```bash\n# Inject single cookie\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com \\\n  --cookies '[{\"name\":\"session\",\"value\":\"abc123\",\"domain\":\".site.com\"}]'\n\n# Multiple cookies with all properties\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com \\\n  --cookies '[{\"name\":\"session\",\"value\":\"abc\",\"domain\":\".site.com\",\"httpOnly\":true,\"secure\":true}]'\n\n# With Bearer token header\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fapi.site.com \\\n  --token \"Bearer eyJhbG...\" --header Authorization\n```\n\n### Method 2: Import from Browser Extension\n\nBest for complex auth (OAuth, multi-cookie sessions):\n\n```bash\n# 1. Install \"Cookie-Editor\" or \"EditThisCookie\" Chrome extension\n# 2. Navigate to site → Log in manually\n# 3. Click extension → Export as JSON → Save to cookies.json\n# 4. Import into puppeteer session:\n\nnode \"$SKILL_DIR\u002Fimport-cookies.js\" --file .\u002Fcookies.json --url https:\u002F\u002Fsite.com\n\n# Netscape format (from curl\u002Fwget):\nnode \"$SKILL_DIR\u002Fimport-cookies.js\" --file .\u002Fcookies.txt --format netscape --url https:\u002F\u002Fsite.com\n\n# Only import cookies matching target domain:\nnode \"$SKILL_DIR\u002Fimport-cookies.js\" --file .\u002Fcookies.json --url https:\u002F\u002Fsite.com --strict-domain\n```\n\n### Method 3: Use Your Chrome Profile\n\nMost reliable for complex auth (2FA, OAuth, SSO). Uses your existing Chrome session:\n\n```bash\n# Use Chrome's default profile (preserves all cookies, extensions, saved passwords)\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fsite.com --use-default-profile true\n\n# Use specific Chrome profile directory\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fsite.com --profile \"\u002Fpath\u002Fto\u002Fchrome\u002Fprofile\"\n```\n\n**[!] Important**: Chrome must be fully closed when using its profile (single instance lock).\n\n**Profile paths by OS:**\n- **macOS**: `~\u002FLibrary\u002FApplication Support\u002FGoogle\u002FChrome`\n- **Windows**: `%LOCALAPPDATA%\u002FGoogle\u002FChrome\u002FUser Data`\n- **Linux**: `~\u002F.config\u002Fgoogle-chrome`\n\n### Method 4: Connect to Running Chrome\n\nBest for debugging (can see browser window while scripts run):\n\n```bash\n# Step 1: Launch Chrome with remote debugging (in separate terminal)\n# macOS:\n\u002FApplications\u002FGoogle\\ Chrome.app\u002FContents\u002FMacOS\u002FGoogle\\ Chrome --remote-debugging-port=9222\n\n# Windows:\n\"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\" --remote-debugging-port=9222\n\n# Linux:\ngoogle-chrome --remote-debugging-port=9222\n\n# Step 2: Log in manually in the Chrome window\n\n# Step 3: Connect and automate\nnode \"$SKILL_DIR\u002Fconnect-chrome.js\" --browser-url http:\u002F\u002Flocalhost:9222 --url https:\u002F\u002Fsite.com\n\n# Or launch Chrome automatically (opens new window):\nnode \"$SKILL_DIR\u002Fconnect-chrome.js\" --launch --port 9222 --url https:\u002F\u002Fsite.com\n```\n\n### Method 5: Interactive Login (OAuth\u002FSSO)\n\nBest for OAuth, SSO, or any login requiring manual interaction in the browser:\n\n```bash\n# Open browser at login page, wait for redirect to dashboard after OAuth\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fapp.example.com\u002Flogin \\\n  --wait-for-login \"\u002Fdashboard\"\n\n# With longer timeout (10 min) for slow SSO providers\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fapp.example.com\u002Flogin \\\n  --wait-for-login \"\u002Fdashboard\" --login-timeout 600000\n\n# Use regex for complex URL patterns\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fapp.example.com\u002Flogin \\\n  --wait-for-login \"\u002F(dashboard|home|app)\"\n```\n\n**How it works:**\n1. Opens browser in **headed mode** (always, regardless of OS)\n2. Navigates to the login URL\n3. Waits for you to complete the login flow manually (OAuth, 2FA, etc.)\n4. Detects success when URL matches the regex pattern\n5. Saves all cookies to `.auth-session.json` for 24-hour reuse\n6. Subsequent scripts reuse the authenticated session automatically\n\n### Session Persistence\n\nAuth sessions are saved to `.auth-session.json` for 24-hour reuse:\n\n```bash\n# First script injects auth\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com --cookies '[...]'\n\n# Subsequent scripts reuse saved auth automatically\nnode \"$SKILL_DIR\u002Fnavigate.js\" --url https:\u002F\u002Fsite.com\u002Fdashboard\nnode \"$SKILL_DIR\u002Fscreenshot.js\" --url https:\u002F\u002Fsite.com\u002Fprofile --output .\u002Fprofile.png\n\n# Clear auth session when done\nnode \"$SKILL_DIR\u002Finject-auth.js\" --url https:\u002F\u002Fsite.com --clear true\n```\n\n### Choosing the Right Method\n\n| Method | Best For | Complexity |\n|--------|----------|------------|\n| Inject cookies | Simple session cookies, API tokens | Low |\n| Import from extension | Multi-cookie auth, OAuth tokens | Medium |\n| Chrome profile | 2FA, SSO, complex OAuth flows | Low* |\n| Connect to Chrome | Debugging, visual verification | Medium |\n| Interactive login | OAuth\u002FSSO with manual browser interaction | Low |\n\n*Requires Chrome to be closed first\n\n## Reference Documentation\n\n- `.\u002Freferences\u002Fcdp-domains.md` - Chrome DevTools Protocol domains\n- `.\u002Freferences\u002Fpuppeteer-reference.md` - Puppeteer API patterns\n- `.\u002Freferences\u002Fperformance-guide.md` - Core Web Vitals optimization\n- `.\u002Fscripts\u002FREADME.md` - Detailed script options\n",{"name":5,"license":15,"version":52,"description":7,"argument-hint":53},"1.1.0","[url or task]","master","288d9f967abaebef5b3c7e172418f751b2d4de60",".agent\u002Fskills\u002Fchrome-devtools","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit","https:\u002F\u002Fgithub.com\u002FMinhHoangDono","2026-03-17 22:46:37",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add MinhHoangDono\u002Fantigravity-kit --skill \"ck:chrome-devtools\"",{"tool":66,"command":67},"bunx","bunx skills add MinhHoangDono\u002Fantigravity-kit --skill \"ck:chrome-devtools\"",{"tool":69,"command":70},"pnpm","pnpm dlx skills add MinhHoangDono\u002Fantigravity-kit --skill \"ck:chrome-devtools\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002FSKILL.md",true,[74,80,84,88,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fcdp-domains.md","REFERENCE","参考文档",17812,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Freferences\u002Fcdp-domains.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fperformance-guide.md",21550,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Freferences\u002Fperformance-guide.md",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fpuppeteer-reference.md",19065,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Freferences\u002Fpuppeteer-reference.md",{"path":89,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":92,"sourceHtmlUrl":93},"scripts\u002F__tests__\u002Ferror-handling.test.js","SCRIPT","脚本",3711,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F__tests__\u002Ferror-handling.test.js",{"path":95,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":96,"sourceHtmlUrl":97},"scripts\u002F__tests__\u002Fselector.test.js",6525,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F__tests__\u002Fselector.test.js",{"path":99,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":100,"sourceHtmlUrl":101},"scripts\u002F.gitignore",53,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002F.gitignore",{"path":103,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":104,"sourceHtmlUrl":105},"scripts\u002Faria-snapshot.js",10318,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Faria-snapshot.js",{"path":107,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":108,"sourceHtmlUrl":109},"scripts\u002Fclick.js",2434,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fclick.js",{"path":111,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":112,"sourceHtmlUrl":113},"scripts\u002Fconnect-chrome.js",4235,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fconnect-chrome.js",{"path":115,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":116,"sourceHtmlUrl":117},"scripts\u002Fconsole.js",1962,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fconsole.js",{"path":119,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":120,"sourceHtmlUrl":121},"scripts\u002Fevaluate.js",1407,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fevaluate.js",{"path":123,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":124,"sourceHtmlUrl":125},"scripts\u002Ffill.js",2099,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Ffill.js",{"path":127,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":128,"sourceHtmlUrl":129},"scripts\u002Fimport-cookies.js",5847,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fimport-cookies.js",{"path":131,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":132,"sourceHtmlUrl":133},"scripts\u002Finject-auth.js",7430,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Finject-auth.js",{"path":135,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":136,"sourceHtmlUrl":137},"scripts\u002Finstall-deps.sh",4371,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Finstall-deps.sh",{"path":139,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":140,"sourceHtmlUrl":141},"scripts\u002Finstall.sh",2137,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Finstall.sh",{"path":143,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":144,"sourceHtmlUrl":145},"scripts\u002Flib\u002Fbrowser.js",10130,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Flib\u002Fbrowser.js",{"path":147,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":148,"sourceHtmlUrl":149},"scripts\u002Flib\u002Fselector.js",5422,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Flib\u002Fselector.js",{"path":151,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":152,"sourceHtmlUrl":153},"scripts\u002Fnavigate.js",4718,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fnavigate.js",{"path":155,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":156,"sourceHtmlUrl":157},"scripts\u002Fnetwork.js",2943,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fnetwork.js",{"path":159,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":160,"sourceHtmlUrl":161},"scripts\u002Fpackage.json",345,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fpackage.json",{"path":163,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":164,"sourceHtmlUrl":165},"scripts\u002Fperformance.js",4091,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fperformance.js",{"path":167,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":168,"sourceHtmlUrl":169},"scripts\u002FREADME.md",8082,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002FREADME.md",{"path":171,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":172,"sourceHtmlUrl":173},"scripts\u002Fscreenshot.js",6388,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fscreenshot.js",{"path":175,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":176,"sourceHtmlUrl":177},"scripts\u002Fselect-ref.js",3919,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fselect-ref.js",{"path":179,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":180,"sourceHtmlUrl":181},"scripts\u002Fsnapshot.js",3713,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fsnapshot.js",{"path":183,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":184,"sourceHtmlUrl":185},"scripts\u002Fws-debug.js",1496,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fws-debug.js",{"path":187,"resourceType":90,"resourceTypeDesc":91,"sizeBytes":188,"sourceHtmlUrl":189},"scripts\u002Fws-full-debug.js",3335,"https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fchrome-devtools\u002Fscripts\u002Fws-full-debug.js",[191,218,223,249,255,284],{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":195,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":198,"publishedAt":47},"01M6D1HVW4Z3K4VEZ2HNHYCCK6","ck:web-frameworks","Build with Next.js (App Router, RSC, SSR, ISR), Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared dependencies.","MIT","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fweb-frameworks\u002Fweb-frameworks\u002FSKILL.md",[],[199,200,201,202,203,204,205,206,207,208,43,209,210,211,212,213,214,215,216,217],"web","web frameworks","frameworks","ck:web frameworks","react","ssr","server","turborepo","Optimization","Next.js","router","build","next","dependencies","caching","strategies","shared","caching strategies","feature",{"skillNo":219,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":195,"licenseFileUrl":6,"sourceHtmlUrl":220,"categories":221,"keywords":222,"publishedAt":47},"01M6D1HMM80JQKWHKQWXCSASPQ","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fweb-frameworks\u002FSKILL.md",[],[199,200,201,202,203,204,205,206,207,208,43,209,210,211,212,213,214,215,216,217],{"skillNo":224,"name":225,"nameZh":6,"description":226,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":195,"licenseFileUrl":6,"sourceHtmlUrl":227,"categories":228,"keywords":232,"publishedAt":47},"01M6D1G9MGF5M59YHWE3HW29AM","ck:threejs","Build 3D web apps with Three.js (WebGL\u002FWebGPU). 556 searchable examples, 60 API classes, 20 use cases. Actions: create 3D scene, load model, add animation, implement physics, build VR\u002FXR. Topics: GLTF loader, PBR materials, particle effects, shadows, post-processing, compute shaders, TSL. Integrations: WebGPU, physics engines, spatial audio.","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fthreejs\u002Fthreejs\u002FSKILL.md",[229],{"categoryNo":230,"categoryName":231,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[233,225,234,235,199,236,237,238,239,240,241,242,243,244,245,43,246,247,248,217],"threejs","gltf","implement","webgpu","create","examples","actions","api","Animation","3D","Audio","model","integrations","three","compute","physics",{"skillNo":250,"name":225,"nameZh":6,"description":226,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":195,"licenseFileUrl":6,"sourceHtmlUrl":251,"categories":252,"keywords":254,"publishedAt":47},"01M6D1G2AJ1CMM1Y29FY88M7XF","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fthreejs\u002FSKILL.md",[253],{"categoryNo":230,"categoryName":231,"taxonomyType":21,"taxonomyTypeDesc":22},[233,225,234,235,199,236,237,238,239,240,241,242,243,244,245,43,246,247,248,217],{"skillNo":256,"name":257,"nameZh":6,"description":258,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":195,"licenseFileUrl":6,"sourceHtmlUrl":259,"categories":260,"keywords":267,"publishedAt":47},"01M6D1C1V0Y04ERKEZ5J5D3HHT","ck:mintlify","Build and deploy documentation sites with Mintlify. Use when creating API docs, developer portals, or knowledge bases. Covers docs.json configuration, MDX components (Cards, Steps, Tabs, Accordions, CodeGroup, Callouts, Mermaid, View, Tiles, Tree, Badge, Banner, Color, Tooltips, Panel), page frontmatter, navigation structure (tabs, anchors, dropdowns, products, versions, languages), theming (7 themes), OpenAPI\u002FAsyncAPI integration, AI features (llms.txt, MCP, skill.md), deployment (GitHub, GitLab, Vercel, Cloudflare, AWS), and CLI commands for local development and validation.","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fmintlify\u002Fmintlify\u002FSKILL.md",[261,262],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":263,"categoryName":264,"taxonomyType":265,"taxonomyTypeDesc":266},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[268,257,269,270,271,272,273,274,275,276,240,277,278,279,43,280,281,45,282,283],"mintlify","MCP","llms","components","documentation","deployment","development","cloudflare","openapi","knowledge","page","view","vercel","bases","structure","local",{"skillNo":285,"name":257,"nameZh":6,"description":258,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":195,"licenseFileUrl":6,"sourceHtmlUrl":286,"categories":287,"keywords":290,"publishedAt":47},"01M6D1BXES6XY8P4AP26Y1FFTW","https:\u002F\u002Fgithub.com\u002FMinhHoangDono\u002Fantigravity-kit\u002Fblob\u002Fmaster\u002F.agent\u002Fskills\u002Fmintlify\u002FSKILL.md",[288,289],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":263,"categoryName":264,"taxonomyType":265,"taxonomyTypeDesc":266},[268,257,269,270,271,272,273,274,275,276,240,277,278,279,43,280,281,45,282,283]]