frontend-style-harmonizer-skill

Frontend Style Harmonizer

前端样式一致性治理工具。只读审计 + 可选自动重构，发现并修复三类问题：

1. 复用：多个页面写了相同的样式声明块 → 抽取为公共 CSS
2. 对齐：同类组件（按钮/tab/输入框/列表项）跨页面尺寸不一致 → 收敛到统一规格
3. 硬编码：散落的裸值（14rpx、#c45c48、red） → 收敛为 SCSS 变量 / CSS 变量

核心原则

• 只改视觉层：props / event / router / state / API 一律不动
• 只读优先：默认只出报告，--apply 才改文件
• dry-run 可见：所有修改提供 diff + 回滚
• uniapp 一等公民：rpx 归一化（修正 foundry 的 4pt 网格误判）

使用方式

触发词（任一即可）

统一各页面样式
样式对齐
抽取公共样式
去硬编码
按钮对齐
tab高度不一致
样式治理
样式审查
frontend-style-harmonizer

参数

参数	说明	默认
[path]	项目路径	cwd
--scope	审查维度	all
--report-only	只出报告不修改	true
--apply	执行修改（需先 --report-only 确认）	false

执行流程（AI 必须按此顺序执行）

Step 1: 检测项目类型
  → 扫描根目录，判断 uniapp / vue / react / html
  → 检测依据：pages.json(uniapp) / package.json(vue/react) / index.html(html)

Step 2: 收集目标文件
  → 扫描 pages/, components/, src/ 下的 .vue/.scss/.css 文件
  → 忽略 node_modules, dist, .git

Step 3: 按维度扫描（取决于 --scope）
  → 复用: 按 references/detection-rules.md 的"样式指纹"规则扫描
  → 对齐: 按 references/align-checklist.md 的"同类组件"规则扫描
  → 硬编码: 按 references/hardcode-patterns.md 的正则扫描

Step 4: 汇总问题，生成报告
  → 按 references/report-template.md 模板生成 style-governance-report.md
  → 报告写入 <用户项目>/docs/style-governance-report.md

Step 5: (仅 --apply) 执行替换
  → 先 dry-run（输出 diff 不写文件）
  → 用户确认后执行
  → 执行后提示 git 回滚命令

AI 必须读取的参考资料：执行时必须加载以下文件获取具体规则

• references/detection-rules.md — 扫描规则（rpx归一化、样式指纹）
• references/align-checklist.md — 对齐检查清单（按钮/tab/输入框规格）
• references/hardcode-patterns.md — 硬编码模式（裸值→变量映射）
• references/token-conventions.md — 变量命名约定
• references/report-template.md — 报告模板

三个审查维度

维度 A：复用（公共样式块抽取）

检测"多个文件出现相同或高度相似的样式声明块"。

发现项：

• 选择器声明块指纹相同 / 相似度 ≥ 阈值
• 内联 style 重复
• 多个 scoped style 里重复定义同名同值的规则

治理动作：

• 抽成公共 class（common.scss / styles/components.css）
• 或提示抽成公共组件
• 保留差异部分在各自页面

维度 B：对齐（同类组件尺寸 / 样式一致性）

检测"同类组件在不同页面的关键视觉属性不一致**"。

发现项：

• 按钮 / tab item / 标签 / 输入框 / 列表项 / 卡片 的 height、font-size、padding、border-radius、color、background 跨文件差异
• 固定高度容器（头部 tab、导航栏）跨页面高度不一致导致切换跳变