
Electron
- 35 installs
- vercel-labs/vercel-skills
electron is an agent skill for automating Electron desktop apps using agent-browser via Chrome DevTools Protocol.
About
The electron skill automates Electron desktop applications using agent-browser over Chrome DevTools Protocol. The core workflow launches an app with --remote-debugging-port, connects agent-browser, snapshots interactive elements, clicks by refs, and re-snapshots after navigation. macOS examples cover Slack, VS Code, Discord, Figma, Notion, and Spotify on distinct ports, with Linux and Windows launch commands included. If the app is already running, quit and relaunch with the flag because CDP must be enabled at startup. Tab commands list and switch between Electron windows and webviews. Named --session flags control multiple apps simultaneously on different ports. Common patterns include inspect-and-navigate, screenshots, text extraction, form fill, and multi-app sessions. Troubleshooting covers connection refused, startup wait timing, multi-webview target switching with tab, and custom input fields via keyboard type or inserttext. Playwright defaults to light color scheme unless overridden. Use when automating or testing native Electron apps like Slack, VS Code, or Discord with agent-browser.
- Connects agent-browser to Electron apps via --remote-debugging-port CDP.
- Snapshot-interact-re-snapshot workflow matching web automation patterns.
- Supports multi-window Electron apps with tab list and URL switching.
- Named sessions automate multiple desktop apps on different ports concurrently.
- Troubleshooting for relaunch, webview targets, and custom input components.
Electron by the numbers
- 35 all-time installs (skills.sh)
- Ranked #1,200 of 2,742 Automation & Workflows skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 9, 2026 (Skillselion catalog sync)
electron capabilities & compatibility
- Capabilities
- cdp port launch and agent browser connect · snapshot and element ref interaction · multi window tab management · named multi session concurrent control · screenshot and form fill patterns
- Works with
- chrome
- Use cases
- testing · orchestration
- Platforms
- macOS · Windows · Linux
What electron says it does
Electron apps are built on Chromium and expose a Chrome DevTools Protocol (CDP) port
Use named sessions to control multiple Electron apps at the same time
npx skills add https://github.com/vercel-labs/vercel-skills --skill electronAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 35 |
|---|---|
| Security audit | 2 / 3 scanners passed |
| Repository | vercel-labs/vercel-skills ↗ |
How do I automate or test a native Electron desktop app with agent-browser?
Automate Electron desktop apps via agent-browser connected through Chrome DevTools Protocol ports.
Who is it for?
Developers automating Electron apps like Slack, VS Code, or Discord on macOS, Linux, or Windows.
Skip if: Skip for web-only browser automation, non-Electron native apps, or mobile app testing.
When should I use this skill?
User asks to automate Slack app, control VS Code desktop, test Electron app, or connect to desktop app.
What you get
A connected CDP session with snapshots, interactions, screenshots, and tab switching on the target app.
Files
Electron App Automation
Automate any Electron desktop app using agent-browser. Electron apps are built on Chromium and expose a Chrome DevTools Protocol (CDP) port that agent-browser can connect to, enabling the same snapshot-interact workflow used for web pages.
Core Workflow
1. Launch the Electron app with remote debugging enabled 2. Connect agent-browser to the CDP port 3. Snapshot to discover interactive elements 4. Interact using element refs 5. Re-snapshot after navigation or state changes
# Launch an Electron app with remote debugging
open -a "Slack" --args --remote-debugging-port=9222
# Connect agent-browser to the app
agent-browser connect 9222
# Standard workflow from here
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot slack-desktop.pngLaunching Electron Apps with CDP
Every Electron app supports the --remote-debugging-port flag since it's built into Chromium.
macOS
# Slack
open -a "Slack" --args --remote-debugging-port=9222
# VS Code
open -a "Visual Studio Code" --args --remote-debugging-port=9223
# Discord
open -a "Discord" --args --remote-debugging-port=9224
# Figma
open -a "Figma" --args --remote-debugging-port=9225
# Notion
open -a "Notion" --args --remote-debugging-port=9226
# Spotify
open -a "Spotify" --args --remote-debugging-port=9227Linux
slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224Windows
"C:\Users\%USERNAME%\AppData\Local\slack\slack.exe" --remote-debugging-port=9222
"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --remote-debugging-port=9223Important: If the app is already running, quit it first, then relaunch with the flag. The --remote-debugging-port flag must be present at launch time.
Connecting
# Connect to a specific port
agent-browser connect 9222
# Or use --cdp on each command
agent-browser --cdp 9222 snapshot -i
# Auto-discover a running Chromium-based app
agent-browser --auto-connect snapshot -iAfter connect, all subsequent commands target the connected app without needing --cdp.
Tab Management
Electron apps often have multiple windows or webviews. Use tab commands to list and switch between them:
# List all available targets (windows, webviews, etc.)
agent-browser tab
# Switch to a specific tab by index
agent-browser tab 2
# Switch by URL pattern
agent-browser tab --url "*settings*"Common Patterns
Inspect and Navigate an App
open -a "Slack" --args --remote-debugging-port=9222
sleep 3 # Wait for app to start
agent-browser connect 9222
agent-browser snapshot -i
# Read the snapshot output to identify UI elements
agent-browser click @e10 # Navigate to a section
agent-browser snapshot -i # Re-snapshot after navigationTake Screenshots of Desktop Apps
agent-browser connect 9222
agent-browser screenshot app-state.png
agent-browser screenshot --full full-app.png
agent-browser screenshot --annotate annotated-app.pngExtract Data from a Desktop App
agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.jsonFill Forms in Desktop Apps
agent-browser connect 9222
agent-browser snapshot -i
agent-browser fill @e3 "search query"
agent-browser press Enter
agent-browser wait 1000
agent-browser snapshot -iRun Multiple Apps Simultaneously
Use named sessions to control multiple Electron apps at the same time:
# Connect to Slack
agent-browser --session slack connect 9222
# Connect to VS Code
agent-browser --session vscode connect 9223
# Interact with each independently
agent-browser --session slack snapshot -i
agent-browser --session vscode snapshot -iColor Scheme
Playwright overrides the color scheme to light by default when connecting via CDP. To preserve dark mode:
agent-browser connect 9222
agent-browser --color-scheme dark snapshot -iOr set it globally:
AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222Troubleshooting
"Connection refused" or "Cannot connect"
- Make sure the app was launched with
--remote-debugging-port=NNNN - If the app was already running, quit and relaunch with the flag
- Check that the port isn't in use by another process:
lsof -i :9222
App launches but connect fails
- Wait a few seconds after launch before connecting (
sleep 3) - Some apps take time to initialize their webview
Elements not appearing in snapshot
- The app may use multiple webviews. Use
agent-browser tabto list targets and switch to the right one - Use
agent-browser snapshot -i -Cto include cursor-interactive elements (divs with onclick handlers)
Cannot type in input fields
- Try
agent-browser keyboard type "text"to type at the current focus without a selector - Some Electron apps use custom input components; use
agent-browser keyboard inserttext "text"to bypass key events
Supported Apps
Any app built on Electron works, including:
- Communication: Slack, Discord, Microsoft Teams, Signal, Telegram Desktop
- Development: VS Code, GitHub Desktop, Postman, Insomnia
- Design: Figma, Notion, Obsidian
- Media: Spotify, Tidal
- Productivity: Todoist, Linear, 1Password
If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.
Related skills
FAQ
How do I enable CDP on an Electron app?
Quit the app if running, then relaunch with --remote-debugging-port=NNNN at startup.
How do I automate multiple Electron apps at once?
Use agent-browser --session with distinct ports for each app connection.
Is electron safe to install?
Review the Security Audits panel on this page before installing in production.