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

tui-widgets

Create live ambient and modal widget apps for the Hermes TUI dock.

1|Updated Aug 11, 2026
Search Tags:#slash commands#dashboard#TUI#terminal UI#widgets#esm#hermes
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill tui-widgets-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tui-widgets
Source: https://github.com/Chia1104/agent-air/tree/main/skills/hermes/productivity/tui-widgets
Command: npx skills add https://github.com/Chia1104/agent-air --skill tui-widgets-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building custom live panels or interactive tools inside the Hermes terminal UI normally requires touching the TUI source code; this Skill lets you author hot-reloadable widget apps as plain ESM files with no build step or repo changes. ## Core Features & Use Cases - Ambient dock widgets: Render glanceable cards (tickers, clocks, countdowns, API readouts) in dock or rail zones that reserve real terminal space without covering the transcript. - Modal overlay tools: Build keyboard-driven pickers, calculators, and viewers bound to slash commands with reducer-based state handling. - Built-in chart primitives: Use sparkline, sparkRows, gauge, and hbars string builders plus Shimmer loaders and Accordion sections for dashboard-style panels. - Use Case: A user wants a live API latency monitor above the status bar; the Skill writes ~/.hermes/tui-widgets/latency.mjs with a rolling sparkRows chart, and /latency toggles it after hot-load. ## Quick Start Ask the agent to create a Hermes TUI widget, for example: write a live clock widget for the Hermes TUI dock using the clock template and reload it with /widgets-reload.

Frequently Asked Questions about tui-widgets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a widget for the Hermes TUI?▼

Write an ESM file to ~/.hermes/tui-widgets/<name>.mjs that default-exports a register(sdk) function calling defineWidgetApp with id, mode, init, reduce, and render. The TUI hot-loads it within about a second, and the widget id becomes its slash command automatically.

What is the difference between ambient and modal widget modes?▼

Ambient widgets capture no input, render a card (usually Dialog) docked in a zone, and toggle via their slash command. Modal widgets own every keypress, wrap content in Overlay, and close when reduce returns null, such as on Esc or q.

Can I use JSX or npm imports in Hermes TUI widget files?▼

No. Widget .mjs files cannot use JSX or bare imports; everything comes from the sdk parameter. Build elements with h(...) (createElement) and use the provided components like Box, Text, Dialog, and Overlay.

Why is my Hermes TUI widget not appearing after reload?▼

A thrown register() is logged and skipped, so check ~/.hermes/logs/tui_gateway_crash.log for errors. Also run /widgets-reload and confirm the transcript lists your file under loaded: before launching /<id>.

How do I fetch async API data in a TUI widget?▼

Fire the fetch from init and land results with sdk.updateWidget(app, fn), which no-ops if the widget was closed so late replies never resurrect it. Fetch failures must land as an error phase, never a crash.

Where can Hermes TUI widgets be placed on screen?▼

Widgets use zones that reserve real space: dock-top or dock-bottom chrome rows, or side rails top-left, top-right, bottom-left, bottom-right beside the transcript. Rails need a width matching the card; nothing ever paints over the transcript.

Related Skills

Explore More Software Engineering Skills→
dfpalhanodfpalhano

glance

Create and configure AI-generated dashboard widgets via natural language descriptions.

Community
Advanced
KenticoKentico
14

widget-create-implementation

Generate Xperience by Kentico widget implementations from an instructions file.

Official
Intermediate
VeryGoodOpenSourceVeryGoodOpenSource
162

material-theming

Centralizes Flutter colors, typography, component styles, and spacing in Material 3 ThemeData.

Official
Intermediate
joshsmithxrmjoshsmithxrm
5

tui-verify

Automate end-to-end PPDS TUI verification via PTY keystrokes and output assertions.

Community
Intermediate