skills.rest
xiaoshan1234
xiaoshan1234COMMUNITY
Explore all skills by this author →
GitHub

hermes-desktop-plugins

Write JavaScript ESM plugins that add UI panes, commands, and statusbar items to the Hermes desktop app.

Updated Apr 13, 2026
Search Tags:#javascript#esm#hot reload#hermes#plugin sdk#desktop plugins#ui panes
One-click install
npx skills add https://github.com/xiaoshan1234/ai-skill --skill hermes-desktop-plugins-xiaoshan1234
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hermes-desktop-plugins
Source: https://github.com/xiaoshan1234/ai-skill/tree/main/origin/hermes-desktop-plugins
Command: npx skills add https://github.com/xiaoshan1234/ai-skill --skill hermes-desktop-plugins-xiaoshan1234

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Extending the Hermes desktop app with custom UI elements normally requires modifying the app source code and rebuilding it. This Skill lets you add panes, statusbar widgets, commands, keybinds, routes, and themes as single plain-JavaScript plugin files that the app loads and hot-reloads at runtime, with no build step. ## Core Features & Use Cases - UI Contribution Points: Register layout panes with placement and docking hints, statusbar chips, command-palette commands, keybinds, sidebar navigation rows, and full-page routes via ctx.register. - Live App Integration: Read reactive host state (active session, gateway, model, viewport), call gateway JSON-RPC methods with host.request, and subscribe to live events with host.onEvent. - Native Look and Feel: Use the app's own design system components (Button, Dialog, Tabs, Tooltip, Codicon, and more) and theme variables so plugins match the built-in UI. - Use Case: You want a dashboard pane docked below the conversation that displays live gateway metrics. Create ~/.hermes/desktop-plugins/metrics/plugin.js from the template, register a pane with dock: { pane: 'workspace', pos: 'bottom' }, and the app hot-reloads it into place. ## Quick Start Ask the AI to create a Hermes desktop plugin from the template that adds a statusbar chip and a right-side pane, then reload desktop plugins from the command palette.

Frequently Asked Questions about hermes-desktop-plugins

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

FAQPage Schema
How do I create a desktop plugin for the Hermes app?▼

Create a folder under $HERMES_HOME/desktop-plugins/ whose name matches your plugin id, and place a plugin.js file inside it based on the provided template. The file default-exports an object with id, name, and a register(ctx) function; the app watches the directory and hot-reloads the file on every save.

How do I add a custom pane or statusbar widget to a desktop app?▼

Call ctx.register with area 'panes' and a placement hint ('left', 'right', 'bottom', or 'main') plus a render function for panes, or area 'statusBar.right'/'statusBar.left' for statusbar chips. Panes can also dock to a specific edge of an existing pane using a dock object with a target pane id and position.

Can I use JSX syntax or npm packages in Hermes desktop plugins?▼

No. The plugin file loads uncompiled, so JSX syntax will not parse; use jsx() calls imported from react/jsx-runtime instead. The only resolvable imports are @hermes/plugin-sdk, react, and react/jsx-runtime — any other specifier fails to load.

Why does my Hermes desktop plugin fail to load or render?▼

Common causes are referencing a component you forgot to import (a ReferenceError at render), using JSX syntax, or importing an unsupported module. The app shows an error toast naming the failure; fix the file and save again to hot-reload it.

Does this skill cover Hermes backend plugins?▼

No. Backend plugins live in ~/.hermes/plugins/, are written in Python, and are documented separately. This skill covers only desktop UI plugins written as plain-JavaScript ESM files loaded by the desktop app.

Related Skills

Explore More Software Engineering Skills→
ilove323ilove323

skills-customizer

Customize OpenClaw plugin templates and package them as .plugin files.

Community
Advanced
camoacamoa
32

plugin-creation

Guide creation of Claude Code plugins with scaffolding for skills, commands, agents, and hooks.

Community
Intermediate
moonlight-lupinmoonlight-lupin
15

claude-plugin-converter

Convert Claude Code plugins to Hermes plugins via two-phase analysis and generation.

Community
Advanced
mighty-hqmighty-hq

paperclip-create-plugin

Scaffold Paperclip plugin packages aligned to the alpha SDK/runtime.

Community
Intermediate