skills.rest
patty-chow
patty-chowCOMMUNITY
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.

Updated May 28, 2026
Search Tags:#react#javascript#ui extension#esm#hermes#plugin sdk#desktop plugin
One-click install
npx skills add https://github.com/patty-chow/the-stable --skill hermes-desktop-plugins-patty-chow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hermes-desktop-plugins
Source: https://github.com/patty-chow/the-stable/tree/main/skills/hermes-desktop-plugins
Command: npx skills add https://github.com/patty-chow/the-stable --skill hermes-desktop-plugins-patty-chow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Extending the Hermes desktop app with new UI elements normally requires modifying the application source code. This Skill lets you add statusbar widgets, layout panes, command-palette commands, keybinds, routes, and themes as single plain-JavaScript ESM files that the app loads and hot-reloads at runtime, with no build step. ## Core Features & Use Cases - UI Contributions Without App Changes: Register panes, statusbar chips, palette commands, keybinds, sidebar navigation rows, and full routed pages through the @hermes/plugin-sdk API. - Live Data Integration: Query the gateway via host.request, subscribe to events with host.onEvent, and use the app's shared React Query client for caching and refetching. - Optional Python Backend: Pair the plugin with a Python plugin_api.py backend reachable through ctx.rest and ctx.socket, scoped to /api/plugins/<id>. - Use Case: You want a dashboard pane showing live gateway session data below the conversation. Create ~/.hermes/desktop-plugins/session-stats/plugin.js from the template, register a pane with dock: { pane: 'workspace', pos: 'bottom' }, and the app hot-reloads it into place. ## Quick Start Create a new Hermes desktop plugin named my-plugin that adds a statusbar chip and a right-side pane using the provided template.

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

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

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

Call ctx.register with area 'panes' for layout panes or 'statusBar.right'/'statusBar.left' for chips, providing a render function. Panes accept a placement hint ('left', 'right', 'bottom', 'main') or a dock target to land on a specific edge of an existing pane.

Can Hermes desktop plugins use JSX syntax?▼

No, plugin files load uncompiled, so JSX syntax will not parse. Write UI with jsx() calls imported from react/jsx-runtime, and only import from @hermes/plugin-sdk, react, and react/jsx-runtime since other specifiers fail to resolve.

Can a desktop plugin have a Python backend?▼

Yes, if the plugin ships a plugin_api.py under ~/.hermes/plugins/<id>/dashboard/ with manifest "api": "plugin_api.py", the frontend reaches it via ctx.rest and ctx.socket scoped to /api/plugins/<id>. Note ctx.socket is a no-op on OAuth remotes, so keep a polling fallback.

Why does my Hermes plugin fail to load?▼

Common causes are JSX syntax, imports outside the three allowed specifiers, or referencing a component you forgot to import, which throws a ReferenceError at render. The app shows an error toast naming the failure; fix the file and save to hot-reload.

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
rrbandarrbanda

applicationinsights-web-ts

Instrument browser telemetry for web apps using the Application Insights JavaScript SDK.

Community
Advanced
adikpbadikpb
1

hermes-opencode-plugin

Develop, verify, and debug the Hermes-to-opencode bridge plugin against a live opencode server.

Community
Advanced
xiaoshan1234xiaoshan1234

hermes-desktop-plugins

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

Community
Intermediate