electron-fsd

Organize Electron applications into Main, Preload, and Renderer layers using Feature-Sliced Design.

Updated Dec 7, 2025

Search Tags:#architecture #electron #fsd #react-19 #renderer #ipc

Ready to run

npx skills add https://github.com/KwonCheulJin/pdf-studio-desktop --skill electron-fsd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: electron-fsd
Source: https://github.com/KwonCheulJin/pdf-studio-desktop/tree/main/.claude/skills/electron-fsd
Command: npx skills add https://github.com/KwonCheulJin/pdf-studio-desktop --skill electron-fsd

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide helps developers organize Electron applications using Feature-Sliced Design (FSD) with React 19. It covers the three-process model (Main, Preload, Renderer) and how to structure the Renderer layer into FSD slices (shared, entities, features, widgets, pages).

Core Features & Use Cases

Clear Electron process architecture guidance (Main, Preload, Renderer) and IPC routing conventions.
FSD layer responsibilities and folder conventions for entities (READ), features (CUD), widgets (composition), pages (routing), and shared utilities.
Public API patterns, strict slice boundaries, and recommended project layout for scalable, maintainable apps.

Quick Start

Create an Electron project and structure the folders as Main, Preload, and Renderer, then divide the Renderer into entities, features, widgets, pages, and shared according to FSD guidelines.

Frequently Asked Questions about electron-fsd

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

FAQPage Schema

How do I structure an Electron app with Feature-Sliced Design?▼

Structure an Electron app with Feature-Sliced Design by dividing the Renderer into shared, entities, features, widgets, and pages layers, while isolating Main and Preload process logic to enforce clear IPC boundaries and scalable folder conventions.

What are the FSD layer responsibilities in a React 19 Electron renderer?▼

FSD layer responsibilities assign READ operations to entities, CUD actions to features, composition to widgets, routing to pages, and shared utilities to the shared layer, enforcing strict slice boundaries and public API exports across the Electron renderer.

How do I establish clear IPC boundaries in an Electron application?▼

Establish clear IPC boundaries in an Electron application by separating the three-process model into Main, Preload, and Renderer, applying routing conventions and strict slice boundaries to prevent direct cross-process imports and maintain public API patterns.

Can I use Feature-Sliced Design with React 19 in an Electron project?▼

Yes, you can use Feature-Sliced Design with React 19 in an Electron project by structuring the Renderer process into FSD slices and applying naming conventions, public API exports, and strict layer separation for scalable, maintainable apps.

Why use FSD for Electron renderer architecture instead of a flat folder structure?▼

Use FSD for Electron renderer architecture instead of a flat folder structure to enforce strict slice boundaries, standardized public API exports, and clear layer responsibilities, which prevents circular dependencies and ensures scalable, maintainable project growth.

What is the recommended project layout for a scalable Electron app?▼

The recommended project layout for a scalable Electron app divides folders into Main, Preload, and Renderer, then further divides the Renderer into entities, features, widgets, pages, and shared layers with enforced naming conventions and public API exports.