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

spec-lookup

GitHub

用于在开发前查询设计稿与原型规范，通过脚本清洗HTML并提取特定内容，对比规范与原型差异，确保实现符合设计要求。

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

Trigger Scenarios

需要确认UI组件或文案的具体规范开发前查阅设计文档和原型细节核对原型视觉与规范行为的一致性

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.