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

spec-lookup

GitHub

通过解析设计交付物（HTML/CSS）回答关于规格或原型的具体问题，用于在实现前确认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.