Agent Skills › ryantsai/KKTerm › dashboard-widget-builder

dashboard-widget-builder

GitHub

用于创建、修复和定制 KKTerm Dashboard 小部件。涵盖脚本编写、布局优化、数据获取及密钥管理，支持文件拖拽与本地读写，确保符合平台规范与视觉标准。

assistant-skills/dashboard-widget-builder/SKILL.md ryantsai/KKTerm

Trigger Scenarios

创建新的 Dashboard 小部件修复或重新设计现有小部件处理小部件的数据获取与错误状态配置小部件的密钥与安全设置

Install

npx skills add ryantsai/KKTerm --skill dashboard-widget-builder -g -y

More Options

Non-standard path

npx skills add https://github.com/ryantsai/KKTerm/tree/main/assistant-skills/dashboard-widget-builder -g -y

Use without installing

npx skills use ryantsai/KKTerm@dashboard-widget-builder

指定 Agent (Claude Code)

npx skills add ryantsai/KKTerm --skill dashboard-widget-builder -a claude-code -g -y

安装 repo 全部 skill

npx skills add ryantsai/KKTerm --all -g -y

预览 repo 内 skill

npx skills add ryantsai/KKTerm --list

SKILL.md

Frontmatter

{
    "name": "dashboard-widget-builder",
    "description": "Create, repair, redesign, and troubleshoot KKTerm Dashboard AI Created Widgets, script widgets, widget layout, visual polish, data fetching, secrets, and custom Dashboard views."
}

Dashboard Widget Builder

Use this skill when the user asks the AI Assistant to create, modify, fix, or improve a Dashboard widget or view.

Workflow

Treat the active Dashboard view as the target unless the user names a different view.
Use Dashboard tools instead of describing manual edits when tool access is available.
For new user-visible widgets, create a script widget directly with the dashboard widget creation workflow.
For broken widgets, load current Dashboard state first, inspect the existing AI Created Widget source, then patch the smallest necessary body fields.
Use real data when the user asks for live, current, or external information. Do not ship fake sample data unless the user explicitly asks for a mock.
If a widget needs an API key or token, define a secret settings field and request secret entry. Never ask for plaintext secrets in chat.
Keep widgets compact, readable, and object-like: meters, clocks, charts, maps, launchers, calculators, consoles, timelines, or focused tools.
Use KKTerm widget classes and runtime helpers before inventing a custom UI framework.
For canvases and visual libraries, size from the widget viewport and handle resize.

Visual Defaults

Prefer dense but calm desktop utility over marketing composition.
Avoid text-only widgets unless the user asked for text output.
Choose a non-default accent when it clarifies meaning.
Avoid inner scrollbars in the initial layout.
Use loading, error, empty, and refresh states when data can fail or change.

KKTerm Boundaries

All AI Created Widgets are script widgets.
Runtime CDN scripts are blocked; use curated local libraries when available.
Secret values are stored outside SQLite.
Generated widgets must fit inside their assigned Dashboard grid bounds.

File I/O

Use these KK bridge methods for any widget that reads or writes local files:

Drag-and-drop from Explorer: KK.onFileDrop(target, callback, options?) — attach to a drop-zone element. Callback receives (items, event) where each item is { kind, name, path, bytes?, children? }. Returns a cleanup function. Add a visual hoverClass via options.hoverClass (default 'is-drop-target').
File picker (read): KK.readLocalFile({ filters? }) — opens a native open dialog; resolves to { name, bytes, path } or null on cancel.
File picker (save): KK.saveFile(filename, bytes, filters?) — opens a native save dialog and writes bytes; resolves to the saved path or null on cancel.

Do not use raw dragover/drop DOM events for OS file drops — always go through KK.onFileDrop so the widget code follows the established bridge pattern.