hermes-web-ui-startup

Name: hermes-web-ui-startup
Author: tomevault-io

AI Community

Repo stars 0
Author updated Live
Author repo skills-registry

Fluxly profile Facts only: domain, agents, trust score, runtime, permissions and network

Domain: AI
Compatible agents: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
Trust score: 88 / 100 · community maintained
Author / version / license: @tomevault-io · no license declared
Token usage: Lean
Setup complexity: Guided setup
External API key: Not required
Operating systems: macOS · Linux · Windows
Runtime requirements: Node.js · Python >=3.9
Permissions: Read-only
Write / modify
Network behavior: External requests
Install commands: 26 variants

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview hermes-web-ui-startup.preview

---
name: hermes-web-ui-startup
description: Start and troubleshoot the Hermes Agent Web UI (Vite + React frontend with Python backend) Use w…
category: ai
runtime: Node.js / Python
---

# hermes-web-ui-startup output preview

## PART A: Task fit
- Use case: Start and troubleshoot the Hermes Agent Web UI (Vite + React frontend with Python backend) Use when this capability is needed. Hermes Web UI consists of two components: Frontend proxies /api/* requests to the backend. makes outbound network calls; runs on Node.js. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Architecture Overview / Quick Start / Start Frontend Dev Server” and do not present inference as author intent.

## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Start and troubleshoot the Hermes Agent Web UI (Vite + React frontend with Python backend) Use when this capability is needed. Hermes Web UI consists of two components: Frontend proxies /api/* requests to the backend. makes outbound network calls; runs on Node.js. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “Architecture Overview / Quick Start / Start Frontend Dev Server” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; may access external network resources; usually needs no extra API key.

## Running Rules
- read files, write/modify files; may access external network resources; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.

SKILL.md SKILL.md

---
name: hermes-web-ui-startup
description: Start and troubleshoot the Hermes Agent Web UI (Vite + React frontend with Python backend) Use w…
category: ai
source: tomevault-io/skills-registry
---

# hermes-web-ui-startup

## When to use
- Start and troubleshoot the Hermes Agent Web UI (Vite + React frontend with Python backend) Use when this capability is…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.

## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.

## Execution rules
- Organize steps around “Architecture Overview / Quick Start / Start Frontend Dev Server” and keep inference separate from source facts.
- read files, write/modify files; may access external network resources; usually needs no extra API key.
- Validate with a small sample before expanding the task.

## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.

Evidence boundary and execution chain

The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.

skill "hermes-web-ui-startup" {
  input      -> user goal + target files + boundaries + acceptance criteria
  context    -> Architecture Overview / Quick Start / Start Frontend Dev Server
  rules      -> SKILL.md triggers / order / output contract
  runtime    -> Node.js / Python | read files, write/modify files | may access external network resources
  guardrails -> usually needs no extra API key + small-sample validation + diff/log review
  output     -> copyable result + checklist + next iteration
}

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Start and troubleshoot the Hermes Agent Web UI (Vite + React frontend with Python backend) Use when this capability is needed. H…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “Architecture Overview”, “Quick Start”, “Start Frontend Dev Server”, “Start Backend Dashboard”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name hermes-web-ui-startup directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “Architecture Overview / Quick Start / Start Frontend Dev Server” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Hermes Web UI Startup & Troubleshooting

Architecture Overview

Hermes Web UI consists of two components:

Frontend: Vite + React (hermes-agent/web/) - Port 5173
Backend: Python web server (hermes_cli/web_server.py) - Port 9119

Frontend proxies /api/* requests to the backend.

Quick Start

Start Frontend Dev Server

cd ~/.hermes/hermes-agent/web
npm run dev
# or directly: npx vite

Access at: http://localhost:5173

Start Backend Dashboard

cd ~/.hermes
hermes dashboard
# or directly: python3 -m hermes_cli.web_server --port 9119

Access at: http://localhost:9119

Common Issues & Fixes

Issue 1: TypeScript Build Errors

Symptom: npm run build fails with TS errors like:

src/components/ModelPickerDialog.tsx(285,22): error TS2552: Cannot find name 'loadProviders'

Fix: Skip TypeScript check and start dev server directly:

# TypeScript errors don't prevent dev server from running
npx vite --no-open

Issue 2: Python 3.9 Compatibility

Symptom: Backend fails with:

TypeError: unsupported operand type(s) for |: 'type' and 'NoneType'

Cause: Code uses Python 3.10+ type union syntax (Path | None)

Fix:

# Option 1: Upgrade to Python 3.10+
brew install python@3.10

# Option 2: Use frontend only (some features may not work)
# Frontend dev server still works standalone
npx vite

Issue 3: Backend Connection Warnings

Symptom: Browser console shows warnings about dashboard unreachable:

[hermes] Dashboard at http://127.0.0.1:9119 unreachable

Fix: Start the backend separately or ignore if you only need UI preview:

# In separate terminal
cd ~/.hermes && hermes dashboard

Issue 4: Dependencies Not Installed

Symptom: npm run dev fails immediately

Fix:

cd ~/.hermes/hermes-agent/web
npm install
npm run sync-assets

Verification Steps

Check frontend running:

curl -s http://localhost:5173 | head -5
# Should return HTML doctype

Check backend running:

curl -s http://localhost:9119/health
# Should return OK or JSON status

Check processes:

ps aux | grep -E "(vite|hermes.*dashboard)" | grep -v grep

Development vs Production

Development

Frontend: npm run dev (port 5173)
Backend: hermes dashboard (port 9119)
Hot reload enabled
CORS handled via Vite proxy

Production

Build frontend: npm run build (outputs to hermes_cli/web_dist/)
Backend serves static files directly
Single port (9119) for both UI and API

Troubleshooting Checklist

Node.js 20+ installed (node --version)
Python 3.10+ installed (python3 --version)
npm dependencies installed (cd web && npm install)
Assets synced (npm run sync-assets)
No other process using ports 5173 or 9119
Backend running before making API calls
Session token properly injected (handled by Vite plugin)

Background Process Management

When running in background:

# Start frontend in background
cd ~/.hermes/hermes-agent/web && npx vite --no-open &

# Verify startup (may take 2-3 seconds)
sleep 3 && curl -s http://localhost:5173 > /dev/null && echo "Frontend OK"

Source: 54laowang/hermes-agent — distributed by TomeVault.

Install command

One-click installPick a runner, click Copy, paste into your terminal, press enter

npx skills add tomevault-io/skills-registry/54laowang--hermes-agent--hermes-web-ui-startup -y

Open general install guide

View skill source

Works with

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

Security audit

88 / 100

Community

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

Metadata

Source: github
tomevault-io/skills-registry
中文

More by @tomevault-io

Category & tags

Category AI