hermesbuttons

Drop-in "Run on Hermes" and "Run on Hermes Skills" buttons for any website or framework. Built as framework-agnostic Web Components with zero dependencies.

Hermes button (<hermes-button>) copies a full CLI invocation using hermes -p "..." so users can paste into a terminal. Hermes skill button (<hermes-skill-button>) guides skill installation and ties into Hermes Agent workflows with persistent memory.

Install

npm install hermesbuttons

Or use the CDN (no build step):

<script src="https://unpkg.com/hermesbuttons"></script>

Quick Start

<hermes-button command="/research deep-dive on React Server Components" theme="branded"></hermes-button>
<hermes-skill-button
  command="/competitive-analysis"
  skill-url="https://example.com/skills/competitive-analysis.zip"
></hermes-skill-button>

Framework Integration

Vanilla HTML / CDN

<script src="https://unpkg.com/hermesbuttons"></script>

<hermes-button command="/weekly-standup" theme="branded"></hermes-button>
<hermes-skill-button command="/draft-blog-post" theme="dark"></hermes-skill-button>

<script>
  document.querySelector('hermes-button')
    .addEventListener('hb-copy', (e) => console.log('Copied:', e.detail.command));
</script>

React / Next.js

Use the dedicated React wrappers (handles SSR, hydration, and prop forwarding):

import { HermesButton, HermesSkillButton } from 'hermesbuttons/react';

function App() {
  return (
    <>
      <HermesButton
        command="/research deep-dive on React Server Components"
        theme="branded"
        onCopy={(cmd) => console.log('Copied:', cmd)}
        onHbCopy={(e) => console.log('Event:', e.detail.command)}
      />
      <HermesSkillButton
        command="/competitive-analysis"
        skillUrl="https://example.com/skills/competitive-analysis.zip"
        theme="dark"
      />
    </>
  );
}

The React wrapper:

• Includes 'use client' for Next.js App Router
• Handles SSR/hydration with suppressHydrationWarning
• Lazy-loads the Web Components to avoid SSR crashes
• Forwards both property callbacks (onCopy, onDownload) and CustomEvent listeners (onHbCopy, onHbDownload, etc.)

Vue / Nuxt

Option A: Vue Plugin (recommended)

// main.ts
import { createApp } from 'vue';
import { HermesButtonsPlugin } from 'hermesbuttons/vue';
import App from './App.vue';

const app = createApp(App);
app.use(HermesButtonsPlugin); // auto-configures isCustomElement
app.mount('#app');

<template>
  <hermes-button
    command="/weekly-standup"
    theme="branded"
    @hb-copy="onCopy"
  />
  <hermes-skill-button
    command="/draft-blog-post"
    theme="dark"
    @hb-download="onDownload"
  />
</template>

<script setup>
function onCopy(e) {
  console.log('Copied:', e.detail.command);
}
function onDownload(e) {
  console.log('Downloaded:', e.detail.url);
}
</script>

Option B: Manual setup

// vite.config.ts
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            ['hermes-button', 'hermes-skill-button', 'hermes-popup-dialog'].includes(tag),
        },
      },
    }),
  ],
};

<script setup>
import 'hermesbuttons';
</script>

<template>
  <hermes-button command="/weekly-standup" theme="branded" @hb-copy="onCopy" />
</template>

Svelte / SvelteKit

<script>
  import 'hermesbuttons';

  function handleCopy(e) {
    console.log('Copied:', e.detail.command);
  }
</script>

<hermes-button
  command="/research deep-dive on React Server Components"
  theme="branded"
  on:hb-copy={handleCopy}
/>
<hermes-skill-button command="/competitive-analysis" theme="dark" />

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import 'hermesbuttons';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule {}

<!-- component.html -->
<hermes-button
  command="/weekly-standup"
  theme="branded"
  (hb-copy)="onCopy($event)"
></hermes-button>

<hermes-skill-button
  command="/draft-blog-post"
  skill-url="https://example.com/skills/draft-blog.zip"
  theme="dark"
  (hb-download)="onDownload($event)"
></hermes-skill-button>

Solid

import 'hermesbuttons';

function App() {
  return (
    <>
      <hermes-button
        command="/research deep-dive on React Server Components"
        theme="branded"
        on:hb-copy={(e) => console.log(e.detail.command)}
      />
      <hermes-skill-button command="/competitive-analysis" theme="dark" />
    </>
  );
}

Astro

---
---
<script>
  import 'hermesbuttons';
</script>

<hermes-button command="/weekly-standup" theme="branded" />
<hermes-skill-button command="/draft-blog-post" theme="dark" />

<script>
  document.querySelector('hermes-button')
    ?.addEventListener('hb-copy', (e) => console.log(e.detail.command));
</script>

Programmatic JavaScript API

import { createHermesButton, createHermesSkillButton } from 'hermesbuttons';

const btn = createHermesButton({
  command: '/competitive-analysis',
  theme: 'branded',
  onCopy: (cmd) => console.log('Copied:', cmd),
});

document.getElementById('container').appendChild(btn);

When using the global build:

const btn = HermesButtons.createHermesButton({ command: '/weekly-standup', theme: 'branded' });
document.body.appendChild(btn);

Themes

| Theme | Description | |-------|-------------| | branded | Electric blue primary (#2B8CFF), white text (default) — Hermes Agent marketing palette | | branded-alt | Periwinkle (#8FA3E8), white text — pairs with branded | | dark | Navy-wash dark surface, light text, blue accents | | light | White / slate surfaces, blue accents | | system | Auto-switches between light/dark based on prefers-color-scheme |

Sizes

| Size | Height | |------|--------| | sm | 2rem (32px at default font size) | | md | 2.5rem (40px) (default) | | lg | 3rem (48px) |

Sizes use rem units and scale with the user's browser font preferences.

Events

All buttons dispatch native CustomEvents with bubbles: true and composed: true (crosses Shadow DOM).

| Event | Detail | Fired when | |-------|--------|------------| | hb-copy | { command: string } | Command copied to clipboard | | hb-open | { command: string } | Button clicked / popup opens | | hb-close | — | Popup closed | | hb-download | { url: string } | Skill package downloaded (Hermes skill button only) |

el.addEventListener('hb-copy', (e) => {
  console.log('Copied:', e.detail.command);
});

API Reference

<hermes-button> Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | command | string | — | The prompt/command to run | | theme | 'branded' \| 'branded-alt' \| 'dark' \| 'light' \| 'system' | 'branded' | Theme variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | variant | 'filled' \| 'outline' \| 'ghost' | 'filled' | Visual style | | shape | 'rounded' \| 'pill' \| 'square' | 'rounded' | Border radius | | popup | 'true' \| 'false' | 'true' | Show popup dialog on click | | prompt-flag | 'true' \| 'false' | 'true' | Prepend hermes -p to the command | | popup-title | string | 'Run on Hermes' | Custom popup title | | popup-description | string | — | Custom popup description |

<hermes-skill-button> Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | command | string | — | The slash command to run | | skill-url | string | — | URL to downloadable skill package | | theme | 'branded' \| 'branded-alt' \| 'dark' \| 'light' \| 'system' | 'branded' | Theme variant | | size | 'sm' \| 'md' \| 'lg' | 'md' | Button size | | variant | 'filled' \| 'outline' \| 'ghost' | 'filled' | Visual style | | shape | 'rounded' \| 'pill' \| 'square' | 'rounded' | Border radius | | popup | 'true' \| 'false' | 'true' | Show popup dialog on click | | popup-title | string | 'Run on Hermes Skills' | Custom popup title | | popup-description | string | — | Custom popup description |

JavaScript Exports

// Web Components + factories
import {
  HermesButton,           // Web Component class
  HermesSkillButton,      // Web Component class
  createHermesButton,     // Factory function
  createHermesSkillButton,// Factory function
  showPopup,              // Show popup programmatically
  register,               // Manually register all custom elements
  registerHermesButton,   // Register only hermes-button
  registerHermesSkillButton, // Register only hermes-skill-button
} from 'hermesbuttons';

// React wrappers (SSR-safe, includes 'use client')
import { HermesButton, HermesSkillButton } from 'hermesbuttons/react';

// Vue plugin
import { HermesButtonsPlugin } from 'hermesbuttons/vue';

// Raw SVG icons + theme tokens
import { HERMES_ICON, HERMES_SKILL_ICON, BRAND_COLOR, ALT_BRAND_COLOR } from 'hermesbuttons';

Explicit Registration

Registration happens automatically on import. For frameworks that need timing control:

import { register } from 'hermesbuttons';

// Call when you're ready to register the custom elements
register();

Or register individually with custom tag names:

import { registerHermesButton, registerHermesSkillButton } from 'hermesbuttons';

registerHermesButton('my-hermes-btn');
registerHermesSkillButton('my-hermes-skill-btn');

Browser Support

Works in all browsers that support Custom Elements v1:

• Chrome 67+
• Firefox 63+
• Safari 10.1+
• Edge 79+

License

MIT