Agent Skills › NicholasFlemmer/styx-app › spec-lookup

spec-lookup

GitHub

用于查询设计稿与原型规范，通过命令行脚本清洗HTML并提取文本，辅助开发实现UI、组件及逻辑规则。

.claude/skills/spec-lookup/SKILL.md NicholasFlemmer/styx-app

Trigger Scenarios

实现屏幕或组件前查询规范核对原型与设计稿差异

Install

npx skills add NicholasFlemmer/styx-app --skill spec-lookup -g -y

More Options

Non-standard path

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

Use without installing

npx skills use NicholasFlemmer/styx-app@spec-lookup

指定 Agent (Claude Code)

npx skills add NicholasFlemmer/styx-app --skill spec-lookup -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": "spec-lookup",
    "description": "Answer \"what does the spec\/prototype say about X\" by reading the Styx handoff HTML with tags stripped. Use before implementing any screen, component, copy, shortcut, or state rule.",
    "allowed-tools": "Bash(sed:*), Bash(grep:*), Bash(awk:*), Bash(head:*), Bash(python3:*), Read, Grep",
    "argument-hint": "<section number | topic | screen label>"
}

Spec lookup

Handoff lives in design/handoff/. Files: Styx Spec.dc.html (spec §1–§11), Styx.dc.html (prototype, pixel-final), styx-tokens.css/json, UX Research Memo.dc.html.

Strip tags

python3 - "$CLAUDE_PROJECT_DIR/design/handoff/Styx Spec.dc.html" <<'PY'
import re,html,sys
t=open(sys.argv[1]).read()
t=re.sub(r'<script.*?</script>','',t,flags=re.S); t=re.sub(r'<style.*?</style>','',t,flags=re.S)
t=re.sub(r'<[^>]+>','\n',t); print(html.unescape(re.sub(r'\n\s*\n+','\n',t)))
PY

Section index: pipe through grep -nE '^[0-9]+\. '. Slice a section: awk '/^8\. /{f=1} /^9\. /{f=0} f'.

Prototype markup

Screens: grep -n 'data-screen-label="Home"' design/handoff/Styx.dc.html, then sed -n '<start>,<next-label>p'. Artboards are sequential; markup lines 23–508, state script 509–736.
The prototype has zero CSS classes: every recipe is an inline style="…"; style-hover="…" is the hover state; data-inv/data-on are the selection attributes.
Flow/state strips (onboarding, diff, connect, spawn, new project, empty, error, toast, popout, audit) are prototype chrome, not app UI.

Report

Quote exact text, cite file and line, note if prototype and spec disagree (prototype wins for visuals, spec for behaviour; log to docs/handoff-discrepancies.md). Never paraphrase copy.