electron-dev

Generate secure Electron app templates with preload scripts and contextIsolation.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/fanthus/agent-skills --skill electron-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: electron-dev
Source: https://github.com/fanthus/agent-skills/tree/main/electron-dev
Command: npx skills add https://github.com/fanthus/agent-skills --skill electron-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides production-ready Electron development templates and security-focused patterns to accelerate building cross‑platform desktop apps while ensuring best practices are followed.

Core Features & Use Cases

  • Secure architecture with contextIsolation, preload, and CSP guidance to minimize exposure of Node.js APIs.
  • IPC patterns and window/renderer integration examples for robust inter-process communication.
  • System integrations and UX patterns (tray, notifications, multi-window handling) for desktop-grade experiences.
  • Framework-agnostic templates and steps to start projects for vanilla JS, React, or Vue Electron apps.
  • Use Case: Rapidly scaffold an Electron-based tool (file manager, screenshot utility, or productivity app) that ships with secure defaults.

Quick Start

Copy the provided vanilla Electron template into your project, install dependencies, and run the development server to start building with security-first defaults.

Frequently Asked Questions about electron-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a secure Electron app using contextIsolation and preload?

Build a secure Electron app using provided templates that enforce contextIsolation and preload scripts, restricting Node.js API exposure to minimize security vulnerabilities.

What is the best way to set up IPC communication in a cross-platform Electron desktop app?

The best way to set up IPC communication is by applying the included best-practice IPC patterns, which demonstrate robust inter-process communication between the main and renderer processes for your cross-platform desktop app.

Can I use this Electron template with React or Vue?

Yes, you can use this template with React or Vue because it supplies framework-agnostic templates and project scaffolding steps that support vanilla JS, React, and Vue for building Electron desktop applications.

How do I implement system tray and multi-window handling for desktop tools?

Implement system tray and multi-window handling by utilizing the skill's system integration examples, which cover desktop-grade UX patterns like tray management, notifications, and robust multi-window handling.

Why do I need Content Security Policy (CSP) guidance for my Electron application?

You need Content Security Policy (CSP) guidance to secure your Electron application because it enforces security requirements that prevent unauthorized script execution and protect your desktop app from cross-site scripting attacks.