electron-fsd

Community

Guidance for Electron apps with FSD & React 19.

AuthorKwonCheulJin
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: electron-fsd
Download link: https://github.com/KwonCheulJin/pdf-studio-desktop/archive/main.zip#electron-fsd

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.