skills.rest
marrabld
marrabldCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

electron-api

Implement typed Electron IPC APIs with TypeScript interfaces and preload scripts.

Updated Aug 23, 2026
Search Tags:#typescript#frontend#electron#preload#ipc#main-process#api-exposure
One-click install
npx skills add https://github.com/marrabld/waveterm --skill electron-api-marrabld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: electron-api
Source: https://github.com/marrabld/waveterm/tree/main/.kilocode/skills/electron-api
Command: npx skills add https://github.com/marrabld/waveterm --skill electron-api-marrabld

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Electron APIs enable the frontend to call Electron main process functionality directly via IPC.

Core Features & Use Cases

  • Define a TypeScript interface for new Electron APIs
  • Expose APIs in the preload script and implement IPC handlers in the main process
  • Add a no-op preview stub to keep frontend references in sync

Quick Start

Define a new Electron API in TypeScript, expose it via preload, implement its IPC handler, and add a no-op preview stub

Frequently Asked Questions about electron-api

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

FAQPage Schema
How do I expose Electron main process APIs to the frontend securely via IPC?▼

Expose Electron main process APIs securely by defining TypeScript interfaces, routing calls through a preload script, and implementing matching IPC handlers in the main process. This pattern separates frontend and main concerns while maintaining a typed API surface.

What is the best way to structure TypeScript interfaces for Electron IPC?▼

Structure TypeScript interfaces for Electron IPC by defining clear method signatures for both sync and async operations. This approach maintains a consistent, typed API surface across the main process and the preload script's exposed bridge.

How do I add a no-op preview stub for Electron APIs in the frontend?▼

Add a no-op preview stub for Electron APIs by defining a placeholder object in the frontend code that mirrors the TypeScript interface. This keeps frontend references in sync and prevents runtime errors when executing outside the main process.

Do I need a preload script to call Electron main process functions from the frontend?▼

Yes, a preload script is required to call Electron main process functions from the frontend. It acts as a secure bridge, exposing the typed IPC APIs defined in your TypeScript interfaces to the frontend environment.

Can I use this IPC pattern for both synchronous and asynchronous Electron main process calls?▼

Yes, this IPC pattern supports both synchronous and asynchronous Electron main process calls. It ensures a consistent implementation pattern for sync and async IPC, maintaining clear separation of concerns and a maintainable API surface.

Why are my frontend references breaking when I add new Electron IPC handlers?▼

Frontend references break when adding Electron IPC handlers if the API surface is not synchronized. Defining a TypeScript interface, exposing it via the preload script, and adding a no-op preview stub keeps frontend references in sync.

Related Skills

Explore More Software Engineering Skills→
gouravsingh311gouravsingh311

electron-ipc

Orchestrate Electron IPC communication between main and renderer processes.

Community
Intermediate
wavetermdevwavetermdev
22.0k

electron-api

Implement Electron APIs for frontend-to-backend IPC via preload scripts.

Official
Intermediate
mits-plmits-pl
40

electron-api

Bridge frontend and Electron main process with typed IPC patterns.

Community
Advanced
ichabodcoleichabodcole

electron-vue-ipc

Design typed Electron IPC architecture across main, preload, and renderer for Vue apps.

Community
Advanced