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

Ready to run

npx skills add https://github.com/jamditis/claude-skills-journalism --skill electron-dev-jamditis

💬 Prompt for ChatGPT / Claude Chat▼

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.