electron-development
Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.
Profile →npx skills add sickn33/agentic-awesome-skills --skill electron-development --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
It provides a structured approach to building Electron desktop apps emphasizing security (contextIsolation, nodeIntegration off, sandbox), explicit IPC channels via preload with whitelisting, and a recommended project structure. It covers process boundaries, secure IPC patterns (invoke/handle, send/on), and a production-focused security checklist plus examples for main/renderer/preload code, plus optional state management and packaging guidance.
How it works
- Analyzes project structure to define separate Main, Preload, and Renderer responsibilities. 2) Enforces security defaults in BrowserWindow (contextIsolation: true, nodeIntegration: false, sandbox: true) and CSP headers. 3) Implements secure IPC in the preload script by exposing an isolated API with whitelisted channels for send, invoke, and on, and constrains main process IPC handlers to validated inputs. 4) Provides example IPC handlers in the main process (e.g., file:open, file:save, app:get-version) and a type-safe renderer usage pattern. 5) Outlines a Production Security Checklist covering IPC, content, navigation, and packaging practices, plus defenses against navigation hijacking and secure protocol handling. 6) Details state management strategies across processes (main process single source of truth or electron-store) and demonstrates cross-window synchronization. 7) Includes build/signing/distribution guidance via electron-builder configuration and packaging defaults.
When to use it
Use when building new Electron desktop apps, securing an Electron app, setting up IPC between main, renderer, and preload, packaging and distributing with electron-builder or electron-forge, implementing auto-update with electron-updater, debugging, managing multiple windows, and integrating native OS features.
What it can touch
The skill prescribes the following tools and files: the preload script (contextBridge API), main process files (ipc-handlers.ts, store.ts), renderer usage patterns, and the electron-builder configuration. It references patterns and code snippets for BrowserWindow construction, CSP handling, IPC channels, and update hooks. All commands and file names are quoted exactly as in the skill (e.g., "contextIsolation: true", "electron-builder.yml", "preload.ts", "file:open", "app:get-version").
Caveats
The content emphasizes security defaults and does not guarantee runtime outcomes beyond what is stated (e.g., it describes security and process patterns, not UI outcomes). It requires correct integration and adherence to the patterns described (whitelisted channels, CSP headers, and production readiness checks).
# Electron Development You are a senior Electron engineer specializing in secure, production-grade desktop application architecture. You have deep expertise in Electron's multi-process model, IPC security patterns, native OS integration, application packaging, code signing, and auto-update strategies. ## Use this skill when - Building new Electron desktop applications from scratch - Securing an Electron app (contextIsolation, sandbox, CSP, nodeIntegration) - Setting up IPC communication between main, renderer, and preload processes - Packaging and distributing Electron apps with electron-builder or electron-forge - Implementing auto-update with electron-updater - Debugging main process issues or renderer crashes - Managing multiple windows and application lifecycle - Integrating native OS features (menus, tray, notifications, file system dialogs) - Optimizing Electron app performance and bundle size ## Do not use this skill when - Building web-only applications without desktop distribution → use `react-patterns`, `nextjs-best-practices` - Building Tauri apps (Rust-based desktop alternative) → use `tauri-development` if available - Building Chrome extensions → use `chrome-extension-
- Use this skill when
- Do not use this skill when
- Instructions
- Core Expertise Areas
- 1. Project Structure & Architecture
- 2. Process Model (Main / Renderer / Preload / Utility)
- 3. Secure IPC Communication
- 4. Security Hardening
- 5. State Management Across Processes
- 6. Build, Signing & Distribution
- 7. Developer Experience & Debugging
- Application Lifecycle Management
- Common Issue Diagnostics
- White Screen on Launch
Set environment variables before building: export CSC_LINK="path/to/Developer_ID_Application.p12" read -rsp "macOS certificate password: " CSC_KEY_PASSWORD echo export CSC_KEY_PASSWORD Set environment variables: export WIN_CSC_LINK="path/to/code-signing.pfx" read -rsp "Windows certificate password: " WIN_CSC_KEY_PASSWORD export WIN_CSC_KEY_PASSWORD Build signed app
What does the electron-development skill do?
Master Electron desktop app development with secure IPC, contextIsolation, preload scripts, multi-process architecture, electron-builder packaging, code signing, and auto-update.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill electron-development --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.