mcpField
S
ss-lint

ss-lint

github.com/bitjaru设计与 UI993855 次安装1 天前更新
代码仓库

关于 ss-lint

ss-lint 是用于按设计规则检查 UI 代码的 StyleSeed 技能。它通过规范检查器生成绑定到指定制品的诊断,并区分硬错误与检测器警告。

主要功能

  1. 01按制品注册表检查
  2. 02支持 JSON 和 SARIF 扫描输出
  3. 03为发现项提供稳定证据
  4. 04手动检查 UI 约定
  5. 05仅检查,不修改代码

适用场景

  1. 01构建前检查已修改的 UI 文件
  2. 02查找令牌和间距偏差
  3. 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,请针对每项违规列出具体修正措施。

评论

支持 Markdown