electron-development · davila7 — Claude Code skill for secure Electron
A Claude skill for building Electron desktop apps: context isolation, safe IPC through preload, electron-builder packaging and auto-update.
npx claude-code-templates@latest --skill web-development/electron-developmentWhat electron-development 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.
What it helps with
- 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 for the agent
- Review
webPreferencesinsrc/main/main.tsand 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
How to install electron-development
1claude-code-templates
npx claude-code-templates@latest --skill web-development/electron-development2Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill electron-development -a claude-code3Manually: put the files in place
~/.claude/skills/electron-development/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/electron-development/
Manually: put the files in place
.agents/skills/electron-development/SKILL.mdFor all projects use ~/.agents/skills/
Manually: put the files in place
.cursor/skills/electron-development/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates electron-development2Manually: put the files in place
.github/skills/electron-development/SKILL.mdPlatform CLI
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/electron-developmentManually: put the files in place
.devin/skills/electron-development/SKILL.mdThe legacy .windsurf/skills/ path still works
Claude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about electron-development
How do I install electron-development in Claude Code?
Run npx claude-code-templates@latest --skill web-development/electron-development. Alternatively, use npx skills add davila7/claude-code-templates --skill electron-development -a claude-code.
What does electron-development do?
It guides Electron desktop work: secure BrowserWindow options, IPC over preload, packaging, code signing and auto-update.
When should I skip this skill?
For web-only projects, Tauri, Chrome extensions or mobile apps. The skill points to other skills for each of those cases.
Similar skills
All skills for Programming languages →electron-development by other authors comes first.
