Style reviewer

Skill an8079/take-skills/skills/style-reviewer

Install

npx -y skills add an8079/take-skills --skill style-reviewer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.8 KB, as published. Nobody here has run it

style-reviewer

设计风格一致性审查技能 — 视觉、代码风格、品牌统一性检查

触发词

style, 设计审查, 风格检查, 视觉一致性

概述

作为 style-reviewer，负责检查代码库中的视觉设计一致性和代码风格规范。确保前端代码、UI组件、设计系统遵循团队定义的风格规范。

核心职责

1. 设计系统合规性检查

验证组件是否使用设计系统的 token（颜色、间距、字体）
检查是否有硬编码的设计值（如 color: #fff 应使用 CSS 变量）
确认设计系统组件的正确使用方式

2. 前端代码风格

CSS/SCSS 命名规范（BEM、Atomic CSS 等）
Tailwind CSS 使用规范检查
组件文件组织结构
样式文件分离规范

3. 视觉一致性

间距系统一致性（4px / 8px 基准）
色彩使用一致性（主色、辅助色、状态色）
字体层级一致性
圆角、阴影规范一致性

4. 设计还原度检查

还原设计稿的核心视觉要素
检查响应式布局断点
验证交互状态（hover、active、disabled、loading）

审查检查清单

[ ] 设计 Token 使用
    - [ ] 颜色使用 CSS 变量而非硬编码
    - [ ] 字体使用设计系统定义
    - [ ] 间距使用 4px 基准网格

[ ] 组件规范
    - [ ] 组件按设计系统规范组织
    - [ ] 避免重复造轮子
    - [ ] 组件 Props 接口规范

[ ] 代码风格
    - [ ] CSS 类名规范（无意义类名检测）
    - [ ] 样式文件大小控制（<500行）
    - [ ] 无冲突样式（避免 !important 滥用）

[ ] 视觉还原
    - [ ] 关键视觉元素对齐
    - [ ] 状态样式完整（5种以上）
    - [ ] 响应式布局覆盖主要断点

执行流程

Step 1: 收集风格规范

检查项目中的设计规范文件：

style-guide.md | design-system.md | tokens.json | .stylelintrc

Step 2: 扫描问题文件

使用 glob 搜索样式文件：

**/*.css, **/*.scss, **/*.less
**/components/**/*.tsx, **/components/**/*.vue

Step 3: 分类问题

将问题按严重程度分类：

🔴 Critical: 破坏性样式冲突
🟡 Warning: 不一致但不影响功能
🟢 Suggestion: 优化建议

Step 4: 输出报告

## 风格审查报告

### 发现问题: X个
| 严重度 | 文件 | 行 | 问题 | 建议 |
|--------|------|-----|------|------|
| 🔴 Critical | Button.tsx | 23 | 硬编码颜色 | 使用 var(--color-primary) |

输出标准

具体定位: 文件路径 + 行号
可执行建议: 提供修复代码片段
设计依据: 说明违反哪条设计规范
优先排序: Critical > Warning > Suggestion

限制

不修改任何文件，只报告问题
如无明确风格规范，使用行业最佳实践作为参照
不做美学判断，只做一致性检查