skills.rest
vishiri
vishiriCOMMUNITY
Explore all skills by this author →
GitHub

fantasia-electron-preload

Extend Electron preload APIs exposed through contextBridge with typed contracts.

401|56|Updated Jan 30, 2021
Search Tags:#typescript#security#electron#preload#ipc#contextBridge#api-surface
One-click install
npx skills add https://github.com/vishiri/fantasia-archive --skill fantasia-electron-preload
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fantasia-electron-preload
Source: https://github.com/vishiri/fantasia-archive/tree/main/.cursor/skills/fantasia-electron-preload
Command: npx skills add https://github.com/vishiri/fantasia-archive --skill fantasia-electron-preload

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extends or fixes renderer-facing Electron APIs exposed through the preload script and contextBridge. Use when adding IPC-like surface area, typing window.faContentBridgeAPIs, or editing files under src-electron/ contentBridgeAPIs.

Core Features & Use Cases

  • Modular API surface design: create one module per API under src-electron/contentBridgeAPIs/ and expose it safely through the preload.
  • Strong typing and access: update types in src-globals.d.ts to reflect the new window.faContentBridgeAPIs surface and keep the shape stable.
  • Safe integration workflow: import the new surface in electron-preload.ts, wire it into apiObject with a stable key, and extend type declarations accordingly.
  • Use Case: When adding IPC-like functionality or exposing new renderer-facing APIs, this skill guides the consistent pattern.

Quick Start

Define a contract in types, implement it under src-electron/contentBridgeAPIs, import and register in electron-preload.ts, and update typings.

Frequently Asked Questions about fantasia-electron-preload

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

FAQPage Schema
How do I safely expose new Electron preload APIs to the renderer process?▼

To safely expose Electron preload APIs, create a modular contract under src-electron/contentBridgeAPIs, wire it into contextBridge via electron-preload.ts, and update window.faContentBridgeAPIs type declarations to maintain a stable surface.

What is the best way to structure contextBridge IPC surfaces in a TypeScript Electron app?▼

Structuring contextBridge IPC surfaces requires a modular approach: define one module per API under src-electron/contentBridgeAPIs, establish per-API contracts, and register them with a stable key in the preload script.

How do I add type declarations for window.faContentBridgeAPIs when extending the preload script?▼

Update the types in src-globals.d.ts to reflect the new window.faContentBridgeAPIs surface, ensuring the shape remains stable and matches the API object wired in electron-preload.ts.

Does this modular preload API approach include test scaffolding for new IPC surfaces?▼

Yes, the modular API surface approach for Electron preload scripts includes test scaffolding alongside per-API contracts, type declarations, and preload wiring to ensure renderer-facing IPC surfaces remain stable.

When should I use contextBridge instead of direct require in an Electron preload script?▼

Use contextBridge when adding IPC-like functionality or exposing new renderer-facing APIs, as it provides a safe integration workflow that isolates the renderer from direct Node.js access better than direct require.

Why do my window.faContentBridgeAPIs types break after adding a new Electron preload module?▼

Types for window.faContentBridgeAPIs break if src-globals.d.ts is not updated to reflect the new API surface or if the module is not wired into the apiObject with a stable key in electron-preload.ts.

Related Skills

Explore More Software Engineering Skills→
YusufkotavomYusufkotavom

electron-development

Coordinate Electron app changes across renderer, main/preload, and embedded NestJS server.

Community
Intermediate
ichabodcoleichabodcole

electron-vue-ipc

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

Community
Advanced
pedronauckpedronauck
567

electron-dev

Guide Electron development with Electron Vite and Electron Builder for secure builds.

Community
Advanced
ereticaeretica

debugging-ipc

Diagnose IPC communication issues between Electron Main and Renderer processes.

Community
Advanced