skills.rest
jamditis
jamditisCOMMUNITY
Explore all skills by this author →
Website𝕏@jsamditisGitHub

electron-dev

Architect Electron apps with React and TypeScript using IPC and packaging patterns.

359|61|Updated Dec 25, 2025
Search Tags:#typescript#react#electron#ipc#desktop-app#electron-builder
One-click install
npx skills add https://github.com/jamditis/claude-skills-journalism --skill electron-dev-jamditis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron-dev
Source: https://github.com/jamditis/claude-skills-journalism/tree/main/electron-dev
Command: npx skills add https://github.com/jamditis/claude-skills-journalism --skill electron-dev-jamditis

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides developers in architecting and implementing production-grade Electron desktop applications using React and TypeScript, with clear patterns for inter-process communication, window and tray management, terminal integration, and packaging.

Core Features & Use Cases

  • Architecture patterns for Electron apps, including main/preload structure, IPC bridges, and modular code organization.
  • System integration examples such as PTY terminals, WebRTC/audio, tray icons, global shortcuts, and cross-platform packaging.
  • Use cases include building chat apps, IDE-like tools, and utilities with native-like desktop experiences.

Quick Start

Initialize a new Electron-React-TS project, install dependencies, and start the development server to see a running app.

Frequently Asked Questions about electron-dev

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

FAQPage Schema
How do I structure an Electron app with React and TypeScript for secure IPC?▼

Structure an Electron app with React and TypeScript by separating main and preload processes, establishing secure IPC bridges, and organizing code modularly. This enforces secure inter-process communication patterns for desktop applications.

What is the best way to set up main and preload process separation in an Electron app?▼

The best way to set up main and preload separation in an Electron app is to follow modular project structure patterns that isolate process-specific logic and enforce secure IPC bridges between the main process and the React renderer.

Can I integrate a PTY terminal and WebRTC into an Electron desktop application?▼

Yes, you can integrate a PTY terminal and WebRTC into an Electron desktop application. The Skill provides system integration patterns for embedding pseudo-terminals, managing audio, and handling WebRTC streams within a React interface.

How do I manage windows and tray icons when building cross-platform desktop apps with electron-builder?▼

Manage windows and tray icons in cross-platform desktop apps by applying dedicated window and tray management patterns. Use electron-builder to package the application consistently across Windows, macOS, and Linux.

Does this approach support building IDE-like tools and chat apps with native desktop experiences?▼

Yes, this approach supports building IDE-like tools and chat apps. It provides architectural patterns for native-like desktop experiences, including global shortcuts and PTY terminal integration necessary for these specific use cases.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
windyskywindysky

moai-framework-electron

Design and implement secure Electron 33+ desktop apps with IPC and auto-update.

Community
Advanced
memorysavermemorysaver

heroui-native

Build React Native and Expo interfaces with HeroUI Native components.

Community
Intermediate
Sir-chawakornSir-chawakorn
33

electron-app

Develop cross-platform Electron desktop apps with IPC and window controls.

Community
Advanced