Electron dev - Claude skills for journalism

When to use

Building desktop apps with web technologies
Implementing IPC communication between main and renderer
Managing windows, system tray, and global shortcuts
Handling PTY terminals with node-pty
Integrating WebRTC and audio recording
Packaging apps with electron-builder

What's included

Project structure

Standard layout with electron/, src/, and assets/ directories. CommonJS for main process, ESM for renderer.

IPC patterns

Secure context bridge setup with ipcMain.handle() for async requests and event-based communication.

System integration

System tray with context menus, global shortcuts, and hide-to-tray behavior.

Build configuration

Complete electron-builder.yml for Windows, Mac, and Linux with code signing and auto-update.

Project structure

app/
├── electron/
│   ├── main.cjs              # Main process (CommonJS)
│   ├── preload.cjs           # Context bridge for IPC
│   └── server.cjs            # Optional: WebSocket server
├── src/
│   ├── components/           # React components
│   ├── services/             # Business logic
│   ├── utils/                # Utilities
│   └── App.tsx               # Root component
├── assets/                   # Icons, sounds, images
├── package.json
├── vite.config.ts
└── electron-builder.yml

Common pitfalls

Avoid

Stale closures in callbacks

Use refs for async callback access. State variables capture initial values in event handlers.

Avoid

Exposing ipcRenderer directly

Always use contextBridge.exposeInMainWorld() and validate all IPC arguments in main process.

Note

Cross-platform shell detection

Check process.platform for Windows (powershell.exe) vs Unix (process.env.SHELL).

Installation

# Clone the repository

git clone https://github.com/jamditis/claude-skills-journalism.git

# Copy the skill to your Claude config

cp -r claude-skills-journalism/electron-dev ~/.claude/skills/

Or download just this skill from the GitHub repository.

Related skills

Zero-build frontend Python pipeline Mobile debugging

Desktop apps with web technologies

IPC patterns, system tray integration, and electron-builder configuration.

View on GitHub