CSWG Lint & Design
第一步：打开并执行 docs/prerequisites.md。
确认扫描根、令牌文件、EP 入口、图标/UI 壳的真实 import。未确认前不要写死包名或路径。
本目录可单独拷贝到其它项目。checks/ 与 docs/ 是规范正文，styles/ 是样式基准，都不依赖源仓路径。
硬约束：业务页面组件全部用 Element Plus。shadcn 主要做样式规范；若项目有 UI 壳，仅用于布局壳，不要用 shadcn 拼业务表单/表格/浮层。
Quick map
Core
docs/prerequisites.md— 前置条件（必读）docs/style-align.md— 把目标仓令牌和 EP 覆盖调成技能内styles/styles/— 随技能拷走的样式基准（令牌 + EP 覆盖）README.md— 栈分工SKILL.md— 本文件
Docs（设计模式）
docs/component-decisions.md— EP 组件选用docs/composition-patterns.md— 列表 / Tabs / 查询栏 / 浮层docs/form-patterns.md— 查询 / 新增 / 修改docs/page-templates.md— 页面模板docs/do-dont-examples.md— 正反例docs/design-review-checklist.md— 交付清单
Checks（检测细则）
- 令牌：
checks/color|type|spacing|radius|shadow.md+scripts/check-*.mjs - 组件：
checks/naming|button|form|table|dialog|confirm|loading|tabs|date-picker|time-picker|pagination|icon.md
Essentials
| 项 | 值 |
|---|---|
| 业务组件 | Element Plus only |
| 视觉令牌 / EP 覆盖 | 技能内 styles/；目标仓按 docs/style-align.md 整份对齐 |
| shadcn 角色 | 样式规范；可选布局壳 |
| 同业务间距 | gap-section = 12px（类名以仓内映射为准） |
| 不相关模块 | gap-4 = 16px |
| 控件间距 | gap-control = 8px |
| 页边 | p-page = 16px |
| 浮层 | 短 Dialog · 长 Drawer · 确认 Confirm |
| Tabs | 胶囊默认；Tabs 在 Card 外 |
| 查询 | search-form；列宽在已对齐的 EP 主题里，不要在页面 scoped 再抄；≥4 条件高级查询；更多 ellipsis 非 circle |
| Loading | 必出；优先区域；按钮 :loading |
| 图标 | Iconify lucide:* + size-* |
何时读什么
| 任务 | 先读 |
|---|---|
| 任意任务 | prerequisites.md |
| 把目标项目样式调成设计系统 | style-align.md |
| 新做列表页 | page-templates.md → composition-patterns.md → form.md / table.md |
| 查询 / 高级查询 | form-patterns.md → checks/form.md |
| 弹层选型 | component-decisions.md → dialog.md / confirm.md |
| 改完要验收 | design-review-checklist.md + 跑 scripts |
| 令牌违规 | scripts/check-*.mjs <扫描根> + 对应 checks |
流程
- [ ] 0. 前置条件：扫描根、令牌文件、EP、图标/壳 import
- [ ] 0b. 样式对齐（`style-align.md`）：要改目标项目时，先把令牌和 EP 覆盖调成技能内 `styles/`。只检测则只列差异
- [ ] 1. 定扫描范围（用户路径或前置确认的扫描根；禁止默认猜 ../cswg-web）
- [ ] 2. 跑令牌脚本（传入扫描根）
- [ ] 3. 令牌语义复核
- [ ] 4. docs + 组件 checks 复核 EP 用法
- [ ] 5. design-review-checklist
- [ ] 6. 汇报；用户没说修就先别改代码
node scripts/check-color.mjs <扫描根或文件>
node scripts/check-type.mjs <扫描根或文件>
node scripts/check-spacing.mjs <扫描根或文件>
node scripts/check-radius.mjs <扫描根或文件>
node scripts/check-shadow.mjs <扫描根或文件>
示例代码中的 import、包名、路径一律换成目标仓真实写法。
不要做的事
- 不要假设
@cswg/styles、@cswg/ui、apps/web/src/pages/demos一定存在 - 不要用 shadcn 业务组件替代 EP 做列表/表单/浮层
- 不要在业务文件里加裸 hex、
font-size: 14px、p-[13px]来「修」检测 - 令牌只改前置条件确认过的令牌文件
- 组件叫法跟
checks/naming.md，不要 Dialog/对话框混用
