skills.rest
tryplover
tryploverOFFICIAL
Explore all skills by this author →
WebsiteGitHub

plover-electron-windows-overlay

Diagnose and fix Electron overlay window rendering and positioning bugs on Windows.

1|Updated May 24, 2026
Search Tags:#troubleshooting#positioning#Electron#transparency#Windows#overlay#browserwindow
One-click install
npx skills add https://github.com/tryplover/Plover --skill plover-electron-windows-overlay-tryplover
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plover-electron-windows-overlay
Source: https://github.com/tryplover/Plover/tree/main/.claude/skills/plover-electron-windows-overlay
Command: npx skills add https://github.com/tryplover/Plover --skill plover-electron-windows-overlay-tryplover

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Secondary and overlay BrowserWindows in Electron apps often misbehave: a setup overlay opens a duplicate of the full main app instead of the overlay flow, a transparent frameless window renders as a solid black rectangle on Windows, or a companion window lands in the wrong corner. This Skill maps each symptom to its root cause and concrete fix. ## Core Features & Use Cases - Renderer variant routing fix: Correctly parse the variant query parameter in main.tsx so both "overlay" and "window" variants render the setup flow instead of falling back to the main <App /> layout. - Windows transparency fix: Set backgroundColor: '#00000000' explicitly on transparent, frameless, alwaysOnTop BrowserWindows to avoid the opaque black backing surface (electron/electron#40515), with an ordered fallback checklist covering resizable, remote sessions, and hardware acceleration. - Window positioning fix: Center the companion pill horizontally at the top using workArea math instead of a hardcoded right-edge offset. - Use Case: You wire up a previously dead window.api.companion.show() IPC call and the overlay appears as a black rectangle in the top-right corner on Windows 11 — this Skill walks you through the exact constructor option and positioning changes to fix both issues. ## Quick Start Ask the AI to diagnose why your Electron transparent overlay window renders as a solid black rectangle or opens the wrong content, and apply the documented fixes.

Frequently Asked Questions about plover-electron-windows-overlay

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

FAQPage Schema
Why does my transparent Electron BrowserWindow render as a black rectangle on Windows?▼

On some Windows systems, a BrowserWindow with transparent: true but no explicit backgroundColor falls back to an opaque black backing surface. Set backgroundColor: '#00000000' in the constructor options; also check that resizable is not true, another known trigger.

How do I fix an Electron window opening the main app instead of the overlay flow?▼

Parse the variant query parameter in your renderer entry (main.tsx) and match every variant that should render the overlay, such as both "overlay" and "window". A substring check for only "overlay" misses windows loaded with variant=window and falls back to the main app layout.

How do I center a frameless Electron window at the top of the screen?▼

Use the display workArea: set x to workArea.x + Math.round((workArea.width - windowWidth) / 2) and y to workArea.y plus a small offset like 12. Avoid hardcoded right-edge offsets, which pin the window to a corner.

Does disabling hardware acceleration fix Electron transparency issues?▼

app.disableHardwareAcceleration() can resolve opaque transparent windows, but it degrades rendering quality for every window in the app. Treat it as a last resort after setting backgroundColor explicitly and checking resizable and remote-session DWM composition.

Why does an Electron overlay work in development but fail when first shown to users?▼

Dead IPC plumbing can hide pre-existing window configuration bugs until a caller actually shows the window. When wiring up a previously unused show() call, verify transparency, positioning, and variant routing on the target platform, especially Windows.

Related Skills

Explore More Software Engineering Skills→
OpenSourceAGIOpenSourceAGI
74

desktop

Implements Electron desktop features with IPC controllers, preload scripts, and window management.

Official
Intermediate
HuuBarHuuBar

capture-screen

Captures macOS window screenshots by window ID using Swift, AppleScript, and screencapture.

Community
Advanced
binfen1binfen1

canary

Monitor live apps for console errors, performance regressions, and page failures.

Community
Advanced
hafley66hafley66
1

egui-overlay-windows

Render transparent egui overlay windows across macOS, Linux, and Windows.

Community
Advanced