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 148
Forks 21

Install this agent skill to your Project

npx add-skill https://github.com/julianromli/ai-skills/tree/main/skills/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/ai-skills

gemini-to-seedream-migration

Migrate AI image generation from Google Gemini 2.5 Flash to BytePlus SeeDream v4.5. Use when: (1) User wants to switch from Gemini to SeeDream/BytePlus for image generation, (2) User asks about migrating image generation APIs or replacing Gemini with BytePlus, (3) User needs cost optimization or better image quality for AI-generated images, (4) User mentions SeeDream, BytePlus, or wants SDK-to-REST API migration for image generation

148 21
Explore
julianromli/ai-skills

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.

148 21
Explore
julianromli/ai-skills

clone-website

Clone/replicate websites into production-ready Next.js 16 code using Firecrawl MCP. Use when user asks to: clone website, vibe clone, replicate landing page, copy website design, rebuild this site, recreate this page, clone specific sections (hero, pricing, footer, etc). Triggers: "clone this website", "vibe clone [url]", "replicate this landing page", "rebuild this site in Next.js", "clone the hero section from [url]", "copy this design".

148 21
Explore
julianromli/ai-skills

rsc-data-optimizer

Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"

148 21
Explore
julianromli/ai-skills

shadcn-management

Manage shadcn/ui components using MCP tools. Use when user needs to: (1) Add new shadcn components to a project (2) Build complex UI features requiring multiple components (3) Research component implementations and examples (4) Get component installation commands Triggers: "add shadcn", "shadcn component", "build UI with shadcn", "install component", "create form", "create dialog"

148 21
Explore
julianromli/ai-skills

frontend-ui-animator

Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".

148 21
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results