An expert AI skill for AI coding assistants (like Claude, Antigravity, Cursor, etc.) designed to convert existing web applications into Electron desktop apps right from the chat or terminal.
Given an existing web application (Express, React, Vite, Next.js, or static), this skill generates all the files and configuration needed to produce a working Electron desktop app with an NSIS installer for Windows.
It handles:
- Project detection — Identifies framework, backend, build tool
- Main process — Creates
electron/main.tswith splash, tray, single instance lock - Preload bridge — Creates
electron/preload.tswith context-isolated IPC - Icon generation — Converts SVG/PNG logos to multi-size .ico files
- Installer config — NSIS with custom install path, shortcuts, menu category
- Build pipeline — Modifies package.json, vite config, build scripts
- Server embedding — Wraps Express/Fastify servers inside the Electron main process
This skill pairs with electron-desktop-builds for troubleshooting:
| Skill | When to use |
|---|---|
| electron-desktop-builder (this) | Starting from scratch, first Electron setup |
| electron-desktop-builds | Build fails, black screen, icons wrong, packaging errors |
Workflow:
Web app → electron-desktop-builder → First build
↓
Works? → Done
Fails? → electron-desktop-builds → Fix → Rebuild
# Clone into your AI skill directory
git clone https://github.com/smartbrainactivity/electron-desktop-builder.git
# For Claude Code:
# Place in ~/.claude/skills/ or your project's skills directory
# For other AI assistants:
# Place in your assistant's skill/knowledge directory# If you have the companion skill installed:
node electron-desktop-builds/scripts/audit-scan.js electron-desktop-builder/Prompt your AI assistant with:
"Convert this web app to an Electron desktop app"
"Set up Electron for this Express + React project"
"Create the Electron build for Windows with NSIS installer"
The skill will guide the assistant through the 10-step process defined in SKILL.md.
| Framework | Backend | Approach |
|---|---|---|
| Express + React/Vite | Yes | Embed Express on localhost |
| Vite / CRA (static) | No | Load from file:// |
| Next.js (static export) | No | Load from file:// |
| Next.js (server) | Yes | Embed server on localhost |
| Any Node.js server | Yes | Embed on localhost |
After running the skill, your project will have:
project/
├── electron/
│ ├── main.ts ← Main process
│ ├── preload.ts ← Context bridge
│ └── tsconfig.json ← CJS compilation config
├── assets/ ← Icon files (.ico, .png)
├── installer.nsh ← NSIS install path
├── package.json ← Modified (deps, scripts, build config)
├── vite.config.ts ← Modified (base: './')
└── .gitignore ← Modified (dist-electron, release)
| Script | Purpose |
|---|---|
scripts/generate-icons.cjs |
Convert SVG/PNG to multi-size .ico files |
- Node.js 18+ (for sharp image processing)
- npm (for electron and electron-builder installation)
- No runtime dependencies — this is a knowledge-only skill with utility scripts
- No data is collected or transmitted
- All processing happens locally
- No API keys or credentials required
The skill adapts to whatever language you prompt in. Documentation is in English.
Created by SMARTbrain Activity | hey@smartbrainactivity.ai