architecture

Determines correct file placement and structure for Electron multi-process projects.

Updated Sep 17, 2025
One-click install
npx skills add https://github.com/Ultra-Cube/Ultra-AI --skill architecture-ultra-cube
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/Ultra-Cube/Ultra-AI/tree/main/external-integrations/AionUi/.claude/skills/architecture
Command: npx skills add https://github.com/Ultra-Cube/Ultra-AI --skill architecture-ultra-cube

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Deciding where new code belongs in an Electron multi-process codebase is error-prone: placing renderer code in the main process (or vice versa) causes runtime crashes, and inconsistent naming or oversized directories degrade maintainability. This Skill provides deterministic rules for file placement, naming, and structure. ## Core Features & Use Cases - Placement Decision Tree: Routes new code to the correct location (renderer, bridge, services, agent, worker, common, preload, webserver, channels, extensions) based on its role. - Process Boundary Enforcement: Defines hard rules for what APIs each process (main, renderer, worker, preload) may use, preventing cross-process import crashes. - Naming & Structure Conventions: Specifies PascalCase vs lowercase directory rules, file naming patterns, the 10-children directory limit, and test file mirroring. - Use Case: When adding a new IPC bridge or React component, consult the decision tree and checklists to place it correctly, name it per convention, and wire it through preload. ## Quick Start Ask the assistant to determine where a new feature file should go in the Electron project and verify it follows the architecture conventions.

Frequently Asked Questions about architecture

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

FAQPage Schema
How do I decide where a new file goes in an Electron project?▼

Use the decision tree: React UI goes to src/renderer/, IPC handlers to process/bridge/, main-process business logic to process/services/, AI platform clients to process/agent/<platform>/, and code shared by both processes to src/common/.

How do I add a new IPC bridge between main and renderer?▼

Create a <domain>Bridge.ts file in process/bridge/, register it in bridge/index.ts, expose the channel through the preload script using contextBridge, and add renderer-side types if needed. Renderer code must never import main-process modules directly.

Can renderer code use Node.js APIs like fs or path?▼

No. Renderer code cannot use Node.js APIs or Electron main APIs, and importing from process/ crashes at runtime. Use IPC through the preload-exposed window.api methods instead.

When should a component become a directory instead of a single file?▼

Convert a component to a directory with an index.tsx entry point when it needs a private sub-component or hook. Single-file directories are not allowed; merge them into a parent or related directory instead.

What naming convention applies to directories in this project?▼

Renderer component and feature module directories use PascalCase, while categorical directories like components/, hooks/, and utils/ use lowercase. Platform directories such as acp/ and gemini/ stay lowercase everywhere for cross-process consistency.