关于 ss-lint
ss-lint 是用于按设计规则检查 UI 代码的 StyleSeed 技能。它通过规范检查器生成绑定到指定制品的诊断,并区分硬错误与检测器警告。
主要功能
- 01按制品注册表检查
- 02支持 JSON 和 SARIF 扫描输出
- 03为发现项提供稳定证据
- 04手动检查 UI 约定
- 05仅检查,不修改代码
适用场景
- 01构建前检查已修改的 UI 文件
- 02查找令牌和间距偏差
- 03审阅机器可读的检查证据
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ bitjaru/ styleseed --skill ss-lint安装后在 Claude Code 中输入/ss-lint确认已加载。
详细介绍
在此工作流之前,请先执行每个会话一次的 更新预检。
设计 Lint(快速检查)
以注册表优先的制品边界
当 .styleseed/project.json 和 .styleseed/artifacts/index.json 存在时,先解析请求的制品 ID,然后只读取 .styleseed/bundles/<artifact-id>.md 和 .styleseed/manifests/<artifact-id>.json。对于注册表项目,绝不回退到全局旧版 bundle。只有在不存在注册表时,旧版项目才可以使用 .styleseed/effective-rules.md。
规范的可执行检查
如需执行可复现、绑定到制品且输出机器可读的扫描,请使用:
node <installed-ss-score>/scripts/styleseed-check.mjs scan \
--project-root . --artifact <artifact-id> --format json
node <installed-ss-score>/scripts/styleseed-check.mjs scan \
--project-root . --all --format sarif
检查器仅将合约、包含关系、清单/哈希、格式错误的报告以及必需覆盖范围方面的问题视为硬错误。检测器发现的问题(SS001–SS006)仍作为警告,并包含稳定的文件、行号、证据片段、严重性和修复方法。使用 styleseed-check ... verify 重新计算绑定的证据运行;不要将字符串或过时的报告判定为通过。
如果任一注册表文件存在,则要求注册表完整且有效,并且只检查所选制品的 bundle 和清单。只有在两个注册表文件都不存在时,才读取 .styleseed/effective-rules.md 和 .styleseed/manifest.json。报告缺失或过时的证据,不要在仅 Lint 请求期间重新生成 bundle。Lint 用于检测确定性的偏差;不得将精确的语法/配方/配置文件/适配器合约标记为违规,也不得让任意锁定值产生例外。
不适用场景
- 如需深入评审设计判断(构图、层级、节奏)→ 使用
/ss-review - 如专门检查无障碍性 → 使用
/ss-a11y - 如需检查 Nielsen UX 启发式 → 使用
/ss-audit - 如需应用重构——此步骤只标记问题;修复由获授权的实现步骤负责
目标:$ARGUMENTS
功能说明
使用上述规范检查器执行诊断。以下搜索仅用于提示人工检查适用的项目约定,不是额外的硬错误检测器。根据请求或构建工作流要求,在受影响的 UI 文件上运行;不要对无关的修改执行 Lint。
仅 Lint 模式下不要编辑代码。所需检查通过后,只有在相关内容发生变化或有新的问题证据时才重复检查。仅当所有制品都明确属于检查范围时,才使用 --all。
检查项
1. 硬编码颜色
搜索 className 字符串中应使用语义令牌的十六进制颜色:
grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'
违规: text-[#3C3C3C]、bg-[#3182F6]
修复: text-text-primary、bg-brand
2. Tailwind 中的原始像素值
grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]
违规: p-[24px]、gap-[12px]
修复: p-6、gap-3
3. 旧版宽高语法
grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]
违规: w-4 h-4
修复: size-4
4. 物理属性(仅适用于从左到右布局)
grep -n ' ml-\| mr-\| pl-\| pr-' [file]
违规: ml-2、mr-4
修复: ms-2、me-4
5. 未纳入合约的纯黑色
grep -n 'text-black\|bg-black\|#000000\|#000"' [file]
违规: 所选语法/配置文件中没有精确结构性用途合约的纯黑色 修复: 使用语义墨色令牌,或引用要求使用纯黑色的维护中合约
6. 缺少 data-slot
grep -n 'function [A-Z]' [file] # find components
grep -n 'data-slot' [file] # check if present
违规: 组件缺少 data-slot
修复: 添加 data-slot="component-name"
7. 字体大小 CSS 变量(严重——与 Tailwind v4 冲突)
grep -n 'text-\[var(--' [file]
grep -n '\-\-text-.*px\|--fs-.*px' [file]
违规: text-[var(--text-sm)],或 theme.css 中的 --text-sm: 13px
修复: 使用显式值 text-[13px]。CSS 变量字体大小与 Tailwind v4 的 --text-* 命名空间冲突——Tailwind 会将其识别为颜色,而不是字体大小。
8. 未使用 cn() 的 className
grep -n 'className={`' [file]
违规: 模板字面量 className
修复: 所有 className 组合都使用 cn()
9. 通用柔和卡片偏差
搜索模式文件中重复出现的 rounded-2xl、shadow-[var(--shadow-card)] 和 mx-6。
如果所选配方不是 calm-consumer,则标记此组合。
修复: 使用 ss-pattern-surface、ss-page-gutter 和其他适配配方的辅助类。
输出格式
🔴 FAIL [file:line] Hardcoded hex: text-[#3C3C3C] → use text-text-primary
🔴 FAIL [file:line] Raw px: p-[24px] → use p-6
🟡 WARN [file:line] Physical prop: ml-2 → use ms-2
🟡 WARN [file:line] Missing data-slot on MyComponent
🟢 PASS No violations found
Total: X errors, Y warnings
如果 errors > 0,请针对每项违规列出具体修正措施。