architecture

Name: architecture
Availability: InStock
Author: Mitch

Define architecture guidelines for Electron and React projects.

Updated Aug 27, 2026

Search Tags:#architecture #electron #naming-conventions #project-structure #code-organization #renderer #main-process

Ready to run

npx skills add https://github.com/mitchlabeetch/Largarda --skill architecture-mitchlabeetch

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/mitchlabeetch/Largarda/tree/main/.agents/skills/architecture
Command: npx skills add https://github.com/mitchlabeetch/Largarda --skill architecture-mitchlabeetch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Solves project-structure challenges by defining clear architecture guidelines for Electron apps.

Core Features & Use Cases

Establishes per-process boundaries (Renderer vs Main), naming conventions, and directory layouts to reduce confusion during development.
Offers a decision framework for organizing new files, modularizing single-file components, and migrating toward a scalable project structure.
Serves as a reference during code reviews and onboarding to align teams on project architecture.

Quick Start

Place a new module following the architecture guidelines to determine its correct location in src/, or reorganize an existing module to conform to the conventions described in references/project-layout.md and references/process.md.

Frequently Asked Questions about architecture

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

FAQPage Schema

How do I structure a scalable Electron and React project?▼

Structure your Electron and React project by establishing per-process boundaries between Renderer and Main, enforcing naming conventions, and organizing directories for bridges, services, and workers.

What is the best way to separate Main process and Renderer process code in Electron?▼

Separate Main and Renderer processes by defining clear directory layouts and per-process boundaries, ensuring specific code stays within its designated process to reduce development confusion.

How do I decide where to place a new module in an Electron app source directory?▼

Decide new module placement by applying a structured decision framework that evaluates file responsibilities and assigns them to the correct location within the src/ directory layout.

Can I use these architecture guidelines for migrating a single-file component into a modular structure?▼

Yes, you can use the guidelines to modularize single-file components and migrate existing modules toward a scalable directory structure that conforms to documented project layout conventions.

When do I need defined naming conventions for Electron project architecture?▼

You need defined naming conventions during new module creation, code reviews, team onboarding, or migrations to align developers on project architecture and prevent structural inconsistencies.

Why does code organization fail in Electron apps without strict process boundaries?▼

Code organization fails without strict process boundaries because overlapping Renderer and Main logic creates confusion, making directory structure and naming conventions difficult to enforce during development.