ss-lint

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Lint (Quick Check)

设计系统代码检查（快速校验）

Read

.styleseed/effective-rules.md

and

.styleseed/manifest.json

; invoke

/ss-resolve

$ss-resolve

first when they are missing or stale. Lint detects deterministic drift; it must not flag an exact grammar/recipe/profile/adapter contract as a violation or let an arbitrary lock value create an exception.

读取

.styleseed/effective-rules.md

和

.styleseed/manifest.json

文件；若文件缺失或已过期，请先调用

/ss-resolve

或

$ss-resolve

。代码检查用于检测确定性偏差；不得将符合语法/规则/配置/适配器约定的内容标记为违规，也不得因任意锁定值而产生例外。

When NOT to use

不适用场景

For deeper review of design judgment (composition, hierarchy, rhythm) → use
```
/ss-review
```
For accessibility specifically → use
```
/ss-a11y
```
For Nielsen UX heuristics → use
```
/ss-audit
```
For applying refactors — this only flags violations; use
```
/ss-review
```
to fix

Target: $ARGUMENTS

若需深度评审设计判断（布局、层级、节奏）→ 使用
```
/ss-review
```
若专门检查无障碍性 → 使用
```
/ss-a11y
```
若需检查尼尔森UX启发式原则 → 使用
```
/ss-audit
```
若需重构代码——本工具仅标记违规；请使用
```
/ss-review
```
进行修复

目标：$ARGUMENTS

What This Does

功能说明

Fast, grep-based scan for common design violations. Runs in seconds (unlike /ss-review which is a deep manual audit). Run this after every file change.

基于grep的快速扫描，用于检测常见设计违规问题。几秒内即可完成（不同于

/ss-review

的深度人工审核）。建议每次文件修改后运行本工具。

Checks

检查项

1. Hardcoded Colors

1. 硬编码颜色

Search for hex colors in className strings that should be semantic tokens:

bash

grep -n '#[0-9a-fA-F]\{3,8\}' [file] | grep -v 'theme.css\|tokens\|\.json'

Violation:

text-[#3C3C3C]

bg-[#3182F6]

Fix:

text-text-primary

bg-brand

搜索className字符串中应使用语义化令牌的十六进制颜色：

bash

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. Raw Pixel Values in Tailwind

2. Tailwind中的原始像素值

bash

grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]

Violation:

p-[24px]

gap-[12px]

Fix:

p-6

gap-3

bash

grep -n 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' [file]

违规示例：

p-[24px]

gap-[12px]

修复方案：

p-6

gap-3

3. Old Width/Height Syntax

3. 旧版宽/高语法

bash

grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]

Violation:

w-4 h-4

Fix:

size-4

bash

grep -n 'w-[0-9] h-[0-9]\|w-\[.*\] h-\[' [file]

违规示例：

w-4 h-4

修复方案：

size-4

4. Physical Properties (LTR-only)

4. 物理属性（仅支持从左到右布局）

bash

grep -n ' ml-\| mr-\| pl-\| pr-' [file]

Violation:

ml-2

mr-4

Fix:

ms-2

me-4

bash

grep -n ' ml-\| mr-\| pl-\| pr-' [file]

违规示例：

ml-2

mr-4

修复方案：

ms-2

me-4

5. Uncontracted Hard Black

5. 未约定的纯黑色

bash

grep -n 'text-black\|bg-black\|#000000\|#000"' [file]

Violation: Pure black without an exact structural role in the selected grammar/profile Fix: Use the semantic ink token, or cite the maintained contract that requires hard black

bash

grep -n 'text-black\|bg-black\|#000000\|#000"' [file]

违规示例： 在所选语法/配置中没有明确结构用途的纯黑色 修复方案： 使用语义化文本令牌，或引用要求使用纯黑色的维护约定

6. Missing data-slot

6. 缺失data-slot属性

bash

grep -n 'function [A-Z]' [file] # find components
grep -n 'data-slot' [file]       # check if present

Violation: Component without

data-slot

Fix: Add

data-slot="component-name"

bash

grep -n 'function [A-Z]' [file] # 查找组件
grep -n 'data-slot' [file]       # 检查是否存在

违规示例： 组件未添加

data-slot

修复方案： 添加

data-slot="component-name"

7. Font Size CSS Variables (CRITICAL — Tailwind v4 conflict)

7. 字体大小CSS变量（严重问题——与Tailwind v4冲突）

bash

grep -n 'text-\[var(--' [file]
grep -n '\-\-text-.*px\|--fs-.*px' [file]

Violation:

text-[var(--text-sm)]

--text-sm: 13px

in theme.css Fix: Use explicit

text-[13px]

. CSS variable font sizes conflict with Tailwind v4's

--text-*

namespace — Tailwind reads them as color, not font-size.

bash

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. className Without cn()

8. 未使用cn()的className

bash

grep -n 'className={`' [file]

Violation: Template literal className Fix: Use

cn()

for all className composition

bash

grep -n 'className={`' [file]

违规示例： 使用模板字符串的className 修复方案： 所有className组合均使用

cn()

9. Universal Soft-card Drift

9. 通用Soft-card偏差

Search for repeated

rounded-2xl

shadow-[var(--shadow-card)]

, and

mx-6

in pattern files. Flag the combination when the selected recipe is not

calm-consumer

. Fix: use

ss-pattern-surface

ss-page-gutter

, and the other recipe-aware helper classes.

在模式文件中搜索重复出现的

rounded-2xl

、

shadow-[var(--shadow-card)]

和

mx-6

。当所选规则不是

calm-consumer

时，标记该组合。 修复方案： 使用

ss-pattern-surface

、

ss-page-gutter

以及其他感知规则的辅助类。

Output Format

输出格式

🔴 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

If errors > 0, list specific fixes for each violation.

🔴 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

若错误数>0，列出每个违规问题的具体修复方案。