electron-api

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

22.0k|1.1k|Updated Jun 8, 2022
One-click install
npx skills add https://github.com/wavetermdev/waveterm --skill electron-api
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: electron-api
Source: https://github.com/wavetermdev/waveterm/tree/main/.kilocode/skills/electron-api
Command: npx skills add https://github.com/wavetermdev/waveterm --skill electron-api

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to enabling communication between the frontend of Wave Terminal and its Electron backend, allowing frontend components to trigger backend functionality.

Core Features & Use Cases

  • IPC Communication: Facilitates synchronous, asynchronous, and fire-and-forget communication patterns between frontend and main Electron processes.
  • Type Safety: Integrates with TypeScript for defining and managing API contracts.
  • Use Case: When a user clicks a button in the UI to capture a screenshot, this Skill's pattern ensures the frontend can reliably invoke the captureScreenshot function in the Electron main process.

Quick Start

Use the electron-api skill to add a new captureScreenshot API to the frontend.

Frequently Asked Questions about electron-api

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

FAQPage Schema
How do I expose an Electron backend function to the frontend using IPC?

Electron IPC enables frontend-to-backend communication by routing messages through preload scripts. This Skill provides a structured approach to implementing synchronous, asynchronous, and fire-and-forget IPC patterns between your renderer and main processes.

How do I trigger an asynchronous backend task from an Electron renderer process?

To trigger an asynchronous backend task from an Electron renderer process, you invoke an exposed preload method that sends an asynchronous IPC message to the main process. This Skill covers how to wire up these handlers and manage the event lifecycle.

How do I maintain type safety for Electron preload API definitions in TypeScript?

You maintain type safety for Electron preload API definitions by updating your TypeScript definition files alongside your preload scripts. This Skill requires editing TypeScript definitions to ensure frontend and backend API contracts remain strictly typed.

Does this Skill support synchronous and fire-and-forget IPC communication patterns?

Yes, this Skill supports synchronous, asynchronous, and fire-and-forget IPC communication patterns. It guides you through implementing each pattern to expose methods and handle events between the Electron renderer and main processes.

What's the best way to structure a new Electron API for frontend-to-backend communication?

The best way to structure a new Electron API for frontend-to-backend communication is to define the contract in TypeScript, expose it via a preload script, and handle it with IPC listeners in the main process. This Skill provides that structured approach.