Electron
Install this skill when you need a cross-platform desktop app with Electron—process architecture, IPC, windows, packaging, and security—in line with official Electron docs.
Overview
Electron is an agent skill for the Build phase that guides cross-platform desktop apps via main/renderer architecture, IPC, native UI, packaging, and Electron security practices.
Install
npx skills add https://github.com/teachingai/full-stack-skills --skill electronWhat is this skill?
- Main process, renderer, and preload architecture with IPC (ipcMain/ipcRenderer)
- BrowserWindow lifecycle, menus, tray icons, and native desktop affordances
- Electron Forge scaffolding, build, and distribution workflow
- Security best practices for context isolation and preload boundaries
- Debugging and testing patterns aligned to electronjs.org documentation structure
Adoption & trust: 2.3k installs on skills.sh; 475 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a desktop app on three OSes but do not have a clear map from Electron processes and IPC to secure packaging and distribution.
Who is it for?
Solo builders shipping developer tools, wrappers around web UIs, or offline desktop clients who already know JavaScript/TypeScript.
Skip if: Mobile-first App Store products better served by React Native or Flutter, or headless CLI utilities with no GUI requirement.
When should I use this skill?
User asks about Electron, cross-platform desktop apps, IPC, BrowserWindow, menus, tray, packaging, Electron Forge, or Electron APIs and security.
What do I get? / Deliverables
You get an Electron-aligned implementation plan—windows, preload IPC, menus, Forge build steps, and security guardrails—ready to code and package as installable desktop binaries.
- Process architecture sketch (main, preload, renderer) with IPC channel list
- Packaging and distribution steps via Electron Forge or equivalent
- Security checklist for preload and privileged main-process APIs
Recommended Skills
Journey fit
Desktop product construction sits in build; Electron spans UI and main-process glue but the buyer outcome is a shippable desktop client. Renderer UI, preload bridges, and window UX map to frontend even when ipcMain and packaging are involved.
How it compares
Desktop shell and process model skill—not a generic React SPA or pure backend API integration package.
Common Questions / FAQ
Who is electron for?
Indie full-stack and frontend-heavy builders using Claude Code or Cursor who need installable macOS, Windows, and Linux apps without learning three native UI kits.
When should I use electron?
During build when scoping a desktop client, implementing IPC and BrowserWindow features, packaging with Electron Forge, or hardening preload security before ship.
Is electron safe to install?
Electron apps touch filesystem and native APIs; review the skill’s requested permissions and the Security Audits panel on this Prism page before running packaging or network scripts.
SKILL.md
READMESKILL.md - Electron
## When to use this skill Use this skill whenever the user wants to: - Build cross-platform desktop applications with Electron - Understand Electron architecture (main process, renderer process, preload) - Implement IPC (Inter-Process Communication) between processes - Create and manage BrowserWindow instances - Implement menus, tray icons, and native features - Package and distribute Electron applications - Use Electron Forge for project scaffolding and building - Debug and test Electron applications - Implement security best practices - Use Electron APIs (app, BrowserWindow, ipcMain, ipcRenderer, etc.) ## How to use this skill This skill is organized to match the Electron official documentation structure (https://www.electronjs.org/zh/docs/latest/, https://www.electronjs.org/zh/docs/latest/api/app). When working with Electron: 1. **Identify the topic** from the user's request: - Getting started/快速开始 → `examples/getting-started/installation.md` or `examples/getting-started/quick-start.md` - Main process/主进程 → `examples/processes/main-process.md` - Renderer process/渲染进程 → `examples/processes/renderer-process.md` - IPC communication/IPC 通信 → `examples/processes/ipc-communication.md` - BrowserWindow/窗口 → `examples/api/browser-window.md` - Menu/菜单 → `examples/api/menu.md` - Packaging/打包 → `examples/advanced/packaging.md` - Security/安全 → `examples/advanced/security.md` 2. **Load the appropriate example file** from the `examples/` directory: **Getting Started (快速开始) - `examples/getting-started/`**: - `examples/getting-started/installation.md` - Installing Electron and basic setup - `examples/getting-started/quick-start.md` - Quick start tutorial **Processes (进程) - `examples/processes/`**: - `examples/processes/main-process.md` - Main process concepts and usage - `examples/processes/renderer-process.md` - Renderer process concepts - `examples/processes/preload-scripts.md` - Preload scripts usage - `examples/processes/ipc-communication.md` - IPC communication patterns **API Examples (API 示例) - `examples/api/`**: - `examples/api/browser-window.md` - BrowserWindow usage - `examples/api/menu.md` - Menu and context menu - `examples/api/tray.md` - System tray - `examples/api/dialog.md` - File dialogs - `examples/api/ipc-main.md` - ipcMain usage - `examples/api/ipc-renderer.md` - ipcRenderer usage **Advanced (高级) - `examples/advanced/`**: - `examples/advanced/packaging.md` - Application packaging - `examples/advanced/security.md` - Security best practices - `examples/advanced/auto-updater.md` - Auto updater - `examples/advanced/native-modules.md` - Native modules **Tools (工具) - `examples/tools/`**: - `examples/tools/electron-forge.md` - Electron Forge usage - `examples/tools/electron-fiddle.md` - Electron Fiddle usage 3. **Follow the specific instructions** in that example file for syntax, structure, and best practices **Important Notes**: - All examples follow Electron latest API - Examples use both CommonJS (require) and ES modules (import) - Each example file includes key concepts, code examples, and key points - Always check the example file for best practices and common patterns - Electron supports Windows, macOS, and Linux 4. **Reference API documentation** in the `api/` directory when needed: - `api/app.md` - app module API - `api/browser-window.md` - BrowserWindow API - `api/ipc-main.md` - ipcMain API - `api/ipc-renderer.md` - ipcRenderer API - `api/menu.md` - Menu API - `