electron-best-practices_skill

Overview

This skill guides AI agents through building secure, production-ready Electron apps using React and TypeScript. It focuses on security-first architecture, type-safe IPC, modern project setup with electron-vite and Electron Forge, packaging with code signing, and testing with Playwright. The content includes scaffolding, analysis scripts, and type generation patterns for robust apps.

How this skill works

The skill inspects and generates patterns for main, preload, and renderer code, enforcing contextIsolation, sandboxing, and disabled nodeIntegration. It produces typed IPC channel maps and result-type wrappers to preserve error context across boundaries. It also provides configuration templates and scripts for scaffolding projects, analyzing security issues, generating IPC types, packaging, signing, and Playwright testing.

When to use it

• Generating main, preload, or renderer code for an Electron + React app
• Setting up or migrating to electron-vite and Electron Forge workflows
• Designing type-safe IPC (invoke/handle) and contextBridge APIs
• Implementing security hardening: CSP, sandbox, contextIsolation, nodeIntegration off
• Packaging, code signing, notarization, and CI/CD release pipelines
• Creating Playwright E2E tests or multi-window state architectures

Best practices

• Always enable contextIsolation and sandbox; never set nodeIntegration: true
• Expose a small, typed API via contextBridge instead of exposing ipcRenderer directly
• Use invoke/handle with a typed channel map or electron-trpc for full type safety
• Wrap IPC returns in a Result type { success, data, error } to preserve error details
• Bind local dev servers to 127.0.0.1 and configure strict CSP via headers
• Group IPC handlers into modules, validate inputs with Zod or manual checks

Example use cases

• Scaffold a new Electron + React app with secure defaults and generated IPC types
• Generate a typed preload API that exposes only safe, validated operations to the renderer
• Create an IPC handler module that writes files and returns a Result type for robust error propagation
• Configure Electron Forge for platform signing and notarization in CI with matrix builds
• Write Playwright-driven E2E tests that launch the packaged app and exercise multi-window flows