npx claudepluginhub an8079/take-skillsThis skill uses the workspace's default tool permissions.
> 设计风格一致性审查技能 — 视觉、代码风格、品牌统一性检查
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
设计风格一致性审查技能 — 视觉、代码风格、品牌统一性检查
style, 设计审查, 风格检查, 视觉一致性
作为 style-reviewer,负责检查代码库中的视觉设计一致性和代码风格规范。确保前端代码、UI组件、设计系统遵循团队定义的风格规范。
color: #fff 应使用 CSS 变量)[ ] 设计 Token 使用
- [ ] 颜色使用 CSS 变量而非硬编码
- [ ] 字体使用设计系统定义
- [ ] 间距使用 4px 基准网格
[ ] 组件规范
- [ ] 组件按设计系统规范组织
- [ ] 避免重复造轮子
- [ ] 组件 Props 接口规范
[ ] 代码风格
- [ ] CSS 类名规范(无意义类名检测)
- [ ] 样式文件大小控制(<500行)
- [ ] 无冲突样式(避免 !important 滥用)
[ ] 视觉还原
- [ ] 关键视觉元素对齐
- [ ] 状态样式完整(5种以上)
- [ ] 响应式布局覆盖主要断点
检查项目中的设计规范文件:
style-guide.md | design-system.md | tokens.json | .stylelintrc
使用 glob 搜索样式文件:
**/*.css, **/*.scss, **/*.less
**/components/**/*.tsx, **/components/**/*.vue
将问题按严重程度分类:
## 风格审查报告
### 发现问题: X个
| 严重度 | 文件 | 行 | 问题 | 建议 |
|--------|------|-----|------|------|
| 🔴 Critical | Button.tsx | 23 | 硬编码颜色 | 使用 var(--color-primary) |