About electron
An Agent skill for building Electron applications with JavaScript across Windows, macOS, and Linux. It organizes guidance on app architecture, IPC, security, development, and distribution.
Key features
- 01Main, renderer, and preload process guidance
- 02IPC and context isolation patterns
- 03Security and performance practices
- 04Native APIs and module guidance
- 05Packaging, signing, and updates
Use cases
- 01Scaffolding an Electron application
- 02Connecting renderer and main processes
- 03Reviewing security and performance choices
- 04Preparing builds for distribution
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/electronin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
GENERATION.mdreferences/best-practices-performance.mdbest-practices-security.mdbest-practices-versioning.mdcore-context-isolation.mdcore-ipc.mdcore-process-model.mdcore-sandbox.mddevelop-accessibility.mddevelop-app-lifecycle.mddevelop-base-window.mddevelop-browser-window.mddevelop-clipboard.mddevelop-command-line.mddevelop-content-tracing.mddevelop-context-menu.mddevelop-cookies.mddevelop-crash-reporter.mddevelop-debug.mddevelop-debugger.mddevelop-devtools-extension.mddevelop-dialog.mddevelop-dock.mddevelop-downloads.mddevelop-drag-drop.mddevelop-environment-variables.mddevelop-esm.mddevelop-keyboard-shortcuts.mddevelop-linux-desktop-actions.mddevelop-menus-tray.mdDetails
From the project READMEElectron embeds Chromium and Node.js so you can ship one JavaScript codebase for Windows, macOS, and Linux. Use these skills when scaffolding projects, wiring main/renderer IPC, configuring security and packaging, or integrating native modules and auto-updates.
The skill is based on Electron (latest), generated at 2026-01-30.
Core References
| Topic | Description | Reference |
|---|---|---|
| Process Model | Main, renderer, preload, utility process; when to use each | core-process-model |
| IPC | Renderer↔main patterns (send, invoke, main→renderer), serialization | core-ipc |
| Context Isolation | contextBridge, exposing safe APIs from preload | core-context-isolation |
| Sandbox | Process sandboxing, preload polyfill, when it is disabled | core-sandbox |
Develop
| Topic | Description | Reference |
|---|---|---|
| Accessibility | setAccessibilitySupportEnabled, assistive tech, AXManualAccessibility | develop-accessibility |
| App Lifecycle | whenReady, window-all-closed, quit, single instance lock | develop-app-lifecycle |
| BaseWindow | Multi-view windows; contentView, View, addChildView; parent/modal | develop-base-window |
| BrowserWindow | Creating windows, loadURL/loadFile, ready-to-show, webPreferences | develop-browser-window |
| Clipboard | readText/writeText, readHTML/writeHTML; use from preload | develop-clipboard |
| Cookies | session.cookies; get, set, remove, flushStore; changed event | develop-cookies |
| Command Line | app.commandLine, appendSwitch, hasSwitch; Electron/Node/Chromium flags | develop-command-line |
| Context Menu | Right-click menu; webContents context-menu, Menu.popup | develop-context-menu |
| contentTracing | Chromium tracing; startRecording, stopRecording; chrome://tracing | develop-content-tracing |
| Crash Reporter | crashReporter.start, submitURL, extra; call before ready | develop-crash-reporter |
| Debug | Renderer DevTools, main process (--inspect, Chrome/VSCode) | develop-debug |
| Debugger (CDP) | webContents.debugger; attach, detach, sendCommand; DevTools Protocol | develop-debugger |
| DevTools Extension | loadExtension, removeExtension; electron-devtools-installer | develop-devtools-extension |
| Dialog | showOpenDialog, showSaveDialog, showMessageBox; expose via IPC | develop-dialog |
| Dock | macOS Dock; bounce, badge, icon, menu, hide/show | develop-dock |
| Downloads | will-download, DownloadItem, setSavePath, preventDefault | develop-downloads |
| Keyboard Shortcuts | Accelerators, local (MenuItem), global (globalShortcut) | develop-keyboard-shortcuts |
| Linux Desktop Actions | .desktop file Actions; launcher shortcuts; process.argv | develop-linux-desktop-actions |
| Menus and Tray | Application/context/tray/dock menus; Tray icon and context menu | develop-menus-tray |
| Native Image | createFromPath, createFromBuffer, template image; tray, icon | develop-native-image |
| Native Modules | Using native Node addons; @electron/rebuild, node-gyp | develop-native-modules |
| Net | net.fetch, net.request; HTTP from main (Chromium stack) | develop-net |
| netLog | Session network logging; startLogging, stopLogging, captureMode | develop-net-log |
| Drag and Drop | Native file drag out; webContents.startDrag, IPC | develop-drag-drop |
| ESM | ES modules in main and preload; .mjs, caveats | develop-esm |
| Multithreading | Web Workers, nodeIntegrationInWorker; no Electron in workers | develop-multithreading |
| Navigation History | webContents.navigationHistory, goBack, goForward, getAllEntries | develop-navigation-history |
| Offscreen Rendering | paint event, NativeImage; GPU vs software; setFrameRate | develop-offscreen-rendering |
| parentPort | Utility process child; process.parentPort message/postMessage | develop-parent-port |
| Power Monitor | suspend, resume, battery/AC, thermal-state-change, shutdown | develop-power-monitor |
| Power Save Blocker | powerSaveBlocker; prevent display/app sleep; start/stop by id | develop-power-save-blocker |
| Progress Bar | setProgressBar (taskbar/dock); 0–1, indeterminate | develop-progress-bar |
| Protocol | Custom protocol (protocol.handle), registerSchemesAsPrivileged | develop-protocol |
| Recent Documents | addRecentDocument, clearRecentDocuments; JumpList, Dock | develop-recent-documents |
| Safe Storage | encryptString, decryptString; OS keychain | develop-safe-storage |
| Screen | getPrimaryDisplay, getAllDisplays, workAreaSize, display events | develop-screen |
| Session | partition, defaultSession, permissionRequestHandler, cookies | develop-session |
| Share Menu | macOS ShareMenu; share to apps/social; popup, shareMenu role | develop-share-menu |
| Shell | openExternal, openPath, showItemInFolder, trashItem; security | develop-shell |
| Process | process.type, process.versions, process.platform, process.mas | develop-process |
| Environment Variables | ELECTRON_*, NODE_OPTIONS; fuses | develop-environment-variables |
| Represented File | setRepresentedFilename, setDocumentEdited (macOS title bar) | develop-represented-file |
| System Preferences | getEffectiveAppearance, getColor, getMediaAccessStatus | develop-system-preferences |
| Touch Bar | macOS TouchBar; items (Button, Label, Slider, etc.), setTouchBar | develop-touch-bar |
| Tests | WebDriver/WebdriverIO E2E, headless CI | develop-tests |
| Utility Process | utilityProcess.fork, postMessage, MessagePortMain | develop-utility-process |
| Web Request | onBeforeRequest, onHeadersReceived, filter; set CSP | develop-web-request |
| webContents Navigation | will-navigate, setWindowOpenHandler, load events | develop-webcontents-navigation |
| webFrame | Renderer zoom, insertCSS, executeJavaScript, spell check, frame tree | develop-web-frame |
| webFrameMain | Main process frame control; fromId/fromFrameToken, executeJavaScript, IPC | develop-web-frame-main |
| webUtils | Renderer getPathForFile(File); file input path; expose via preload | develop-web-utils |
| Window Customization | Frameless, transparent, custom title bar | develop-window-customization |
| Windows Taskbar | JumpList, setThumbarButtons, setOverlayIcon, flashFrame | develop-windows-taskbar |
Best Practices
| Topic | Description | Reference |
|---|---|---|
| Performance | Measure first, defer loading, avoid blocking, bundle | best-practices-performance |
| Security | Content loading, webPreferences, CSP, IPC validation, distribution | best-practices-security |
| Versioning | SemVer, ~ vs ^, stabilization branches, upgrade and EOL | best-practices-versioning |
Features
| Topic | Description | Reference |
|---|---|---|
| ASAR | Pack/unpack, Node and Web API usage, unpack option, integrity | features-asar |
| Corner Smoothing | -electron-corner-smoothing CSS; smooth rounded corners; system-ui | features-corner-smoothing |
| Dark Mode | nativeTheme, themeSource, prefers-color-scheme | features-dark-mode |
| Desktop Capture | desktopCapturer, setDisplayMediaRequestHandler, getDisplayMedia | features-desktop-capture |
| Fuses | runAsNode, nodeCliInspect, asar integrity; @electron/fuses | features-fuses |
| In-App Purchase | Mac App Store IAP; purchaseProduct, getProducts, transactions-updated | features-in-app-purchase |
| MessagePorts | Renderer-to-renderer and main-renderer messaging; MessagePortMain | features-message-ports |
| Notifications | Main (Notification), renderer (Web Notifications API) | features-notifications |
| Online/Offline | net.isOnline(), net.online; navigator.onLine, online/offline events | features-online-offline |
| Push Notifications | APNS (macOS); registerForAPNSNotifications, received-apns-notification | features-push-notifications |
| Service Workers | session.serviceWorkers; getAllRunning, main↔SW IPC (IpcMainServiceWorker) | features-service-workers |
| Spellchecker | Enable, setSpellCheckerLanguages, context menu, dictionary URL | features-spellchecker |
| Updates | autoUpdater, Squirrel, publishing release metadata | features-updates |
| Web Embeds | iframe, WebContentsView, webview tag; when to use each | features-web-embeds |
Distribute
| Topic | Description | Reference |
|---|---|---|
| Code Signing | macOS sign + notarize; Windows Authenticode | distribute-code-signing |
| Mac App Store | MAS build, Apple Distribution, sandbox, limitations | distribute-mac-app-store |
| Packaging | Tooling (Forge), manual layout, asar, rebranding | distribute-packaging |
| Windows Store | AppX/MSIX, electron-windows-store, process.windowsStore | distribute-windows-store |
Comments
Markdown supported