electron

Getting Started

1. Install the skill using the command above
2. Open your AI coding agent (Claude Code, Codex, Gemini CLI, or Cursor)
3. Reference the skill in your prompt
4. The AI will use the skill's capabilities automatically

Example Prompts

• "Review the open pull requests and summarize what needs attention"
• "Generate a changelog from the last 20 commits on the main branch"

Overview

Electron is a framework for building cross-platform desktop applications using web technologies. It combines a Node.js main process for system access and window management with Chromium renderer processes for the UI, communicating via IPC with context isolation and preload scripts for security.

Instructions

• When setting up the architecture, create a main process for window management and system APIs, renderer processes for UI, and preload scripts to expose a controlled API bridge via contextBridge.exposeInMainWorld().
• When implementing IPC, use ipcMain.handle() / ipcRenderer.invoke() for async request-response patterns, and webContents.send() for main-to-renderer push communication.
• When accessing native APIs, use dialogs, file system, clipboard, notifications, and shell operations in the main process, exposing them to the renderer through the preload bridge.
• When configuring security, keep contextIsolation: true and nodeIntegration: false (defaults), set CSP headers on all windows, sandbox renderer processes, and validate all IPC inputs in the main process.
• When packaging the app, use electron-builder or electron-forge to produce platform-specific installers (NSIS/MSI for Windows, DMG for macOS, AppImage/deb for Linux) with code signing and notarization.
• When implementing auto-updates, use electron-updater with GitHub Releases or a custom server, configure delta updates for smaller downloads, and verify update signatures.

Examples

Example 1: Build a file manager with native dialogs

User request: "Create an Electron app that browses and manages files with native dialogs"

Actions:

1. Set up main process with BrowserWindow and preload script exposing file system commands
2. Implement IPC handlers for dialog.showOpenDialog(), dialog.showSaveDialog(), and file operations
3. Build a React-based renderer UI for browsing directories and previewing files
4. Add context menus and keyboard shortcuts for file operations

Output: A cross-platform file manager with native OS dialogs and secure IPC-based file access.

Example 2: Add auto-updates with staged rollout

User request: "Set up auto-updates for my Electron app using GitHub Releases"

Actions:

1. Configure electron-builder with publish settings pointing to GitHub Releases
2. Add electron-updater in the main process with update check on startup
3. Implement update UI in the renderer showing download progress and restart prompt
4. Configure staged rollout to update a percentage of users first

Output: An Electron app that automatically checks for updates, downloads them in the background, and prompts the user to restart.

Guidelines

• Always use context isolation and preload scripts; never enable nodeIntegration in the renderer.
• Validate all IPC message data in the main process since the renderer is untrusted like a browser.
• Use ipcMain.handle() / ipcRenderer.invoke() for async operations over the older send/on pattern.
• Minimize main process work to keep it responsive for window management and IPC routing.
• Set CSP headers on all windows: default-src 'self'; script-src 'self'.
• Test on all target platforms since Windows, macOS, and Linux behave differently for menus, shortcuts, and file paths.
• Handle the renderer-process-gone event and monitor memory usage with process.memoryUsage().