Agent Skills › NicholasFlemmer/styx-app › port-screen

port-screen

GitHub

将原型屏幕像素级移植到桌面应用，通过定位、映射UI组件、实现数据与状态、运行视觉差异测试，确保高保真度与设计规范一致。

.claude/skills/port-screen/SKILL.md NicholasFlemmer/styx-app

Trigger Scenarios

需要将设计稿或原型转换为前端代码执行屏幕像素级移植任务

Install

npx skills add NicholasFlemmer/styx-app --skill port-screen -g -y

More Options

Non-standard path

npx skills add https://github.com/NicholasFlemmer/styx-app/tree/main/.claude/skills/port-screen -g -y

Use without installing

npx skills use NicholasFlemmer/styx-app@port-screen

指定 Agent (Claude Code)

npx skills add NicholasFlemmer/styx-app --skill port-screen -a claude-code -g -y

安装 repo 全部 skill

npx skills add NicholasFlemmer/styx-app --all -g -y

预览 repo 内 skill

npx skills add NicholasFlemmer/styx-app --list

SKILL.md

Frontmatter

{
    "name": "port-screen",
    "description": "Port one prototype screen from Styx.dc.html into apps\/desktop\/src\/renderer\/screens with pixel fidelity. Locates the artboard by data-screen-label, extracts inline-style recipes, maps them to @styx\/ui components, implements over fixture data, runs the visual diff.",
    "allowed-tools": "Read, Grep, Glob, Edit, Write, Bash(pnpm:*), Bash(sed:*), Bash(grep:*), Bash(awk:*), Bash(python3:*)",
    "argument-hint": "<Workspace|Home|Agents|Repo|Approvals|Diff review|Settings|Onboarding>"
}

Port a screen: $ARGUMENTS

Locate: grep -n 'data-screen-label="$0"' design/handoff/Styx.dc.html; slice to the next label. Note which second-strip toggles affect it (empty, error, toast, popout, audit…).
Inventory: list every element top-to-bottom with its inline recipe (font, size, colour var, padding, borders, data-inv/data-on, style-hover). Keep it in a scratch note; do not commit it.
Map each element to an existing @styx/ui component + variant (spec §8 via /spec-lookup 8). Missing component → stop and run /ui-component first. Never inline a one-off.
Data: list the selectors needed (packages/core/src/selectors); add missing ones with tests. Screens read via useModel/useUi hooks and send commands.*; no fetching in components.
Implement screens/<Screen>/<Screen>.tsx + .module.css using layout vars (--w-*, --h-*). Copy strings from @styx/core/copy.
Keyboard: register screen shortcuts in keys/bindings.ts (spec §6); Esc via the overlay stack.
States: implement every state the strip shows, driven by fixture variants (STYX_FIXTURE=<name>), not toggles.
Verify: pnpm typecheck && pnpm test -F @styx/desktop, then /visual-diff $0 for dark+light × mac+win. Iterate until under threshold.
Run the design-fidelity-reviewer subagent; fix findings.

Checklist: every element mapped to a §8 component · no raw hex · all --w-* widths used · copy verbatim · a11y per §9 (live regions, focus order, hit targets) · 4 visual variants pass · fixture states covered.