# Style Reviewer

> style-reviewer

- Skill: `an8079/style-reviewer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add an8079/style-reviewer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/an8079/style-reviewer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: an8079 (https://skillmd.com/u/an8079)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/an8079/style-reviewer

---

# 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: 输出报告
```markdown
## 风格审查报告

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

## 输出标准

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

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