# electron-development

A Claude skill for building Electron desktop apps: context isolation, safe IPC through preload, electron-builder packaging and auto-update.

- skill · `type=skill` · Claude Code · 98 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/electron-development
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/electron-development

## What it does

This skill makes Claude act as a senior Electron engineer. It starts by mapping your project layout and the boundaries between processes, then pushes hard security values into `webPreferences`: `contextIsolation: true`, `nodeIntegration: false`, `sandbox: true`. Communication between main and renderer is expected to pass through a preload script that whitelists channels by name, so calls like `file:save` or `update:progress` stay explicit.

The workflow runs from analysis to a pre-ship checklist. Packaging with electron-builder or electron-forge, code signing and auto-update via electron-updater each get their own section. A sample tree is included, splitting code into `src/main`, `src/preload`, `src/renderer` and `src/shared`.

It is not meant for plain web apps, Tauri, Chrome extensions or mobile work, and it names other skills for those. One thing to watch: if your `BrowserWindow` still has `nodeIntegration: true` or `contextIsolation: false`, the skill flags it right away, because those settings leave the renderer open to remote code execution through XSS.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill web-development/electron-development
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill electron-development -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/electron-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/electron-development/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/electron-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/electron-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates electron-development
```

2. **Manually: put the files in place**
- File: `.github/skills/electron-development/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/electron-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/electron-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/web-development/electron-development

## When to use it
- harden BrowserWindow settings in an existing app
- design IPC channels with a preload whitelist
- package and sign a build with electron-builder
- wire up auto-update through electron-updater
- split a project across main, preload and renderer

## Example prompts
- Review `webPreferences` in `src/main/main.ts` and apply the secure defaults
- Write a preload script that whitelists channels for saving and opening files
- Set up electron-builder and auto-update for this app

## Similar
- [electron-pro](https://affpapa.org/en/nevibecode/agents/electron-pro.md) — subagent · 376 installs
- [electron](https://affpapa.org/en/nevibecode/rules/electron.md) — rule · ★ 3579
- [electron-builder](https://affpapa.org/en/nevibecode/skills/electron-builder.md) — skill · 392 installs
- [electron-best-practices](https://affpapa.org/en/nevibecode/skills/electron-best-practices.md) — skill · 820 installs
- [electron-dev](https://affpapa.org/en/nevibecode/skills/electron-dev.md) — skill · 305 installs
- [hexvero](https://affpapa.org/en/nevibecode/mcp/hexvero.md) — MCP server · ★ 8

## Other versions with the same name
- [electron-development · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-electron-development.md) — 1300 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md