菜单
Build cross-platform desktop apps with JavaScript, HTML, and CSS. Use when building or maintaining Electron apps, configuring IPC/security, or packaging and distributing.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Ultra-compressed commit message generator. Cuts noise from commit messages while preserving intent and reasoning. Conventional Commits format. Subject ≤50 chars, body only when "why" isn't obvious. Use when user says "write a commit", "commit message", "generate commit", "/commit", or invokes /caveman-commit. Auto-triggers when staging changes.
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
| name | electron |
| description | Build cross-platform desktop apps with JavaScript, HTML, and CSS. Use when building or maintaining Electron apps, configuring IPC/security, or packaging and distributing. |
| metadata | {"author":"hairy","version":"2026.1.30","source":"Generated from https://github.com/electron/electron"} |
Electron embeds Chromium and Node.js so you can ship one JavaScript codebase for Windows, macOS, and Linux. Use these skills when scaffolding projects, wiring main/renderer IPC, configuring security and packaging, or integrating native modules and auto-updates.
The skill is based on Electron (latest), generated at 2026-01-30.
| Topic | Description | Reference |
|---|---|---|
| Process Model | Main, renderer, preload, utility process; when to use each | core-process-model |
| IPC | Renderer-main patterns (send, invoke, main->renderer), serialization | core-ipc |
| Context Isolation | contextBridge, exposing safe APIs from preload | core-context-isolation |
| Sandbox | Process sandboxing, preload polyfill, when it is disabled | core-sandbox |
| Topic | Description | Reference |
|---|---|---|
| Accessibility | setAccessibilitySupportEnabled, assistive tech, AXManualAccessibility | develop-accessibility |
| App Lifecycle | whenReady, window-all-closed, quit, single instance lock | develop-app-lifecycle |
| BaseWindow | Multi-view windows; contentView, View, addChildView; parent/modal | develop-base-window |
| BrowserWindow | Creating windows, loadURL/loadFile, ready-to-show, webPreferences | develop-browser-window |
| Clipboard | readText/writeText, readHTML/writeHTML; use from preload | develop-clipboard |
| Cookies | session.cookies; get, set, remove, flushStore; changed event | develop-cookies |
| Command Line | app.commandLine, appendSwitch, hasSwitch; Electron/Node/Chromium flags | develop-command-line |
| Context Menu | Right-click menu; webContents context-menu, Menu.popup | develop-context-menu |
| Crash Reporter | crashReporter.start, submitURL, extra; call before ready | develop-crash-reporter |
| Debug | Renderer DevTools, main process (--inspect, Chrome/VSCode) | develop-debug |
| Debugger (CDP) | webContents.debugger; attach, detach, sendCommand; DevTools Protocol | develop-debugger |
| DevTools Extension | loadExtension, removeExtension; electron-devtools-installer | develop-devtools-extension |
| Dialog | showOpenDialog, showSaveDialog, showMessageBox; expose via IPC | develop-dialog |
| Dock | macOS Dock; bounce, badge, icon, menu, hide/show | develop-dock |
| Downloads | will-download, DownloadItem, setSavePath, preventDefault | develop-downloads |
| Keyboard Shortcuts | Accelerators, local (MenuItem), global (globalShortcut) | develop-keyboard-shortcuts |
| Menus and Tray | Application/context/tray/dock menus; Tray icon and context menu | develop-menus-tray |
| Native Image | createFromPath, createFromBuffer, template image; tray, icon | develop-native-image |
| Native Modules | Using native Node addons; @electron/rebuild, node-gyp | develop-native-modules |
| Net | net.fetch, net.request; HTTP from main (Chromium stack) | develop-net |
| Drag and Drop | Native file drag out; webContents.startDrag, IPC | develop-drag-drop |
| ESM | ES modules in main and preload; .mjs, caveats | develop-esm |
| Multithreading | Web Workers, nodeIntegrationInWorker; no Electron in workers | develop-multithreading |
| Power Monitor | suspend, resume, battery/AC, thermal-state-change, shutdown | develop-power-monitor |
| Power Save Blocker | powerSaveBlocker; prevent display/app sleep; start/stop by id | develop-power-save-blocker |
| Progress Bar | setProgressBar (taskbar/dock); 0-1, indeterminate | develop-progress-bar |
| Protocol | Custom protocol (protocol.handle), registerSchemesAsPrivileged | develop-protocol |
| Safe Storage | encryptString, decryptString; OS keychain | develop-safe-storage |
| Screen | getPrimaryDisplay, getAllDisplays, workAreaSize, display events | develop-screen |
| Session | partition, defaultSession, permissionRequestHandler, cookies | develop-session |
| Shell | openExternal, openPath, showItemInFolder, trashItem; security | develop-shell |
| System Preferences | getEffectiveAppearance, getColor, getMediaAccessStatus | develop-system-preferences |
| Utility Process | utilityProcess.fork, postMessage, MessagePortMain | develop-utility-process |
| Web Request | onBeforeRequest, onHeadersReceived, filter; set CSP | develop-web-request |
| Window Customization | Frameless, transparent, custom title bar | develop-window-customization |
| Windows Taskbar | JumpList, setThumbarButtons, setOverlayIcon, flashFrame | develop-windows-taskbar |
| Topic | Description | Reference |
|---|---|---|
| Performance | Measure first, defer loading, avoid blocking, bundle | best-practices-performance |
| Security | Content loading, webPreferences, CSP, IPC validation, distribution | best-practices-security |
| Versioning | SemVer, ~ vs ^, stabilization branches, upgrade and EOL | best-practices-versioning |
| Topic | Description | Reference |
|---|---|---|
| ASAR | Pack/unpack, Node and Web API usage, unpack option, integrity | features-asar |
| Dark Mode | nativeTheme, themeSource, prefers-color-scheme | features-dark-mode |
| Desktop Capture | desktopCapturer, setDisplayMediaRequestHandler, getDisplayMedia | features-desktop-capture |
| Fuses | runAsNode, nodeCliInspect, asar integrity; @electron/fuses | features-fuses |
| MessagePorts | Renderer-to-renderer and main-renderer messaging; MessagePortMain | features-message-ports |
| Notifications | Main (Notification), renderer (Web Notifications API) | features-notifications |
| Online/Offline | net.isOnline(), net.online; navigator.onLine, online/offline events | features-online-offline |
| Service Workers | session.serviceWorkers; getAllRunning, main-SW IPC | features-service-workers |
| Spellchecker | Enable, setSpellCheckerLanguages, context menu, dictionary URL | features-spellchecker |
| Updates | autoUpdater, Squirrel, publishing release metadata | features-updates |
| Web Embeds | iframe, WebContentsView, webview tag; when to use each | features-web-embeds |
| Topic | Description | Reference |
|---|---|---|
| Code Signing | macOS sign + notarize; Windows Authenticode | distribute-code-signing |
| Mac App Store | MAS build, Apple Distribution, sandbox, limitations | distribute-mac-app-store |
| Packaging | Tooling (electron-builder), manual layout, asar, rebranding | distribute-packaging |
| Windows Store | AppX/MSIX, electron-windows-store, process.windowsStore | distribute-windows-store |
