fsd-architecture

Structure Electron applications with React 19 using Feature-Sliced Design layers.

Updated Feb 14, 2026
One-click install
npx skills add https://github.com/Ms1black/educational-repository-v4 --skill fsd-architecture-ms1black
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: fsd-architecture
Source: https://github.com/Ms1black/educational-repository-v4/tree/main/.cursor/skills/fsd-architecture
Command: npx skills add https://github.com/Ms1black/educational-repository-v4 --skill fsd-architecture-ms1black

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It addresses the challenge of structuring Electron applications according to the Feature-Sliced Design (FSD) architecture, facilitating clear separation of concerns for maintainability and scaling.

Core Features & Use Cases

  • Architectural Guidance: Provides a detailed overview of organizing Electron main, preload, and renderer processes using FSD layers.
  • Component & Workflow Templates: Offers structured workflows for creating entities, features, and widgets following naming conventions and patterns.
  • Use Case: Developers can set up new Electron + React projects aligned with FSD principles, ensuring scalable and maintainable codebases.

Quick Start

Consult the guide to organize your Electron app's structure, define FSD layers, and create relevant components accordingly.

Frequently Asked Questions about fsd-architecture

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

FAQPage Schema
How do I structure an Electron app using Feature-Sliced Design?

Structure an Electron app using Feature-Sliced Design by organizing main, preload, and renderer processes into distinct FSD layers. This separation ensures clear responsibilities and maintainability for scalable enterprise-grade projects.

What is the best way to integrate React 19 with Electron FSD architecture?

Integrate React 19 with Electron FSD architecture by applying structured component creation workflows for entities, features, and widgets. This enforces strict naming conventions and patterns to scale your application codebase effectively.

How do I create features and widgets in an Electron React application?

Create features and widgets in an Electron React application by using provided component templates and workflows. These templates define naming conventions and structural patterns aligned with Feature-Sliced Design principles.

Does Feature-Sliced Design work well for scaling enterprise Electron projects?

Feature-Sliced Design works well for scaling enterprise Electron projects by facilitating a clear separation of concerns across application layers. This architectural approach directly addresses maintainability challenges in complex codebases.

When should I use FSD layers in my Electron renderer process?

Use FSD layers in your Electron renderer process when you need strict boundaries and clear layer responsibilities for maintainability. This approach prevents tangled dependencies as your React application grows.