القائمة
Puppeteer-based browser automation via single-purpose CLI scripts with persistent sessions and structured JSON output
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/trungdo9/ClauKit --skill chrome-devtoolsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
WordPress REST API client — connect to a live WP site to publish/update posts & pages (draft→publish), upload media, manage categories/tags, write Yoast/RankMath SEO meta, and audit existing content. Use when pushing generated marketing content to WordPress or auditing live WP articles. Auth via Application Passwords (env vars only). Consumer/client skill (not for building WP plugin endpoints).
Conversion Rate Optimization — landing pages, signup flows, popups, A/B tests. 25-point framework.
End-to-end SEO article production pipeline — from keyword strategy to published post. Standardizes a 6-stage flow (research/strategy → competitor analysis + outline → section-by-section writing → on-page optimization → media → internal-link + publish) into a Claude-native workflow. Ported from an n8n production pipeline. Use to plan, write, optimize, and publish complete SEO articles (single or at scale), incl. WordPress. State tracked via a content pipeline table (Supabase or a local plan file).
عرض SKILL.md
| name | chrome-devtools |
| description | Puppeteer-based browser automation via single-purpose CLI scripts with persistent sessions and structured JSON output |
| category | Testing & Debug |
| status | active |
Browser automation through Puppeteer CLI scripts with persistent sessions. Every script outputs structured JSON for easy parsing. Navigate URLs, screenshot with auto-compression, click elements, fill forms, execute JavaScript in page context, monitor console/network, and measure Core Web Vitals.
The skill emphasizes persistent browser sessions: the browser keeps running across script executions, preserving state (logged-in sessions, cookies). Scripts disconnect but leave the browser alive for the next script — making multi-step workflows efficient.
Do NOT use when: running long autonomous AI sessions (use agent-browser), or for unit/E2E framework testing (use test-automation).
agent-browserUse chrome-devtools for | Use agent-browser for |
|---|---|
| Quick screenshots | Long autonomous AI sessions |
| Custom Puppeteer scripts | Context-constrained workflows |
| WebSocket debugging | Video recording |
| Existing workflow integration | Cloud browsers (Browserbase) |
| Auth injection | Multi-tab handling |
| Low-level CDP access | Self-verifying build loops |
.claude/skills/chrome-devtools/ or user-scope ~/.claude/skills/chrome-devtools/)install-deps.sh)See references/installation.md for full setup.
# Install
cd .claude/skills/chrome-devtools/scripts && npm install
./install-deps.sh # Linux/WSL only
# Verify
node navigate.js --url https://example.com
# {"success": true, "url": "...", "title": "..."}
# 1. Navigate
node navigate.js --url https://example.com/login
# 2. Discover elements (when structure unknown)
node aria-snapshot.js
# 3. Interact (browser stays alive between calls)
node fill.js --selector "#email" --value "user@example.com"
node click.js --selector "button[type=submit]"
# 4. Verify and close
node screenshot.js --output ./result.png
node navigate.js --url about:blank --close true
All scripts live in scripts/ and output JSON.
| Script | Purpose |
|---|---|
navigate.js | Navigate to URLs |
screenshot.js | Capture screenshots (auto-compresses if >5MB) |
click.js | Click elements |
fill.js | Fill form fields |
evaluate.js | Execute JavaScript in page context |
snapshot.js | Extract interactive elements (JSON) |
aria-snapshot.js | Get ARIA accessibility tree (YAML with refs) |
select-ref.js | Interact with elements by ref from ARIA snapshot |
console.js | Monitor console messages/errors |
network.js | Track HTTP requests/responses |
performance.js | Measure Core Web Vitals |
ws-debug.js | Debug WebSocket connections (basic) |
ws-full-debug.js | Debug WebSocket with full events/frames |
Detailed usage: references/scripts-reference.md
Browser state persists across script runs via .browser-session.json (WebSocket endpoint).
--close true → close browser and remove session fileThis is the key feature for multi-step workflows: login once, then run many follow-up scripts that reuse the authenticated state.
Auto-detected from OS:
Override with --headless false to force visible.
--headless false — show browser window--close true — close browser entirely (default: keep alive)--timeout 30000 — timeout in ms--wait-until networkidle2 — wait strategy (load, domcontentloaded, networkidle0, networkidle2)See references/examples.md for full workflows:
For complex automation, write custom scripts in .claude/chrome-devtools/tmp/ using the lib/browser.js helpers (getBrowser, getPage, disconnectBrowser, outputJSON). See references/custom-scripts.md.
Common issues and fixes: references/troubleshooting.md
Quick reference:
| Error | Fix |
|---|---|
Cannot find package 'puppeteer' | npm install in scripts dir |
libnss3.so missing | ./install-deps.sh |
| Element not found | Use aria-snapshot.js first |
| Script hangs | --timeout 60000 or --wait-until load |
| Stale session | Delete .browser-session.json |
--close true on the final scriptaria-snapshot.js beats guessing selectors.claude/chrome-devtools/file:// — always serve local HTML through a server (CORS, ES modules, fetch all break otherwise)agent-browser — Token-efficient alternative for long AI sessionstest-automation — Playwright/Vitest/k6, the single testing toolkitfrontend-design — Screenshot implementations for design comparisonIncremental, focused scripts. Structured JSON output. Persistent sessions. ARIA-first discovery. One script, one task — repeat until done.