skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

hermes-desktop-plugins

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

1|Updated Aug 11, 2026
Search Tags:#React#javascript#ui extension#esm#hermes#plugin sdk#desktop plugins
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill hermes-desktop-plugins-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hermes-desktop-plugins
Source: https://github.com/Chia1104/agent-air/tree/main/skills/hermes/hermes-desktop-plugins
Command: npx skills add https://github.com/Chia1104/agent-air --skill hermes-desktop-plugins-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Extending the Hermes desktop app with custom UI normally requires modifying the app source and rebuilding it. 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: Register panes with placement or dock hints, statusbar chips, palette commands, keybinds, sidebar navigation rows, and full routed pages via ctx.register. - Data and State Access: Query the gateway over JSON-RPC with host.request, subscribe to live events with host.onEvent, and use the app's shared React Query client plus reactive atoms for state. - Optional Python Backend: Pair the plugin with a 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 session data docked below the conversation. Start from the template, register a pane with dock: { pane: 'workspace', pos: 'bottom' }, save the file, and the app hot-reloads it into place. ## Quick Start Ask the agent to create a new 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 Hermes desktop plugin?▼

Create a folder under $HERMES_HOME/desktop-plugins/ named after your plugin id and place a plugin.js file inside, 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?▼

Register contributions with ctx.register using areas like 'panes' for layout zones or 'statusBar.right' for chips. Panes accept a placement hint or a dock gesture targeting a specific pane edge, and users can drag them anywhere afterwards.

Can I use JSX syntax in Hermes desktop plugins?▼

No, JSX syntax will not parse because the plugin file loads uncompiled as plain ESM. Use jsx() calls from react/jsx-runtime instead, and import only @hermes/plugin-sdk, react, and react/jsx-runtime since other specifiers fail to resolve.

Does a Hermes desktop plugin support a Python backend?▼

Yes, a plugin can ship a plugin_api.py under ~/.hermes/plugins/<id>/dashboard/ with a manifest api entry, reachable via ctx.rest and ctx.socket scoped to /api/plugins/<id>. Note that ctx.socket is a no-op on OAuth remotes, so keep a polling fallback.

Why does my Hermes desktop plugin fail to load?▼

Loading failures surface as an error toast naming the problem. Common causes are referencing a component you forgot to import, using JSX syntax instead of jsx() calls, or importing modules other than the three allowed specifiers.

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

Use the app's importable UI components like Button, Dialog, and Tooltip, and style with theme variables such as 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
Wakewell-Sleep-SolutionsWakewell-Sleep-Solutions

skill-creator

Automate the end-to-end workflow of defining, evaluating, and improving Claude skills.

Official
Advanced
IceHeartGitHIceHeartGitH
1

hermes-desktop-plugins

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

Community
Advanced
patty-chowpatty-chow

hermes-desktop-plugins

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

Community
Intermediate