agentleFS
JunfengRanJunfengRan/dev-env/skills/electron/SKILL.md

electron

Skill1 starsChanged 3 months agoMITView 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; 3 new projects in the last 4 weeks, against 4 the 4 before.

Adopted by

Cooling: 3 new projects took it in the last 4 weeks, 0.8× the 4 weeks before.thin data

Week of Sep 13: 0 new projectsWeek of Sep 20: 2 new projectsWeek of Sep 27: 1 new projectWeek of Oct 4: 1 new projectWeek of Oct 11: 1 new projectWeek of Oct 18: 0 new projectsWeek of Oct 25: 0 new projectsWeek of Nov 1: 2 new projects
Sep 2026Oct 2026Nov 2026
New projects taking a version of this file each week, over the 8 weeks our latest run read: only 7 in all, so this is a hint, not a trend.

Most recently taken up by

Used with

Projects with it also use dep-refs, feature-boundary-planner and 6 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • betacatslingSkill

    dep-refs

    Use when needs to inspect TypeScript export references in the z-code workspace, list exports from a file, verify whether an export is unused before deletion, investigate who imports a symbol during refactors, or combine pnpm knip unused-export results with pnpm dep:refs symbol-level reference tracing.

    Also in 5 projects that use this

  • betacatslingSkill

    feature-boundary-planner

    Map a ZCode behavior change to current UI surfaces, state owners, protocol commands, persistence, and validation. Use for impact analysis, product-boundary planning, or an implementation handoff grounded in the checked-out source.

    Also in 5 projects that use this

  • Cartograf666Skill

    architecture-governance

    Bootstrap, document, enforce, and review a project's architecture through layer responsibilities, dependency direction, architecture manifests, legacy baselines, Change Envelopes, cross-layer approval policy, and deterministic architecture checks. Use when starting a project, auditing an existing codebase, planning cross-layer work, preventing architecture erosion, reviewing structural changes, or deciding whether implementation may expand into another layer.

    Also in 5 projects that use this

  • ZCodium-projectSkill

    e2e-case-lifecycle

    Plan, maintain, replay, and promote ZCode desktop E2E cases and their fixtures, coverage matrices, and CI admission evidence.

    Also in 3 projects that use this

  • ZCodium-projectSkill

    zcode-large-task-fixture

    Generate, verify, or remove large synthetic ZCode task fixtures in local ~/.zcode persistence for UI/session performance testing. Use when testing big conversation/task rendering, task list performance, snapshot recovery, tool-call rendering, reasoning, patches, todos, and model usage without spending time chatting manually.

    Also in 3 projects that use this

  • VercelSkill

    ai-elements

    Build AI chat interfaces using ai-elements components — conversations, messages, tool displays, prompt inputs, and more. Use when the user wants to build a chatbot, AI assistant UI, or any AI-powered chat interface.

    Also in 5 projects that use this

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
  1. Common:

    Re-snapshot: after navigation or state changes

    line 17
  2. Very specific:

    Every Electron app supports the --remote-debugging-port flag since it's built into Chromium.

    line 34
  3. Very specific:

    Important: If the app is already running, quit it first, then relaunch with the flag.

    line 73
  4. Very specific:

    After connect, all subsequent commands target the connected app without needing --cdp.

    line 88
  5. Common:

    Use named sessions to control multiple Electron apps at the same time:

    line 175
  6. Very specific:

    Make sure the app was launched with --remote-debugging-port=NNNN

    line 208
  7. Common:

    If the app was already running, quit and relaunch with the flag

    line 209
  8. Very specific:

    Check that the port isn't in use by another process: lsof -i :9222

    line 210
  9. Very specific:

    Wait a few seconds after launch before connecting (sleep 3)

    line 214
  10. Very specific:

    If an app is built with Electron, it supports --remote-debugging-port and can be automated with agent-browser.

    line 236

“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.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.png

Launching 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=9227

Linux

slack --remote-debugging-port=9222
code --remote-debugging-port=9223
discord --remote-debugging-port=9224

Windows

"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=9223

Important: 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 -i

After 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.png

Note: 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 navigation

Take 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.png

Extract Data from a Desktop App

agent-browser connect 9222
agent-browser snapshot -i
agent-browser get text @e5
agent-browser snapshot --json > app-state.json

Fill 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 -i

Run 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 -i

Color 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 -i

Or set it globally:

AGENT_BROWSER_COLOR_SCHEME=dark agent-browser connect 9222

Troubleshooting

"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 tab to 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.

Download now (ZIP)

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
What did you use it for? e.g. Reviewing pull requests in a Rails app

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.