القائمة
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 المهني
| 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, scripts located at https://github.com/antfu/skills"} |
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 |
| contentTracing | Chromium tracing; startRecording, stopRecording; chrome://tracing | develop-content-tracing |
| 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 |
| Linux Desktop Actions | .desktop file Actions; launcher shortcuts; process.argv | develop-linux-desktop-actions |
| 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 |
| netLog | Session network logging; startLogging, stopLogging, captureMode | develop-net-log |
| 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 |
| Navigation History | webContents.navigationHistory, goBack, goForward, getAllEntries | develop-navigation-history |
| Offscreen Rendering | paint event, NativeImage; GPU vs software; setFrameRate | develop-offscreen-rendering |
| parentPort | Utility process child; process.parentPort message/postMessage | develop-parent-port |
| 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 |
| Recent Documents | addRecentDocument, clearRecentDocuments; JumpList, Dock | develop-recent-documents |
| Safe Storage | encryptString, decryptString; OS keychain | develop-safe-storage |
| Screen | getPrimaryDisplay, getAllDisplays, workAreaSize, display events | develop-screen |
| Session | partition, defaultSession, permissionRequestHandler, cookies | develop-session |
| Share Menu | macOS ShareMenu; share to apps/social; popup, shareMenu role | develop-share-menu |
| Shell | openExternal, openPath, showItemInFolder, trashItem; security | develop-shell |
| Process | process.type, process.versions, process.platform, process.mas | develop-process |
| Environment Variables | ELECTRON_*, NODE_OPTIONS; fuses | develop-environment-variables |
| Represented File | setRepresentedFilename, setDocumentEdited (macOS title bar) | develop-represented-file |
| System Preferences | getEffectiveAppearance, getColor, getMediaAccessStatus | develop-system-preferences |
| Touch Bar | macOS TouchBar; items (Button, Label, Slider, etc.), setTouchBar | develop-touch-bar |
| Tests | WebDriver/WebdriverIO E2E, headless CI | develop-tests |
| Utility Process | utilityProcess.fork, postMessage, MessagePortMain | develop-utility-process |
| Web Request | onBeforeRequest, onHeadersReceived, filter; set CSP | develop-web-request |
| webContents Navigation | will-navigate, setWindowOpenHandler, load events | develop-webcontents-navigation |
| webFrame | Renderer zoom, insertCSS, executeJavaScript, spell check, frame tree | develop-web-frame |
| webFrameMain | Main process frame control; fromId/fromFrameToken, executeJavaScript, IPC | develop-web-frame-main |
| webUtils | Renderer getPathForFile(File); file input path; expose via preload | develop-web-utils |
| 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 |
| Corner Smoothing | -electron-corner-smoothing CSS; smooth rounded corners; system-ui | features-corner-smoothing |
| 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 |
| In-App Purchase | Mac App Store IAP; purchaseProduct, getProducts, transactions-updated | features-in-app-purchase |
| 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 |
| Push Notifications | APNS (macOS); registerForAPNSNotifications, received-apns-notification | features-push-notifications |
| Service Workers | session.serviceWorkers; getAllRunning, main↔SW IPC (IpcMainServiceWorker) | 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 (Forge), manual layout, asar, rebranding | distribute-packaging |
| Windows Store | AppX/MSIX, electron-windows-store, process.windowsStore | distribute-windows-store |
Migrate a React Native project from NativeWind to Uniwind. Use when the user wants to replace NativeWind with Uniwind, upgrade from NativeWind, switch to Uniwind, or mentions NativeWind-to-Uniwind migration. Handles package removal, config migration, Tailwind 4 upgrade, cssInterop removal, theme conversion, and all breaking changes.
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent-* color props, platform/data/state/responsive variants, CSS variables, custom utilities, withUniwind for third-party components, cn/tailwind-merge, tailwind-variants, safe area utilities, gradients, fonts, React Navigation, UI kits, diagnostics, troubleshooting, and Uniwind Pro features. Does not cover NativeWind migration.
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.
Use Tailwind CSS to style React Native components across web and native
Build and maintain React Native apps with Expo SDK, EAS Build, EAS Update, and Continuous Native Generation. Use when configuring Expo projects, adding native modules, building binaries, or shipping over-the-air updates.
End-to-end testing patterns with Playwright for full-stack Python/React applications. Use when writing E2E tests for complete user workflows (login, CRUD, navigation), critical path regression tests, or cross-browser validation. Covers test structure, page object model, selector strategy (data-testid > role > label), wait strategies, auth state reuse, test data management, and CI integration. Does NOT cover unit tests or component tests (use pytest-patterns or react-testing-patterns).
