skills.rest
benjr70
benjr70COMMUNITY
Explore all skills by this author →
GitHub

electron

Implements Electron Forge desktop apps with React, Webpack, IPC, and kiosk-mode displays.

1|1|Updated Oct 3, 2021
Search Tags:#react#desktop app#webpack#electron#ipc#electron-forge#kiosk mode
One-click install
npx skills add https://github.com/benjr70/Smart-Smoker-V2 --skill electron-benjr70
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron
Source: https://github.com/benjr70/Smart-Smoker-V2/tree/main/.claude/skills/electron
Command: npx skills add https://github.com/benjr70/Smart-Smoker-V2 --skill electron-benjr70

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building Electron desktop apps requires correctly separating the main, preload, and renderer processes while following security best practices, which is error-prone without clear guidance. This Skill provides concrete patterns for structuring Electron Forge apps with React, Webpack, and TypeScript, including kiosk-mode deployment on Raspberry Pi touchscreens. ## Core Features & Use Cases - Three-Process Architecture Guidance: Defines clear responsibilities for the main process, preload scripts, and React renderer, with typed IPC patterns via contextBridge and ipcMain. - Security Best Practices: Enforces context isolation, sandboxing decisions, CSP headers, and prohibits nodeIntegration and the deprecated remote module. - Kiosk Mode & Offline-First Patterns: Covers fullscreen kiosk BrowserWindow configuration, crash recovery, and graceful handling of network disconnection for embedded displays. - Use Case: When adding a new settings feature to the smoker kiosk app, use this Skill to correctly wire a typed IPC channel from the React renderer through the preload bridge to the main process. ## Quick Start Ask the AI to add a new typed IPC channel between the React renderer and the Electron main process following the project's preload bridge pattern.

Frequently Asked Questions about electron

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

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

Use ipcMain.handle() in the main process for request/response patterns and expose typed wrappers through contextBridge.exposeInMainWorld() in the preload script. Never expose ipcRenderer directly; wrap each channel in a typed function and declare a global Window API interface.

How do I configure Electron Forge with Webpack and React?▼

Electron Forge's @electron-forge/plugin-webpack bundles the main and renderer processes using separate webpack configs and shared rules for TypeScript and CSS. It provides magic constants like MAIN_WINDOW_WEBPACK_ENTRY and MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY for loading entry points.

How do I run an Electron app in kiosk mode on Raspberry Pi?▼

Create the BrowserWindow with frame: false, fullscreen: true, and kiosk: true to remove window chrome and prevent escape. Handle did-fail-load to auto-retry page loads and consider a watchdog timer to restart the app if the renderer crashes.

What Electron security settings should I use?▼

Keep contextIsolation enabled, avoid nodeIntegration in the renderer, and never use the deprecated remote module. Set Content-Security-Policy headers and document any decision to disable the sandbox, as this project does for preload access.

How do I test Electron main process code with Jest?▼

Mock the electron module with jest.mock(), stubbing app, BrowserWindow, and webContents methods like loadURL and setKiosk. Co-locate test files with source files and target 80% line coverage with 75% branch coverage.

Should Electron IPC or Socket.io be used for real-time data streaming?▼

Use Socket.io for real-time data streaming such as temperature updates, not Electron IPC. Reserve IPC for request/response operations like settings access, while the renderer communicates with the local device service and cloud backend over WebSockets.

Related Skills

Explore More Software Engineering Skills→
Divith123Divith123

hono

Build and test Hono web applications with routing, middleware, validation, and streaming APIs.

Community
Intermediate
rennerenne

deployment

Deploy and configure Watchtower for automatic Docker container updates via Docker Compose.

Community
Intermediate
solitasrohsolitasroh
2

serial-bridge

Configure matching UART settings between STM32 MCUs and .NET WPF apps.

Community
Intermediate
travisjneumantravisjneuman
88

electron-desktop

Develop cross-platform desktop applications with Electron and electron-builder.

Community
Advanced