Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
From hairyf-skills-4
Builds cross-platform desktop apps with JavaScript, HTML, and CSS. Covers scaffolding, IPC wiring, security configuration, packaging, native modules, and auto-updates.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hairyf-skills-4:electronThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Electron 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.
GENERATION.mdreferences/best-practices-performance.mdreferences/best-practices-security.mdreferences/best-practices-versioning.mdreferences/core-context-isolation.mdreferences/core-ipc.mdreferences/core-process-model.mdreferences/core-sandbox.mdreferences/develop-accessibility.mdreferences/develop-app-lifecycle.mdreferences/develop-base-window.mdreferences/develop-browser-window.mdreferences/develop-clipboard.mdreferences/develop-command-line.mdreferences/develop-content-tracing.mdreferences/develop-context-menu.mdreferences/develop-cookies.mdreferences/develop-crash-reporter.mdreferences/develop-debug.mdreferences/develop-debugger.mdElectron 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.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
npx claudepluginhub hairyf/skillsProvides expertise in building secure, production-grade Electron apps: IPC patterns, preload scripts, packaging, code signing, auto-update, and native OS integration.
Guides Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.
Guides desktop app development with Electron and Tauri — cross-platform apps for Windows, macOS, Linux using a single codebase.