angular-architecture

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: critical finding, no behavioural pass, undeclared transfer.

data = {"email": "[email protected]", "password": "pass123"}

await loginPage.login({ email: "[email protected]", password: "pass123" });

Audit 0.4.1 · source sha cfd30384f54c · 20 Oct 2026Report an issue or request a re-scan

• Publishergentleman-programming GitHub organizationOwner of the repository this skill is read from
• Source foldergentleman-programming/gentleman-skillsThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdictcfd30384f54cA new audit runs when the source changes
• Repository statusNot archivedLast push 206 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Electron patterns for building cross-platform desktop applications. Trigger: When building desktop apps, working with Electron main/renderer processes, IPC communication, or native integrations.

---
name: electron
description: >
  Electron patterns for building cross-platform desktop applications.
  Trigger: When building desktop apps, working with Electron main/renderer processes, IPC communication, or native integrations.
metadata:
  author: gentleman-programming
  version: "1.0"
---

## When to Use

Load this skill when:
- Building cross-platform desktop applications
- Working with Electron's main and renderer processes
- Implementing IPC (Inter-Process Communication)
- Integrating native OS features (menus, notifications, file system)
- Setting up Electron with React, Vue, or other frameworks
- Configuring auto-updates and app distribution

## Critical Patterns

### Pattern 1: Project Structure

```
src/
├── main/                    # Main process (Node.js)
│   ├── index.ts            # Entry point
│   ├── ipc/                # IPC handlers
│   │   ├── handlers.ts
│   │   └── channels.ts     # Type-safe channel names
│   ├── services/           # Native services
│   │   ├── store.ts        # electron-store
│   │   └── updater.ts      # auto-updater
│   └── windows/            # Window management
│       └── main-window.ts
├── renderer/               # Renderer process (browser)
│   ├── src/
│   │   ├── App.tsx
│   │   ├── components/
│   │   └── hooks/
│   │       └── useIPC.ts   # IPC hooks
│   └── index.html
├── preload/                # Preload scripts
│   └── index.ts            # Expose safe APIs
└── shared/                 # Shared types
    └── types.ts
```

### Pattern 2: Secure IPC Communication

Always use contextBridge for secure communication:

```typescript
// preload/index.ts
import { contextBridge, ipcRenderer } from 'electron';
import type { IpcChannels } from '../shared/types';

// Type-safe exposed API
const electronAPI = {
  // One-way: renderer -> main
  send: <T extends keyof IpcChannels>(
    channel: T, 
    data: IpcChannels[T]['request']
  ) => {
    ipcRenderer.send(channel, data);
  },

  // Two-way: renderer -> main -> renderer
  invoke: <T extends keyof IpcChannels>(
    channel: T, 
    data: IpcChannels[T]['request']
  ): Promise<IpcChannels[T]['response']> => {
    return ipcRenderer.invoke(channel, data);
  },

  // Listen: main -> renderer
  on: <T extends keyof IpcChannels>(
    channel: T, 
    callback: (data: IpcChannels[T]['response']) => void
  ) => {
    const subscription = (_: Electron.IpcRendererEvent, data: IpcChannels[T]['response']) => {
      callback(data);
    };
    ipcRenderer.on(channel, subscription);
    return () => ipcRenderer.removeListener(channel, subscription);
  },
};

contextBridge.exposeInMainWorld('electron', electronAPI);
```

### Pattern 3: Type-Safe IPC Channels

Define all channels with request/response types:

```typescript
// shared/types.ts
export interface IpcChannels {
  'app:get-version': {
    request: void;
    response: string;
  };
  'file:read': {
    request: { path: string };
    response: { content: string } | { error: string };
  };
  'file:write': {
    request: { path: string; content: string };
    response: { success: boolean };
  };
  'dialog:open-file': {
    request: { filters?: Electron.FileFilter[] };
    response: string | null;
  };
  'store:get': {
    request: { key: string };
    response: unknown;
  };
  'store:set': {
    request: { key: string; value: unknown };
    response: void;
  };
}

// Extend Window interface for renderer
declare global {
  interface Window {
    electron: typeof electronAPI;
  }
}
```

## Code Examples

### Example 1: Main Process Setup

```typescript
// main/index.ts
import { app, BrowserWindow, ipcMain } from 'electron';
import path from 'path';
import { registerIpcHandlers } from './ipc/handlers';

let mainWindow: BrowserWindow | null = null;

async function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      contextIsolation: true,  // Required for security
      nodeIntegration: false,  // Required for security
      sandbox: true,           // Extra security
    },
    titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
    trafficLightPosition: { x: 15, y: 10 },
  });

  // Register IPC handlers
  registerIpcHandlers();

  // Load the app
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173');
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
  }

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
```

### Example 2: IPC Handlers

```typescript
// main/ipc/handlers.ts
import { ipcMain, dialog, app } from 'electron';
import fs from 'fs/promises';
import Store from 'electron-store';

const store = new Store();

export function registerIpcHandlers() {
  // Get app version
  ipcMain.handle('app:get-version', () => {
    return app.getVersion();
  });

  // File operations
  ipcMain.handle('file:read', async (_, { path }) => {
    try {
      const content = await fs.readFile(path, 'utf-8');
      return { content };
    } catch (error) {
      return { error: (error as Error).message };
    }
  });

  ipcMain.handle('file:write', async (_, { path, content }) => {
    try {
      await fs.writeFile(path, content, 'utf-8');
      return { success: true };
    } catch {
      return { success: false };
    }
  });

  // Native dialogs
  ipcMain.handle('dialog:open-file', async (_, { filters }) => {
    const result = await dialog.showOpenDialog({
      properties: ['openFile'],
      filters: filters || [{ name: 'All Files', extensions: ['*'] }],
    });
    return result.canceled ? null : result.fileP

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-20
   ✕BLOCK D 69 / 100

   first audit · source cfd30384f54c

Questions about angular-architecture

• github.com/gentleman-programming/gentleman-skills — the audited source at commit cfd30384f54c and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology