electron-tray-menu-builder

name	electron-tray-menu-builder
description	Generate system tray and context menu configurations with platform-specific icons, menu templates, and event handling
allowed-tools	Read, Write, Edit, Bash, Glob, Grep
tags	["electron","tray","menu","system-tray","desktop"]
graph	{"domains":["domain:software-engineering"],"specializations":["specialization:desktop-development"],"skillAreas":["skill-area:desktop-ui-frameworks","skill-area:cross-platform-desktop"],"roles":["role:desktop-developer","role:fullstack-engineer"],"workflows":["workflow:feature-development","workflow:release-management"]}

electron-tray-menu-builder

Generate system tray and context menu configurations for Electron applications. This skill handles platform-specific icon requirements, menu template creation, and tray event handling across Windows, macOS, and Linux.

Capabilities

• Generate Tray class implementation with proper lifecycle
• Create platform-specific icon sets (ICO, ICNS, PNG)
• Build menu templates with submenus and separators
• Handle click events (single, double, right-click)
• Implement tooltip and balloon notifications
• Support dynamic menu updates
• Handle tray icon state changes (normal, active, highlighted)
• Generate TypeScript types for menu items

Input Schema

{
  "type": "object",
  "properties": {
    "projectPath": {
      "type": "string",
      "description": "Path to the Electron project root"
    },
    "menuStructure": {
      "type": "array",
      "description": "Menu item definitions",
      "items": {
        "type": "object",
        "properties": {
          "label": { "type": "string" },
          "type": { "enum": ["normal",     
              
              
              
                
              
        
      
    
     
       
       
            
            
            
      
    
     
       
       
              
      
    
     
       
            
    
  
    

Output Schema

{
  "type": "object",
  "properties": {
    "success": { "type": "boolean" },
    "files": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "path": { "type": "string" },
          "description": { "type": "string" }
        }
      }
    },
    "iconRequirements": {
      "type": "object"
       
    
             
  
   

Platform Considerations

Windows

• Icon format: ICO (16x16, 32x32, 48x48, 256x256)
• Supports balloon notifications
• Double-click shows main window (convention)
• Tray icon persists in system tray

macOS

• Icon format: PNG (16x16, 32x32 @1x and @2x)
• Must be template images for dark/light mode
• Uses Menu Bar (not system tray)
• pressedImage for clicked state
• No balloon notifications (use Notification Center)

Linux

• Icon format: PNG (various sizes)
• Behavior varies by desktop environment
• AppIndicator support recommended
• May require libappindicator

Generated Code Example

// tray-manager.js
const { app, Tray, Menu, nativeImage } = require('electron');
const path = require('path');

class TrayManager {
  constructor(mainWindow) {
    this.mainWindow = mainWindow;
    this.tray = null;
  }

  create() {
    const iconPath = this.getIconPath();
    this.tray = new Tray(iconPath);

    this.tray.setToolTip('My Application');
    this.tray.setContextMenu(this.buildMenu());

    // Platform-specific behavior
    if (process.platform === 'win32') {
      this.tray.on('double-click', () => this.showWindow());
    } else if (process.platform === ) {
      ..(,  .());
    }
  }

  () {
     iconName = process. === 
      ? 
      : process. === 
        ?   
        : ;
     path.(__dirname, , iconName);
  }

  () {
     template = [
      {
        : ,
        :  .()
      },
      { :  },
      {
        : ,
        : [
          { : , : , :  },
          { : , :  },
          { : , :  }
        ]
      },
      { :  },
      {
        : ,
        : process. ===  ?  : ,
        :  app.()
      }
    ];

     .(template);
  }

  () {
     (.) {
      ..();
      ..();
    }
  }

  () {
     (..()) {
      ..();
    }  {
      .();
    }
  }

  () {
    ..(.(newTemplate));
  }

  () {
    ..(iconPath);
  }

  () {
     (.) {
      ..();
      . = ;
    }
  }
}

. = ;

Icon Requirements

Template Images (macOS)

// For macOS dark/light mode support
const icon = nativeImage.createFromPath('trayTemplate.png');
icon.setTemplateImage(true);

Multi-Resolution Icons

assets/icons/
├── tray.ico           # Windows (multi-resolution)
├── trayTemplate.png   # macOS @1x (16x16 or 22x22)
├── [e-mail] # macOS @2x
├── tray.png           # Linux (24x24 or 22x22)
└── tray-active.png    # State variant

Best Practices

1. Use template images on macOS: Automatically adapts to dark/light mode
2. Provide multiple resolutions: Support high DPI displays
3. Handle tray destruction: Clean up on app quit
4. Minimize tray updates: Batch menu updates to avoid flicker
5. Follow platform conventions: Double-click on Windows, single-click on macOS
6. Test on all platforms: Behavior varies significantly

Related Skills

• electron-builder-config - Include tray icons in build
• native-notification-builder - Notifications from tray
• appkit-menu-bar-builder - macOS native menu bar apps

Related Agents

• electron-architect - Architecture guidance
• platform-convention-advisor - Platform UI conventions