electron-base

Builds secure cross-platform desktop apps with Electron, Vite, React, and TypeScript.

3|Updated Nov 14, 2025
One-click install
npx skills add https://github.com/evolv3ai/claude-skills-archive --skill electron-base-evolv3ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: electron-base
Source: https://github.com/evolv3ai/claude-skills-archive/tree/main/skills/electron-base
Command: npx skills add https://github.com/evolv3ai/claude-skills-archive --skill electron-base-evolv3ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a robust and secure foundation for building cross-platform desktop applications using Electron, Vite, React, and TypeScript, addressing common pitfalls in development and security.

Core Features & Use Cases

  • Secure Architecture: Implements best practices like context isolation and type-safe IPC.
  • OAuth Integration: Guides through secure OAuth flows using custom protocol handlers.
  • Native Module Support: Offers patterns for integrating native modules like better-sqlite3.
  • Build & Packaging: Includes configurations for electron-builder for cross-platform distribution.
  • Use Case: Develop a secure desktop client for your web application, ensuring user data is protected and the application is easily distributable.

Quick Start

Follow the steps in the SKILL.md to set up a new Electron project with Vite and React.

Frequently Asked Questions about electron-base

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

FAQPage Schema
How do I build a secure Electron app with React and TypeScript?

To build a secure Electron app, this Skill implements context isolation and type-safe IPC alongside React and TypeScript, ensuring your cross-platform desktop application protects user data through secure architecture patterns.

How does OAuth work in Electron desktop apps using custom protocol handlers?

OAuth in Electron uses custom protocol handlers to securely manage authentication flows. This approach allows your desktop application to handle redirects safely without exposing sensitive tokens or requiring an embedded browser.

What is the best way to package an Electron app with Vite for cross-platform distribution?

Packaging an Electron app for cross-platform distribution is handled via electron-builder configurations. This setup integrates with Vite to bundle your React and TypeScript application into distributable formats for multiple platforms.

Can I integrate native modules like better-sqlite3 into a Vite and Electron project?

Yes, you can integrate native modules like better-sqlite3 into an Electron project. This Skill provides specific patterns to compile and include native dependencies within your Vite and TypeScript build pipeline.

Why does my Electron app need context isolation and how is encryption key management handled?

Context isolation is needed in Electron to separate preload scripts from the main world, preventing security vulnerabilities. Encryption keys and CSRF protection are managed through dedicated security configurations.

Does this Electron template support type-safe IPC communication between the main and renderer processes?

Yes, type-safe IPC is supported to ensure secure communication between Electron's main and renderer processes. By leveraging TypeScript, it enforces data contracts that prevent runtime errors and unauthorized process access.