From hairyf-skills-4
Build cross-platform desktop apps with Electron using JavaScript, HTML, and CSS. Covers process model, IPC, context isolation, sandboxing, BrowserWindow, app lifecycle, and packaging.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin hairyf-skills-4This skill uses the workspace's default tool permissions.
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.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
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 |