skills.rest
IceHeartGitH
IceHeartGitHCOMMUNITY
Explore all skills by this author →
GitHub

hermes-desktop-plugins

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

1|Updated Jul 22, 2026
Search Tags:#React#javascript#ui extension#esm#hermes#plugin sdk#desktop plugins
One-click install
npx skills add https://github.com/IceHeartGitH/Hermes-Agent-Android-Termux --skill hermes-desktop-plugins-iceheartgith
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hermes-desktop-plugins
Source: https://github.com/IceHeartGitH/Hermes-Agent-Android-Termux/tree/main/custom-skills/hermes-desktop-plugins
Command: npx skills add https://github.com/IceHeartGitH/Hermes-Agent-Android-Termux --skill hermes-desktop-plugins-iceheartgith

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 statusbar widgets, layout panes, command-palette commands, keybinds, routes, and themes as single plain-JavaScript files loaded at runtime with no build step. ## Core Features & Use Cases - Runtime Plugin Loading: Drop a plugin.js file into $HERMES_HOME/desktop-plugins/<id>/ and the app hot-reloads it on every save, with error toasts naming any failure. - Full UI Surface: Register panes with placement and docking hints, statusbar chips, palette commands, keybinds, full pages via routes, and sidebar navigation rows using the app's own design system components. - Data and Backend Integration: Query the gateway via JSON-RPC, subscribe to live events, use the shared React Query client, persist plugin-scoped storage, ship your own i18n bundles, and optionally call a Python backend through ctx.rest/ctx.socket. - Use Case: Build a dashboard pane that displays live gateway session data, docks below the conversation view, and adds a command-palette entry to navigate to a custom full-page route. ## Quick Start Create a new Hermes desktop plugin from the template that adds a statusbar chip and a right-side pane showing the current gateway state.

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 plugin for the Hermes desktop app?▼

Create a folder under $HERMES_HOME/desktop-plugins/ matching your plugin id and place a plugin.js file inside it based on the provided template. The app watches the directory and hot-reloads the plugin within seconds of saving, with no build step required.

How to add a custom pane to the Hermes desktop layout?▼

Register area 'panes' with a render function and a data object containing a placement hint like left, right, bottom, or main. Add a dock object with a target pane id and position to land on a specific edge, and declare a width or height to control sizing.

What imports are allowed in Hermes desktop plugins?▼

Only @hermes/plugin-sdk, react, and react/jsx-runtime resolve in plugin files; any other import specifier fails. UI must be written with jsx() calls rather than JSX syntax because the file loads uncompiled.

Can a desktop plugin have a Python backend?▼

Yes, a plugin can ship a plugin_api.py file under ~/.hermes-venv/plugins/<id>/dashboard/ with a manifest declaring the api entry. The frontend reaches it through ctx.rest and ctx.socket, both scoped to /api/plugins/<id>, though ctx.socket is a no-op on OAuth remotes.

Why does my Hermes plugin fail to load with a ReferenceError?▼

A ReferenceError at render usually means a component like StatusDot was used in a jsx() call but never imported from @hermes/plugin-sdk. Check that every identifier in your render code appears in the import line, fix the file, and save to hot-reload.

How do I style Hermes plugin UI to match the app?▼

Use the app's importable design system components such as Button, Dialog, Tabs, and Tooltip, and style with theme variables like var(--ui-accent) instead of hardcoded colors. For canvas drawing, resolve theme variables once with getComputedStyle.

Related Skills

Explore More Software Engineering Skills→
adikpbadikpb
1

hermes-desktop

Create Hermes skins and desktop plugins that theme surfaces and add UI panes.

Community
Intermediate
basicmachines-cobasicmachines-co
4.0k

cmux

Control cmux windows, workspaces, panes, and surfaces via CLI commands.

Official
Intermediate
zenbuappszenbuapps

wp-rest-api

Register WordPress REST routes with controllers and JSON Schema validation.

Official
Advanced
xiaoshan1234xiaoshan1234

hermes-desktop-plugins

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

Community
Intermediate