teachingai/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
   • api/tray.md - Tray API

5. Use templates from the templates/ directory:

   • templates/main-process.md - Main process template
   • templates/preload-script.md - Preload script template
   • templates/renderer-process.md - Renderer process template
   • templates/package-json.md - package.json template

Doc mapping (one-to-one with official documentation)

• examples/ → https://www.electronjs.org/zh/docs/latest/
• api/ → https://www.electronjs.org/zh/docs/latest/api/app

Quick Start Example

// 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 Reference (api/)

• api/app.md - app module API
• api/browser-window.md - BrowserWindow API
• api/ipc-main.md / api/ipc-renderer.md - IPC APIs
• api/menu.md / api/tray.md / api/dialog.md - UI APIs

Best Practices

1. Security: Never enable nodeIntegration in renderer process, use preload scripts
2. Process separation: Keep main and renderer processes separate
3. IPC communication: Use IPC for safe communication between processes
4. Resource management: Properly clean up resources (windows, listeners)
5. Error handling: Implement proper error handling and crash reporting
6. Performance: Optimize for performance, use webContents for debugging
7. Packaging: Use Electron Forge or electron-builder for packaging
8. Auto updates: Implement auto-updater for production apps
9. Native modules: Handle native module compatibility
10. Cross-platform: Test on all target platforms

Resources

• Official Website: https://www.electronjs.org/zh/
• Documentation: https://www.electronjs.org/zh/docs/latest/
• API Reference: https://www.electronjs.org/zh/docs/latest/api/app
• Electron Forge: https://www.electronforge.io
• Electron Fiddle: https://www.electronjs.org/zh/fiddle
• GitHub Repository: https://github.com/electron/electron

Keywords

Electron, desktop app, main process, renderer process, preload, IPC, BrowserWindow, Menu, Tray, Dialog, packaging, electron-builder, electron-forge, electron-fiddle, cross-platform, 桌面应用, 主进程, 渲染进程, IPC 通信, 窗口, 菜单, 托盘, 打包