Two browser automation integrations in one skill. Chrome DevTools MCP runs immediately for testing, debugging, and performance tracing with Core Web Vitals. Claude-in-Chrome extension (requires --chrome flag) handles authenticated workflows like Google Docs or Gmail and can record GIFs up to 100 frames. Use DevTools for public sites and technical analysis, Claude-in-Chrome when you need to stay logged in or capture demos. The decision tree is straightforward: if you're testing or measuring performance, DevTools. If you're automating tasks in apps where you're already signed in, Claude-in-Chrome. Both have full element interaction, screenshots, and network inspection, but DevTools gives you device emulation and deeper performance analysis while Claude-in-Chrome gives you session persistence and visual recording.

skills.sh installs
389
GitHub stars
45
last updated
Aug 21, 2026

Install

$ npx -y skills add oimiragieo/agent-studio --skill chrome-browser --agent claude-code

Installs into .claude/skills of the current project.

Files

Chrome Browser Automation

Installation

Standalone script: No download; the skill invokes .claude/tools/chrome-browser/chrome-browser.cjs (Node.js v18+ required).

MCP integrations (for full automation):

  • Chrome DevTools MCP: Usually bundled with the environment; ensure Chrome/Chromium is installed (google.com/chrome).
  • Claude-in-Chrome: Install the Claude-in-Chrome extension and run with --chrome when needed.

Cheat Sheet & Best Practices

Testing: Test user-visible behavior, not implementation. Isolate tests (own storage/cookies); use before/after hooks for login or setup. Mock third-party networks instead of depending on live services.

DevTools Recorder: Record flows in Recorder panel; export as JSON or test scripts (Puppeteer, Nightwatch). Replay with Puppeteer Replay in CI. Use for performance measurement of user flows.

Hacks: Prefer Chrome DevTools MCP for testing/debugging (always on); use Claude-in-Chrome for authenticated sessions (GIF, forms). Limit GIF frames (e.g. 100) to avoid memory issues. Use take_snapshot for structure; evaluate_script for custom checks.

Sponsors

Details

Repository
github.com/oimiragieo/agent-studio
Categories
Testing & QA, AI & Agent Building, Debugging, Automation & Workflows, Video & Audio Editing
First seen
Jun 3, 2026

More from oimiragieo/agent-studio

All 9
1levnikolaevich avatarln-401-task-executorlevnikolaevich/claude-code-skillsExecutes implementation tasks through Todo, In Progress, To Review. Use when task needs coding with KISS/YAGNI. Not for test tasks.384skills.sh installs
2levnikolaevich avatarln-301-task-creatorlevnikolaevich/claude-code-skillsCreates implementation, refactoring, and test tasks from templates. Use when an approved task plan needs tasks created via the configured tracker provider and r383skills.sh installs
3davila7 avatarsystematic-debuggingdavila7/claude-code-templatesUse when encountering any bug, test failure, or unexpected behavior, before proposing fixes382skills.sh installs
4umbraco avatarumbraco-validation-checksumbraco/umbraco-cms-backoffice-skillsBrowser validation checks for testing Umbraco backoffice extensions manually382skills.sh installs
5alirezarezvani avatarcro-reviewalirezarezvani/claude-skills/cs:cro-review <plan> — Pipeline-paranoid interrogation of revenue, win rate, NRR, and ramp time. Use when the forecast misses pipeline coverage, win rates drop380skills.sh installs
6mims-harvard avatardevtu-fix-toolmims-harvard/tooluniverseFix failing ToolUniverse tools by diagnosing test failures, identifying root causes, implementing fixes, and validating solutions. Use when ToolUniverse tools f380skills.sh installs