前端设计
- 作者仓库星标 0
- 作者更新于 实时读取
- 作者仓库 skills-registry
- 领域
- AI 智能
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @tomevault-io · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 需简单配置
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- macOS · Linux · Windows
- 底层运行要求
- Node.js · Python >=3.9
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 允许外网请求
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
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 输出预览
## PART A: 任务判断
- 适用问题：提示词、Agent 工作流、模型评估或自动化推理。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“Architecture Overview / Quick Start / Start Frontend Dev Server”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于提示词、Agent 工作流、模型评估或自动化推理，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“Architecture Overview / Quick Start / Start Frontend Dev Server”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、会按任务需要访问外部网络、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件；会按任务需要访问外部网络；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。 先确认触发方式
原文出现了 `/api`、`/dev` 这类斜杠命令；如果你的 Agent 支持命令触发，优先用命令开场，再补充目标和边界。
给清楚输入和边界
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件。
小样例验证后再放大
先用一个小任务确认它会围绕“Architecture Overview / Quick Start / Start Frontend Dev Server”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
复核后再交付
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
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
## 什么时候使用
- 把 AI / Agent方向的常用动作沉淀成 Agent 可调用的技能 适合处理AI Agent、提示词、模型评估与自动化推理，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查…
- 面向提示词、Agent 工作流、模型评估或自动化推理，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「Architecture Overview / Quick Start / Start Frontend Dev Server」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；会按任务需要访问外部网络；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。 证据边界与执行链路
作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "hermes-web-ui-startup" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> Architecture Overview / Quick Start / Start Frontend Dev Server
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> Node.js / Python | 读取文件、写入/修改文件 | 会按任务需要访问外部网络
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}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 viteAccess at: http://localhost:5173
Start Backend Dashboard
cd ~/.hermes
hermes dashboard
# or directly: python3 -m hermes_cli.web_server --port 9119Access 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-openIssue 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 viteIssue 3: Backend Connection Warnings
Symptom: Browser console shows warnings about dashboard unreachable:
[hermes] Dashboard at http://127.0.0.1:9119 unreachableFix: Start the backend separately or ignore if you only need UI preview:
# In separate terminal
cd ~/.hermes && hermes dashboardIssue 4: Dependencies Not Installed
Symptom: npm run dev fails immediately
Fix:
cd ~/.hermes/hermes-agent/web
npm install
npm run sync-assetsVerification Steps
Check frontend running:
curl -s http://localhost:5173 | head -5 # Should return HTML doctypeCheck backend running:
curl -s http://localhost:9119/health # Should return OK or JSON statusCheck 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 tohermes_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.
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核