@leejungkiin/awkit 1.5.5 → 1.5.6

package/skill-packs/electron/skills/electron/SKILL.md

@@ -0,0 +1,160 @@
+---
+name: electron
+description: "Build cross-platform desktop applications with Electron, covering main/renderer process architecture, IPC communication, BrowserWindow management, menus, tray icons, packaging, and security best practices. Use when the user asks about Electron, needs to create desktop applications, implement Electron features, or build cross-platform desktop apps."
+license: Complete terms in LICENSE.txt
+---
+
+## 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
+
+```javascript
+// 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' }
+})
+```
+
+```javascript
+// 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 通信, 窗口, 菜单, 托盘, 打包

package/skill-packs/electron/skills/electron/api/app.md

@@ -0,0 +1,83 @@
+# app Module API | app 模块 API
+
+## API Reference
+
+Electron app module API for application lifecycle management.
+
+### app Methods
+
+**Lifecycle:**
+- `app.whenReady()` - Returns Promise when app is ready
+- `app.quit()` - Quit the application
+- `app.exit(exitCode)` - Exit immediately
+- `app.relaunch([options])` - Relaunch the app
+
+**Window Management:**
+- `app.getPath(name)` - Get system path
+- `app.setPath(name, path)` - Set system path
+- `app.getVersion()` - Get app version
+- `app.getName()` - Get app name
+- `app.setName(name)` - Set app name
+
+**Platform:**
+- `app.getLocale()` - Get locale
+- `app.getLocaleCountryCode()` - Get country code
+- `app.isReady()` - Check if app is ready
+- `app.isPackaged` - Check if app is packaged
+
+### app Events
+
+- `ready` - Emitted when Electron has finished initializing
+- `window-all-closed` - Emitted when all windows are closed
+- `before-quit` - Emitted before app quits
+- `will-quit` - Emitted when app will quit
+- `quit` - Emitted when app quits
+- `activate` - Emitted when app is activated (macOS)
+- `second-instance` - Emitted when second instance is launched
+
+### Example: Basic Usage
+
+```javascript
+const { app, BrowserWindow } = require('electron')
+
+app.whenReady().then(() => {
+  createWindow()
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+```
+
+### Example: Single Instance
+
+```javascript
+const { app } = require('electron')
+
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+  app.quit()
+} else {
+  app.on('second-instance', () => {
+    // Focus existing window
+  })
+}
+```
+
+### Key Points
+
+- Use app.whenReady() before creating windows
+- Handle window-all-closed for proper quit
+- macOS requires activate event handling
+- Use requestSingleInstanceLock() for single instance
+- app has full Node.js access
+- Get system paths with app.getPath()

package/skill-packs/electron/skills/electron/api/browser-window.md

@@ -0,0 +1,84 @@
+# BrowserWindow API | BrowserWindow API
+
+## API Reference
+
+BrowserWindow API for creating and controlling application windows.
+
+### Constructor Options
+
+**Basic:**
+- `width`, `height` - Window size
+- `minWidth`, `minHeight` - Minimum size
+- `maxWidth`, `maxHeight` - Maximum size
+- `resizable` - Whether window is resizable
+- `movable` - Whether window is movable
+
+**Display:**
+- `show` - Show window when created
+- `frame` - Show window frame
+- `titleBarStyle` - Title bar style (macOS)
+- `backgroundColor` - Background color
+- `opacity` - Window opacity
+
+**Behavior:**
+- `alwaysOnTop` - Keep window on top
+- `fullscreen` - Start fullscreen
+- `skipTaskbar` - Skip taskbar (Linux/Windows)
+- `kiosk` - Kiosk mode
+
+**webPreferences:**
+- `preload` - Preload script path
+- `nodeIntegration` - Enable Node.js (not recommended)
+- `contextIsolation` - Enable context isolation (recommended)
+- `sandbox` - Enable sandbox
+
+### Instance Methods
+
+**Content:**
+- `loadURL(url[, options])` - Load URL
+- `loadFile(filePath[, options])` - Load local file
+- `reload()` - Reload window
+
+**Window Control:**
+- `show()` - Show window
+- `hide()` - Hide window
+- `close()` - Close window
+- `focus()` - Focus window
+- `blur()` - Remove focus
+
+**Size/Position:**
+- `setSize(width, height)` - Set size
+- `getSize()` - Get size
+- `setPosition(x, y)` - Set position
+- `getPosition()` - Get position
+- `center()` - Center window
+
+**State:**
+- `minimize()` - Minimize
+- `maximize()` - Maximize
+- `restore()` - Restore
+- `setFullScreen(flag)` - Set fullscreen
+
+**DevTools:**
+- `webContents.openDevTools()` - Open DevTools
+- `webContents.closeDevTools()` - Close DevTools
+
+### Instance Events
+
+- `ready-to-show` - Emitted when window is ready
+- `closed` - Emitted when window is closed
+- `focus` - Emitted when window gains focus
+- `blur` - Emitted when window loses focus
+- `maximize` - Emitted when maximized
+- `unmaximize` - Emitted when unmaximized
+- `minimize` - Emitted when minimized
+- `restore` - Emitted when restored
+
+### Key Points
+
+- Always set contextIsolation: true
+- Never set nodeIntegration: true
+- Use preload script for IPC
+- Handle ready-to-show for smooth loading
+- Clean up window references on closed
+- Use webContents for DevTools access

package/skill-packs/electron/skills/electron/examples/advanced/packaging.md

@@ -0,0 +1,140 @@
+# Packaging | 打包
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates how to package Electron applications for distribution.
+
+### Key Concepts
+
+- Using Electron Forge
+- Using electron-builder
+- Platform-specific builds
+- Code signing
+- Auto-updater integration
+
+### Example: Electron Forge Setup
+
+```bash
+# Initialize with Electron Forge
+npm create electron-app@latest my-app
+
+# Or add to existing project
+npx @electron-forge/cli import
+```
+
+### Example: Electron Forge Configuration
+
+```json
+// package.json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "main": ".vite/build/main.js",
+  "scripts": {
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make",
+    "publish": "electron-forge publish"
+  },
+  "config": {
+    "forge": {
+      "packagerConfig": {
+        "name": "My App",
+        "icon": "./assets/icon"
+      },
+      "makers": [
+        {
+          "name": "@electron-forge/maker-squirrel",
+          "config": {
+            "name": "my_app"
+          }
+        },
+        {
+          "name": "@electron-forge/maker-zip",
+          "platforms": ["darwin"]
+        },
+        {
+          "name": "@electron-forge/maker-deb",
+          "config": {}
+        },
+        {
+          "name": "@electron-forge/maker-rpm",
+          "config": {}
+        }
+      ]
+    }
+  }
+}
+```
+
+### Example: electron-builder Setup
+
+```json
+// package.json
+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "main": "main.js",
+  "scripts": {
+    "build": "electron-builder",
+    "build:win": "electron-builder --win",
+    "build:mac": "electron-builder --mac",
+    "build:linux": "electron-builder --linux"
+  },
+  "build": {
+    "appId": "com.example.myapp",
+    "productName": "My App",
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "main.js",
+      "preload.js",
+      "renderer/**/*",
+      "package.json"
+    ],
+    "win": {
+      "target": "nsis",
+      "icon": "build/icon.ico"
+    },
+    "mac": {
+      "target": "dmg",
+      "icon": "build/icon.icns",
+      "category": "public.app-category.utilities"
+    },
+    "linux": {
+      "target": "AppImage",
+      "icon": "build/icon.png"
+    }
+  }
+}
+```
+
+### Example: Build Commands
+
+```bash
+# Build for current platform
+npm run build
+
+# Build for specific platform
+npm run build:win
+npm run build:mac
+npm run build:linux
+
+# Build all platforms
+npm run build -- --win --mac --linux
+```
+
+### Key Points
+
+- Electron Forge is recommended for new projects
+- electron-builder is popular and flexible
+- Configure platform-specific settings
+- Include only necessary files in build
+- Set proper app ID and product name
+- Use icons for each platform
+- Code signing required for distribution
+- Test builds on target platforms

package/skill-packs/electron/skills/electron/examples/api/browser-window.md

@@ -0,0 +1,182 @@
+# BrowserWindow | 窗口
+
+**官方文档**: https://www.electronjs.org/zh/docs/latest/,
+
+
+## Instructions
+
+This example demonstrates how to use BrowserWindow to create and manage application windows.
+
+### Key Concepts
+
+- Creating windows
+- Window options
+- Loading content
+- Window events
+- Window methods
+
+### Example: Basic Window
+
+```javascript
+const { BrowserWindow } = require('electron')
+const path = require('path')
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false
+    }
+  })
+
+  win.loadFile('index.html')
+}
+
+createWindow()
+```
+
+### Example: Window Options
+
+```javascript
+const win = new BrowserWindow({
+  width: 1200,
+  height: 800,
+  minWidth: 400,
+  minHeight: 300,
+  maxWidth: 1920,
+  maxHeight: 1080,
+  resizable: true,
+  movable: true,
+  minimizable: true,
+  maximizable: true,
+  closable: true,
+  focusable: true,
+  alwaysOnTop: false,
+  fullscreen: false,
+  fullscreenable: true,
+  simpleFullscreen: false,
+  skipTaskbar: false,
+  kiosk: false,
+  title: 'My App',
+  icon: path.join(__dirname, 'icon.png'),
+  show: false, // Don't show until ready
+  frame: true,
+  titleBarStyle: 'default',
+  backgroundColor: '#ffffff',
+  webPreferences: {
+    preload: path.join(__dirname, 'preload.js'),
+    contextIsolation: true,
+    nodeIntegration: false
+  }
+})
+
+// Show when ready
+win.once('ready-to-show', () => {
+  win.show()
+})
+```
+
+### Example: Loading Content
+
+```javascript
+const win = new BrowserWindow({ width: 800, height: 600 })
+
+// Load local file
+win.loadFile('index.html')
+
+// Load URL
+win.loadURL('https://example.com')
+
+// Load with options
+win.loadFile('index.html', {
+  query: { key: 'value' },
+  hash: 'section'
+})
+```
+
+### Example: Window Events
+
+```javascript
+const win = new BrowserWindow({ width: 800, height: 600 })
+
+win.on('ready-to-show', () => {
+  win.show()
+})
+
+win.on('closed', () => {
+  win = null
+})
+
+win.on('focus', () => {
+  console.log('Window focused')
+})
+
+win.on('blur', () => {
+  console.log('Window blurred')
+})
+
+win.on('maximize', () => {
+  console.log('Window maximized')
+})
+
+win.on('unmaximize', () => {
+  console.log('Window unmaximized')
+})
+
+win.on('minimize', () => {
+  console.log('Window minimized')
+})
+
+win.on('restore', () => {
+  console.log('Window restored')
+})
+```
+
+### Example: Window Methods
+
+```javascript
+const win = new BrowserWindow({ width: 800, height: 600 })
+
+// Show/Hide
+win.show()
+win.hide()
+
+// Minimize/Maximize/Restore
+win.minimize()
+win.maximize()
+win.restore()
+
+// Close
+win.close()
+
+// Focus
+win.focus()
+win.blur()
+
+// Position
+win.setPosition(100, 100)
+const [x, y] = win.getPosition()
+
+// Size
+win.setSize(1200, 800)
+const [width, height] = win.getSize()
+
+// Center
+win.center()
+
+// DevTools
+win.webContents.openDevTools()
+win.webContents.closeDevTools()
+```
+
+### Key Points
+
+- BrowserWindow creates application windows
+- Use show: false and ready-to-show event for smooth loading
+- webPreferences should have contextIsolation: true
+- Never set nodeIntegration: true in renderer
+- Use loadFile() for local files, loadURL() for remote
+- Handle closed event to clean up references