Help us improve
Share bugs, ideas, or general feedback.
From tauri-skills
Covers Electron architecture (main/renderer/preload), IPC communication, BrowserWindow management, menus, tray icons, packaging, and security best practices for building cross-platform desktop apps.
npx claudepluginhub partme-ai/full-stack-skills --plugin vue-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/tauri-skills:electronThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill whenever the user wants to:
LICENSE.txtapi/app.mdapi/browser-window.mdexamples/advanced/packaging.mdexamples/api/browser-window.mdexamples/api/menu.mdexamples/getting-started/installation.mdexamples/getting-started/quick-start.mdexamples/processes/ipc-communication.mdexamples/processes/main-process.mdtemplates/main-process.mdtemplates/preload-script.mdProvides expertise in building secure, production-grade Electron apps: IPC patterns, preload scripts, packaging, code signing, auto-update, and native OS integration.
Guides desktop app development with Electron and Tauri — cross-platform apps for Windows, macOS, Linux using a single codebase.
Set up and build desktop applications with the Electron EGG framework, covering installation, project structure, main/renderer processes, IPC communication, window management, menu, tray, auto-updater, plugin system, and packaging.
Share bugs, ideas, or general feedback.
Use this skill whenever the user wants to:
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:
Identify the topic from the user's request:
examples/getting-started/installation.md or examples/getting-started/quick-start.mdexamples/processes/main-process.mdexamples/processes/renderer-process.mdexamples/processes/ipc-communication.mdexamples/api/browser-window.mdexamples/api/menu.mdexamples/advanced/packaging.mdexamples/advanced/security.mdLoad the appropriate example file from the examples/ directory:
Getting Started (快速开始) - examples/getting-started/:
examples/getting-started/installation.md - Installing Electron and basic setupexamples/getting-started/quick-start.md - Quick start tutorialProcesses (进程) - examples/processes/:
examples/processes/main-process.md - Main process concepts and usageexamples/processes/renderer-process.md - Renderer process conceptsexamples/processes/preload-scripts.md - Preload scripts usageexamples/processes/ipc-communication.md - IPC communication patternsAPI Examples (API 示例) - examples/api/:
examples/api/browser-window.md - BrowserWindow usageexamples/api/menu.md - Menu and context menuexamples/api/tray.md - System trayexamples/api/dialog.md - File dialogsexamples/api/ipc-main.md - ipcMain usageexamples/api/ipc-renderer.md - ipcRenderer usageAdvanced (高级) - examples/advanced/:
examples/advanced/packaging.md - Application packagingexamples/advanced/security.md - Security best practicesexamples/advanced/auto-updater.md - Auto updaterexamples/advanced/native-modules.md - Native modulesTools (工具) - examples/tools/:
examples/tools/electron-forge.md - Electron Forge usageexamples/tools/electron-fiddle.md - Electron Fiddle usageFollow the specific instructions in that example file for syntax, structure, and best practices
Important Notes:
Reference API documentation in the api/ directory when needed:
api/app.md - app module APIapi/browser-window.md - BrowserWindow APIapi/ipc-main.md - ipcMain APIapi/ipc-renderer.md - ipcRenderer APIapi/menu.md - Menu APIapi/tray.md - Tray APIUse templates from the templates/ directory:
templates/main-process.md - Main process templatetemplates/preload-script.md - Preload script templatetemplates/renderer-process.md - Renderer process templatetemplates/package-json.md - package.json templateexamples/ → https://www.electronjs.org/zh/docs/latest/api/ → https://www.electronjs.org/zh/docs/latest/api/app// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
function createWindow() {
const win = new BrowserWindow({
width: 800, height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: false, // Security: always disable
contextIsolation: true // Security: always enable
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
// IPC handler example
ipcMain.handle('get-data', async () => {
return { message: 'Hello from main process' }
})
// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
getData: () => ipcRenderer.invoke('get-data')
})
api/)api/app.md - app module APIapi/browser-window.md - BrowserWindow APIapi/ipc-main.md / api/ipc-renderer.md - IPC APIsapi/menu.md / api/tray.md / api/dialog.md - UI APIsElectron, desktop app, main process, renderer process, preload, IPC, BrowserWindow, Menu, Tray, Dialog, packaging, electron-builder, electron-forge, electron-fiddle, cross-platform, 桌面应用, 主进程, 渲染进程, IPC 通信, 窗口, 菜单, 托盘, 打包