Agent Skills › sthamann/nyx-local-ai › nyx-ui-screenshots

nyx-ui-screenshots

GitHub

用于从浏览器环境重新生成 nyx-local-ai 项目的 README UI 截图。流程包括构建 Webview、启动本地服务、通过 IDE 捕获特定场景画面，并进行中心裁剪和审查，确保文档图片与最新 UI 一致。

.cursor/skills/nyx-ui-screenshots/SKILL.md sthamann/nyx-local-ai

Trigger Scenarios

UI 发生可见变更时用户要求更新截图时发布包含 UI 更改的版本前

Install

npx skills add sthamann/nyx-local-ai --skill nyx-ui-screenshots -g -y

More Options

Use without installing

npx skills use sthamann/nyx-local-ai@nyx-ui-screenshots

指定 Agent (Claude Code)

npx skills add sthamann/nyx-local-ai --skill nyx-ui-screenshots -a claude-code -g -y

安装 repo 全部 skill

npx skills add sthamann/nyx-local-ai --all -g -y

预览 repo 内 skill

npx skills add sthamann/nyx-local-ai --list

SKILL.md

Frontmatter

{
    "name": "nyx-ui-screenshots",
    "description": "Regenerate the README UI screenshots for nyx-local-ai from the browser harness — build the webview, serve the harness scenes, capture and crop the images into docs\/. Use when the UI changed visibly, when the user asks to update screenshots, or before a release with UI changes."
}

Regenerating the UI screenshots

The README images in docs/ are captured from .harness/index.html, which renders the real webview bundle (media/main.js + main.css) with scripted demo data inside a 430px sidebar frame.

Workflow

Build the current bundle: npm run build
Serve the repo (background): python3 -m http.server 8321 --bind 127.0.0.1
Capture each scene with the IDE browser at http://127.0.0.1:8321/.harness/index.html?scene=<scene>; wait until the page title reads nyx-scene-<scene>-ready, then take a screenshot.

Scene	Target file	Shows
`chat`	`docs/nyx-agent-run.png`	tool cards, diff card, answer, 1M context meter
`approval`	`docs/nyx-approval.png`	diff-preview approval, Always allow, queue
`machines`	`docs/nyx-machines.png`	machine manager (DGX / Mac Studio)

Center-crop each capture to the frame (screenshots are centered):

sips -c 1839 1062 docs/<file>.png --out docs/<file>.png

(Values assume the default 714×1024 CSS viewport at ~2.22× scale — if the frame looks cut off, recompute: crop ≈ (430+68)×(780+68) CSS px × scale.)

Review the images (read the files) before committing: no debug text, context meter plausible, no real secrets/IPs you don't want public.

Editing the scenes

Demo data lives in .harness/index.html (sceneChat, sceneApproval, sceneMachines) — plain HostToWebview messages. When new UI features ship, extend the relevant scene so the screenshots keep showcasing them.