browser
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
~/.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
~/.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
~/.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
~/.factory/skills/browser/screenshot.js
Screenshot current viewport, returns temp file path.
Pick Elements
~/.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
--profileflag 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 julianromli/opencode-template
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".
6next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
5finishing-a-development-branch
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
5ui-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.
5agents-md-generator
Generate hierarchical AGENTS.md structures for codebases. Use when user asks to create AGENTS.md files, analyze codebase for AI agent documentation, set up AI-friendly project documentation, or generate context files for AI coding assistants. Triggers on "create AGENTS.md", "generate agents", "analyze codebase for AI", "AI documentation setup", "hierarchical agents".
5windows-safe-grep
Use when grep/ripgrep fails on Windows due to paths with backslash-space sequences creating malformed paths like 'nul' from \n+ul
5