Build cross-platform desktop applications with Electron using best practices for security, performance, and user experience. Use this skill when developing system tools (file managers, screenshot tools, productivity apps) or when working with Electron projects. Triggers include requests to create Electron apps, implement file operations, system tray functionality, window management, IPC communication, or optimize Electron performance. Supports vanilla JavaScript, React, and Vue frameworks with comprehensive code templates that embed security and performance best practices directly in comments.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
Build cross-platform desktop applications with Electron using best practices for security, performance, and user experience. Use this skill when developing system tools (file managers, screenshot tools, productivity apps) or when working with Electron projects. Triggers include requests to create Electron apps, implement file operations, system tray functionality, window management, IPC communication, or optimize Electron performance. Supports vanilla JavaScript, React, and Vue frameworks with comprehensive code templates that embed security and performance best practices directly in comments.
Electron Development
Build production-ready Electron applications with security-first architecture, optimal performance, and excellent user experience.
When to Use This Skill
Use this skill when you need to:
Create new Electron applications from scratch
Implement secure IPC communication between main and renderer processes
Add file system operations (read, write, watch, drag & drop)
Integrate system features (tray icons, global shortcuts, notifications)
Manage windows (multi-window, frameless, modal dialogs)
Optimize application performance
Integrate React or Vue frameworks with Electron
Follow Electron security best practices
Quick Start
Creating a New Project
For a complete, production-ready Electron project with all best practices:
# Copy the vanilla template to your working directorycp -r assets/vanilla-template/* /path/to/your/project
# Install dependenciescd /path/to/your/project
npm install
# Start development
npm run dev
The template includes:
✅ Secure main process with proper configuration
✅ Context-isolated preload script
✅ Example renderer with file operations, window controls, notifications
✅ System tray integration
✅ Global keyboard shortcuts
✅ Comprehensive comments explaining every best practice
✅ Cross-platform build configuration
For Framework-Specific Projects
If you need React or Vue integration, consult references/framework-guides.md first for detailed setup instructions, then use the vanilla template as a reference for security and IPC patterns.
Core Capabilities
1. Secure Architecture
Every code template in this skill implements Electron's security best practices:
Security settings (always applied):
webPreferences: {
contextIsolation: true, // Isolates renderer from main processnodeIntegration: false, // Prevents Node.js access in renderersandbox: true, // Sandboxes renderer processpreload: path.join(__dirname, 'preload.js'),
}
Why this matters: These settings prevent remote code execution, protect against XSS attacks, and ensure malicious web content can't access system resources.
For comprehensive security guidance, see references/security-guide.md.
2. IPC Communication Patterns
All IPC communication goes through validated channels in the preload script:
Three main patterns:
Request-Response (invoke/handle): For operations that need a return value
One-Way (send/on): For notifications and events
Streaming: For real-time updates like file watching
Each pattern includes:
Input validation in both preload and main process
Structured error handling
Proper cleanup functions
Performance optimizations
For detailed IPC patterns and examples, see references/ipc-patterns.md.
3. File System Operations
The vanilla template demonstrates:
Opening files via native dialog
Reading file contents securely
Writing files with user confirmation
Watching files for changes
Drag & drop support with visual feedback
All file operations include:
Path validation (prevent path traversal)
Error handling with user-friendly messages
Performance considerations (streaming for large files)
Cross-platform compatibility
4. System Integration
Templates show how to implement:
System tray: With context menu and click handlers
Global shortcuts: Cross-platform keyboard shortcuts
All code includes detailed comments explaining why and how
Security and performance best practices are embedded
Cross-platform considerations are noted
Test thoroughly
Test on all target platforms
Verify security settings
Check performance with real data
Code Examples
All code examples in this skill follow these principles:
1. Comments explain WHY, not just WHAT
// ❌ BAD comment// Create windowconst win = newBrowserWindow({ show: false });
// ✅ GOOD comment (from template)// UX: Hide window initially to prevent flickering// Show only when ready-to-show event firesconst win = newBrowserWindow({ show: false });
2. Security is non-negotiable
// Every IPC handler validates input
ipcMain.handle('file:read', async (event, filePath) => {
// SECURITY: Validate that the path is absolute to prevent path traversalif (!path.isAbsolute(filePath)) {
thrownewError('File path must be absolute');
}
// ... rest of implementation
});
