electron
Skill3 starsChanged 7 days agoApache-2.0View on GitHub
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
21 other projects use a version of this, 12 of them edited.
Adopted by
Most recently taken up by
- full-stack-skills/electron-skillstheir own version, first seen Nov 8, 2026
- ZCodium-project/ZCodiumword for word, first seen Nov 1, 2026
- JunfengRan/dev-envedited, first seen Oct 20, 2026
- foxl-ai/skillstheir own version, first seen Oct 15, 2026
- ccbud/CCBuddyedited, first seen Oct 14, 2026
- G1Joshi/Agent-Skillstheir own version, first seen Oct 13, 2026
Other versions21 projects use a version of this.
Word for word · 3
- zai-org/ZCode★ 8.6k100% same
- ZCodium-project/ZCodium★ 248100% same
- betacatsling/Open-ZCode★ 0100% same
Edited · 12
- vercel-labs/agent-browser★ 47k100% same
- coder/cmux★ 2.1k92% same
- coder/mux★ 2.1k92% same
- phodal/routa★ 1.8k95% same
- opral/flashtype★ 29295% same
- intent-hq/cloudlands-fe★ 960% same
- ccbud/CCBuddy★ 899% same
- flpbalada/fb-skills★ 828% same
- HK-hub/AgentSkills★ 6100% same
- JunfengRan/dev-env★ 1100% same
2 more not listed
Wrote their own version · 6
- 302ai/302-AI-Studio★ 133same name
- G1Joshi/Agent-Skills★ 15same name
- full-stack-skills/electron-skills★ 8same name
- secondorderai/ouroboros★ 3same name
- Quad4-Software/skills★ 1same name
- foxl-ai/skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository13 other files it gives its agents.
- AGENTS.mdAGENTS.md
- .agents/skills/react-best-practices/AGENTS.mdAGENTS.md
- agent-browserSkill
- ai-elementsSkill
- architecture-governanceSkill
- dep-refsSkill
- dogfoodSkill
- e2e-case-lifecycleSkill
- feature-boundary-plannerSkill
- grillSkill
- vercel-react-best-practicesSkill
- session-managementSkill
- zcode-large-task-fixtureSkill
The file
We split this skill into the rules it gives an agent
10 rules. 3 are common, 0 are distinctive, and 7 are very specific to this project.
3
Common
Most of the 18 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
7
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Common: line 24
Re-snapshot: after navigation or state changes
- Very specific: line 41
Every Electron app supports the --remote-debugging-port flag since it's built into Chromium.
- Very specific: line 80
Important: If the app is already running, quit it first, then relaunch with the flag.
- Very specific: line 95
After connect, all subsequent commands target the connected app without needing --cdp.
- Common: line 182
Use named sessions to control multiple Electron apps at the same time:
- Very specific: line 215
Make sure the app was launched with --remote-debugging-port=NNNN
- Common: line 216
If the app was already running, quit and relaunch with the flag
- Very specific: line 217
Check that the port isn't in use by another process: lsof -i :9222
- Very specific: line 221
Wait a few seconds after launch before connecting (sleep 3)
- Very specific: line 243
If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.
“Common” is measured: kept by at least 6 in 10 of the 18 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
<!--
Derived from vercel-labs/agent-browser (skills/electron/SKILL.md).
Copyright 2025 Vercel Inc. Licensed under Apache-2.0.
Modified by ZCode: local integration, formatting and adaptations.
See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
-->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
- Launch the Electron app with remote debugging enabled
- Connect agent-browser to the CDP port
- Snapshot to discover interactive elements
- Interact using element refs
- 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*"Webview Support
Electron <webview> elements are automatically discovered and can be controlled like regular pages. Webviews appear as separate targets in the tab list with type: "webview":
# Connect to running Electron app
agent-browser connect 9222
# List targets -- webviews appear alongside pages
agent-browser tab
# Example output:
# 0: [page] Slack - Main Window https://app.slack.com/
# 1: [webview] Embedded Content https://example.com/widget
# Switch to a webview
agent-browser tab 1
# Interact with the webview normally
agent-browser snapshot -i
agent-browser click @e3
agent-browser screenshot webview.pngNote: Webview support works via raw CDP connection.
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
The default color scheme when connecting via CDP may be light. 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
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.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

