skills.rest
muhammaddadu
muhammaddaduCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

electron

Build, secure, and package Electron desktop apps with typed IPC and native window effects.

1|1|Updated Jul 6, 2026
Search Tags:#typescript#packaging#desktop app#electron#ipc#electron-builder#contextisolation
One-click install
npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill electron-muhammaddadu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron
Source: https://github.com/muhammaddadu/ai-skill-collection/tree/main/3-delivery/electron
Command: npx skills add https://github.com/muhammaddadu/ai-skill-collection --skill electron-muhammaddadu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires electron, and includes references (resource) components.

What problem does it solve? Electron apps frequently ship with insecure defaults, broken app names in the macOS menu, and drifting IPC contracts between processes. This Skill encodes the correct main/preload/renderer architecture, a security checklist, and packaging configuration so desktop apps are safe and correctly branded by construction. ## Core Features & Use Cases - Secure process architecture: Enforces contextIsolation, sandbox, strict CSP, and a narrow typed IPC bridge shared across main, preload, and renderer. - App identity and native feel: Fixes the macOS menu showing "Electron", configures productName, menus, and adds macOS vibrancy / Windows Mica with light-dark theming and accessibility fallbacks. - Packaging and distribution: Covers electron-builder vs Forge, per-platform icons, code signing, notarization, and auto-update wiring. - Use Case: You are scaffolding a TypeScript Electron app with electron-vite and need a contextIsolation-safe IPC layer, a correctly named macOS menu, and a signed installer — this Skill walks through each step with reference code. ## Quick Start Use the electron skill to scaffold a secure Electron app with typed IPC between the renderer and main process.

Frequently Asked Questions about electron

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up secure IPC between Electron renderer and main process?▼

Define channel names and API types in one shared module, expose narrow named methods via contextBridge.exposeInMainWorld in the preload, and register validated ipcMain.handle handlers in main. Never expose raw ipcRenderer or enable nodeIntegration in the renderer.

electron-builder vs Electron Forge for packaging desktop apps?▼

electron-builder is config-driven with built-in installers, auto-update, and signing, making it a good default. Electron Forge is plugin-driven and integrates with Vite/Webpack templates. Both read productName for the user-facing app name.

Why does my macOS Electron app menu show "Electron" instead of my app name?▼

In development the running binary is Electron.app, so the menu uses that name. Call app.setName before app.whenReady and build an explicit application menu; for packaged builds set productName in your packager config, which sets CFBundleName durably.

Does Electron contextIsolation break my preload script?▼

contextIsolation isolates the preload from the page's JavaScript world, so the renderer cannot access Node APIs directly. Expose only specific functions through contextBridge.exposeInMainWorld and validate every IPC argument in main to keep the boundary safe.

How do I add macOS vibrancy or Windows Mica to an Electron window?▼

On macOS set the vibrancy and visualEffectState BrowserWindow options with a hiddenInset title bar; on Windows 11 set backgroundMaterial to mica with a hidden title bar. Both fall back to an opaque backgroundColor on unsupported platforms.

When should I not use Electron for an app?▼

Do not use this Skill for web-only React UI, design-system lookups, or Expo/React Native mobile apps, which have their own skills. Electron suits desktop apps needing Node access to the filesystem, native menus, and OS integration.

Related Skills

Explore More Software Engineering Skills→
globalmsqglobalmsq

moai-framework-electron

Automate cross-platform Electron app scaffolding with secure IPC and packaging.

Official
Advanced
pedronauckpedronauck
567

electron-release

Build, sign, notarize, and release Electron apps via CI/CD.

Community
Advanced
phrazzldphrazzld
13

electron

Standardize Electron IPC contracts and BrowserWindow lifecycle across main, preload, and renderer processes.

Community
Advanced
neuron-oneneuron-one
25

mobile

Creates Expo-based React Native apps with navigation and AsyncStorage integration.

Community
Intermediate