Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Electron Desktop Development Patterns

Gives Claude production-grade Electron patterns for security, IPC, tray, PTY terminals, WebRTC, and cross-platform packaging.

Dev & CodingIntermediate★ 386⑂ 65AI score 9/10Last updated: Sep 4, 2026

What it does

  • Establishes an Electron 30+ security baseline: contextIsolation, sandbox, no nodeIntegration, plus Electron Fuses and ASAR integrity validation (with CVE context).
  • Provides the three-layer safe IPC pattern: ipcMain.handle in main, narrow contextBridge surface in preload, typed React hooks in the renderer.
  • Ready-to-adapt snippets for system tray, global shortcuts, node-pty terminals, MediaRecorder audio capture, and PeerJS calls/screen sharing.
  • A full electron-builder.yml for Windows/macOS/Linux, plus macOS notarization and Windows code-signing env vars.
  • Fixes for common pitfalls: stale closures in async callbacks, and the BrowserView → WebContentsView migration.

Who it's for

  • Frontend/fullstack developers shipping desktop apps with React, TypeScript, and Vite.
  • Teams auditing an existing Electron app's security posture or finishing the release pipeline (signing, notarization).
  • Anyone embedding a terminal, audio recording, or real-time voice/video into a desktop app.

Usage examples

  1. "Wire an IPC channel so the renderer can ask main to save a recording" → generates preload bridge plus typed renderer call.
  2. "Package this for macOS DMG without Gatekeeper warnings" → electron-builder config and APPLE_ID/APPLE_TEAM_ID notarization steps.
  3. "I'm getting a BrowserView deprecation warning" → rewrites to contentView.addChildView with explicit setBounds.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/jamditis/claude-skills-journalism/HEAD/dev-toolkit/skills/electron-dev/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the dev-toolkit/skills/electron-dev folder from the GitHub repo jamditis/claude-skills-journalism into my ~/.claude/skills/electron-dev/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/jamditis/claude-skills-journalism.git && mkdir -p ~/.claude/skills && cp -r claude-skills-journalism/dev-toolkit/skills/electron-dev ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal and go to your home directory: cd ~
  2. Clone the repository: git clone https://github.com/jamditis/claude-skills-journalism.git
  3. Create the skills folder if needed: mkdir -p ~/.claude/skills
  4. Copy the skill in: cp -r claude-skills-journalism/dev-toolkit/skills/electron-dev ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/electron-dev — you should see SKILL.md.
  6. Restart Claude Code, then ask something like "show me the secure Electron IPC pattern" to trigger it.
  7. (Optional) For a single project only, copy the folder into that project's .claude/skills/ directory instead.
View source on GitHub ↗License: MIT