SKILL.md

$2a

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

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

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

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

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

Security: Never enable nodeIntegration in renderer process, use preload scripts

Process separation: Keep main and renderer processes separate

IPC communication: Use IPC for safe communication between processes

Resource management: Properly clean up resources (windows, listeners)

Error handling: Implement proper error handling and crash reporting

Performance: Optimize for performance, use webContents for debugging

Packaging: Use Electron Forge or electron-builder for packaging

Auto updates: Implement auto-updater for production apps

Native modules: Handle native module compatibility

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 通信, 窗口, 菜单, 托盘, 打包

electron