chrome-devtools
Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.
What this skill does
# Chrome DevTools Agent ## Overview A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the `chrome-devtools` MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling. ## When to Use Use this skill when: - **Browser Automation**: Navigating pages, clicking elements, filling forms, and handling dialogs. - **Visual Inspection**: Taking screenshots or text snapshots of web pages. - **Debugging**: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests. - **Performance Analysis**: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues. - **Emulation**: Resizing the viewport or emulating network/CPU conditions. ## Tool Categories ### 1. Navigation & Page Management - `new_page`: Open a new tab/page. - `navigate_page`: Go to a specific URL, reload, or navigate history. - `select_page`: Switch context between open pages. - `list_pages`: See all open pages and their IDs. - `close_page`: Close a specific page. - `wait_for`: Wait for specific text to appear on the page. ### 2. Input & Interaction - `click`: Click on an element (use `uid` from snapshot). - `fill` / `fill_form`: Type text into inputs or fill multiple fields at once. - `hover`: Move the mouse over an element. - `press_key`: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C"). - `drag`: Drag and drop elements. - `handle_dialog`: Accept or dismiss browser alerts/prompts. - `upload_file`: Upload a file through a file input. ### 3. Debugging & Inspection - `take_snapshot`: Get a text-based accessibility tree (best for identifying elements). - `take_screenshot`: Capture a visual representation of the page or a specific element. - `list_console_messages` / `get_console_message`: Inspect the page's console output. - `evaluate_script`: Run custom JavaScript in the page context. - `list_network_requests` / `get_network_request`: Analyze network traffic and request details. ### 4. Emulation & Performance - `resize_page`: Change the viewport dimensions. - `emulate`: Throttling CPU/Network or emulating geolocation. - `performance_start_trace`: Start recording a performance profile. - `performance_stop_trace`: Stop recording and save the trace. - `performance_analyze_insight`: Get detailed analysis from recorded performance data. ## Workflow Patterns ### Pattern A: Identifying Elements (Snapshot-First) Always prefer `take_snapshot` over `take_screenshot` for finding elements. The snapshot provides `uid` values which are required by interaction tools. ```markdown 1. `take_snapshot` to get the current page structure. 2. Find the `uid` of the target element. 3. Use `click(uid=...)` or `fill(uid=..., value=...)`. ``` ### Pattern B: Troubleshooting Errors When a page is failing, check both console logs and network requests. ```markdown 1. `list_console_messages` to check for JavaScript errors. 2. `list_network_requests` to identify failed (4xx/5xx) resources. 3. `evaluate_script` to check the value of specific DOM elements or global variables. ``` ### Pattern C: Performance Profiling Identify why a page is slow. ```markdown 1. `performance_start_trace(reload=true, autoStop=true)` 2. Wait for the page to load/trace to finish. 3. `performance_analyze_insight` to find LCP issues or layout shifts. ``` ## Best Practices - **Context Awareness**: Always run `list_pages` and `select_page` if you are unsure which tab is currently active. - **Snapshots**: Take a new snapshot after any major navigation or DOM change, as `uid` values may change. - **Timeouts**: Use reasonable timeouts for `wait_for` to avoid hanging on slow-loading elements. - **Screenshots**: Use `take_screenshot` sparingly for visual verification, but rely on `take_snapshot` for logic.
Related in AI Agents
skill-development
IncludedComprehensive meta-skill for creating, managing, validating, auditing, and distributing Claude Code skills and slash commands (unified in v2.1.3+). Provides skill templates, creation workflows, validation patterns, audit checklists, naming conventions, YAML frontmatter guidance, progressive disclosure examples, and best practices lookup. Use when creating new skills, validating existing skills, auditing skill quality, understanding skill architecture, needing skill templates, learning about YAML frontmatter requirements, progressive disclosure patterns, tool restrictions (allowed-tools), skill composition, skill naming conventions, troubleshooting skill activation issues, creating custom slash commands, configuring command frontmatter, using command arguments ($ARGUMENTS, $1, $2), bash execution in commands, file references in commands, command namespacing, plugin commands, MCP slash commands, Skill tool configuration, or deciding between skills vs slash commands. Delegates to docs-management skill for official documentation.
reprompter
IncludedTransform messy prompts into well-structured, effective prompts — single or multi-agent. Use when: "reprompt", "reprompt this", "clean up this prompt", "structure my prompt", rough text needing XML tags and best practices, "reprompter teams", "repromptception", "run with quality", "smart run", "smart agents", multi-agent tasks, audits, parallel work, anything going to agent teams. Don't use when: simple Q&A, pure chat, immediate execution-only tasks. See "Don't Use When" section for details. Outputs: Structured XML/Markdown prompt, quality score (before/after), optional team brief + per-agent sub-prompts, agent team output files. Success criteria: Single mode quality score ≥ 7/10; Repromptception per-agent prompt quality score 8+/10; all required sections present, actionable and specific.
adaptive-compaction
IncludedAdaptive add-on policy and recovery layer that decides WHEN to compact, prune, snapshot, or fork -- replacing fixed-percent auto-compaction across Claude Code, Codex, and MCP-capable hosts. Trigger on auto-compact timing or damage: "when should I compact", "is it safe to compact now or start a fresh session", "auto-compact fires too early/mid-task", "switching to an unrelated task but the window still has space", "context rot", "answers get worse the longer the session runs", "the agent forgot the plan or my decisions after it summarized", "add a layer on top that manages context without changing the agent", raising autoCompactWindow to give the policy room, or installing/tuning a cross-tool compaction policy or PreCompact hook -- even when "compaction" is never said but the problem is context-window pressure or post-summarization memory loss. Do NOT use to summarize a conversation, build RAG, write a summarization prompt (decides WHEN not HOW), or answer max-context-length trivia.
agent-skill-creator
IncludedCreate cross-platform agent skills from workflow descriptions. Activates when users ask to create an agent, automate a repetitive workflow, create a custom skill, or need advanced agent creation. Triggers on phrases like create agent for, automate workflow, create skill for, every day I have to, daily I need to, turn process into agent, need to automate, create a cross-platform skill, validate this skill, export this skill, migrate this skill. Supports single skills, multi-agent suites, transcript processing, template-based creation, interactive configuration, cross-platform export, and spec validation.
llm-wiki
IncludedUse when building or maintaining a persistent personal knowledge base (second brain) in Obsidian where an LLM incrementally ingests sources, updates entity/concept pages, maintains cross-references, and keeps a synthesis current. Triggers include "second brain", "Obsidian wiki", "personal knowledge management", "ingest this paper/article/book", "build a research wiki", "compound knowledge", "Memex", or whenever the user wants knowledge to accumulate across sessions instead of being re-derived by RAG on every query.
skill-master
IncludedAgent Skills authoring, evaluation, and optimization. Create, edit, validate, benchmark, and improve skills following the agentskills.io specification. Use when designing SKILL.md files, structuring skill folders (references, scripts, assets), ingesting external documentation into skills, running trigger evals, benchmarking skill quality, optimizing descriptions, or performing blind A/B comparisons. Keywords: agentskills.io, SKILL.md, skill authoring, eval, benchmark, trigger optimization.