Agent skill

browser

Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements.

Stars 133
Forks 18

Install this agent skill to your Project

npx add-skill https://github.com/julianromli/opencode-template/tree/main/skill/browser

SKILL.md

Browser Tools

Minimal CDP tools for collaborative site exploration and scraping.

IMPORTANT: All scripts are located in ~/.factory/skills/browser/ and must be called with full paths.

Start Chrome

bash
~/.factory/skills/browser/start.js              # Fresh profile
~/.factory/skills/browser/start.js --profile    # Copy your profile (cookies, logins)

Start Chrome on :9222 with remote debugging.

Navigate

bash
~/.factory/skills/browser/nav.js https://example.com
~/.factory/skills/browser/nav.js https://example.com --new

Navigate current tab or open new tab.

Evaluate JavaScript

bash
~/.factory/skills/browser/eval.js 'document.title'
~/.factory/skills/browser/eval.js 'document.querySelectorAll("a").length'

Execute JavaScript in active tab (async context).

IMPORTANT: The code must be a single expression or use IIFE for multiple statements:

  • Single expression: 'document.title'
  • Multiple statements: '(() => { const x = 1; return x + 1; })()'
  • Avoid newlines in the code string - keep it on one line

Screenshot

bash
~/.factory/skills/browser/screenshot.js

Screenshot current viewport, returns temp file path.

Pick Elements

bash
~/.factory/skills/browser/pick.js "Click the submit button"

Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.

Usage Notes

  • Start Chrome first before using other tools
  • The --profile flag syncs your actual Chrome profile so you're logged in everywhere
  • JavaScript evaluation runs in an async context in the page
  • Pick tool allows you to visually select DOM elements by clicking on them

Expand your agent's capabilities with these related and highly-rated skills.

julianromli/opencode-template

test-driven-development

Use when implementing any feature or bugfix, before writing implementation code

133 18
Explore
julianromli/opencode-template

code-refactoring

Code refactoring patterns and techniques for improving code quality without changing behavior. Use for cleaning up legacy code, reducing complexity, or improving maintainability.

133 18
Explore
julianromli/opencode-template

using-superpowers

Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions

133 18
Explore
julianromli/opencode-template

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

133 18
Explore
julianromli/opencode-template

task-generator

Generate structured task lists from specs or requirements. IMPORTANT: After completing ANY spec via ExitSpecMode, ALWAYS ask the user: "Would you like me to generate a task list for this spec?" Use when user confirms or explicitly requests task generation from a plan/spec/PRD.

133 18
Explore
julianromli/opencode-template

next-best-practices

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

133 18
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results