🎯

browser

🎯Skill

from julianromli/droid-factory-template

What it does

Automates browser interactions using Chrome DevTools Protocol for navigation, JavaScript execution, screenshots, and element selection.

📦

Part of

julianromli/droid-factory-template(13 items)

browser

Installation

git cloneClone repository

git clone https://github.com/julianromli/droid-factory-template.git

📖 Extracted from docs: julianromli/droid-factory-template

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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

More from this repository10

🎯

agents-md-generator🎯Skill

Generates hierarchical AGENTS.md documentation for codebases, optimizing AI agent context with lightweight, token-efficient structures across project directories.

🎯

task-generator🎯Skill

Generates structured, actionable task lists with parent and sub-tasks from project specifications, breaking down implementation steps for developers.

🎯

frontend-ui-animator🎯Skill

Analyzes and implements purposeful UI animations for Next.js projects, enhancing user experience through strategic, performance-optimized motion design.

🎯

mgrep🎯Skill

Performs semantic, natural language search across local files, providing file paths and line ranges for matches.

🎯

frontend-design🎯Skill

Designs distinctive, production-grade frontend interfaces with creative aesthetics, avoiding generic AI design and focusing on purposeful, memorable visual experiences.

🎯

skill-creator🎯Skill

Guides users through creating specialized skills that extend Claude's capabilities with domain-specific knowledge and workflows.

🎯

template-skill🎯Skill

Provides a customizable template for creating new Claude skills with structured guidance and best practices.

🎯

rsc-data-optimizer🎯Skill

Optimizes Next.js data fetching by converting client-side rendering to fast, SEO-friendly React Server Components (RSC).

🎯

shadcn-management🎯Skill

Streamlines shadcn/ui component management by searching, installing, and configuring UI components with comprehensive workflow support.

🎯

frontend-ui-integration🎯Skill

Extends web application workflows by implementing UI/UX changes using existing backend APIs and design system conventions.