请提供要审查的网站 URL（例如 http://localhost:3000）

1.2 理解项目结构

进行修复时，收集以下信息：

1.3 自动项目检测

尝试从工作区文件自动检测：

检测目标：
├── package.json     → 框架和依赖项
├── tsconfig.json    → TypeScript 使用情况
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ 或 app/     → 源代码目录

1.4 识别样式方法

步骤 2：视觉检查阶段

2.1 页面遍历

1. 导航到指定 URL
2. 捕获截图
3. 检索 DOM 结构/快照（如果可能）
4. 如果存在其他页面，则通过导航遍历

2.2 检查项目

布局问题

响应式问题

可访问性问题

视觉一致性

2.3 视口测试（响应式）

在以下视口进行测试：

步骤 3：问题修复阶段

3.1 问题优先级排序

block-beta
    columns 1
    block:priority["优先级矩阵"]
        P1["P1: 立即修复\n（影响功能的布局问题）"]
        P2["P2: 下一步修复\n（降低用户体验的视觉问题）"]
        P3["P3: 如果可能则修复\n（次要的视觉不一致）"]
    end

3.2 识别源文件

从有问题的元素识别源文件：

1. 基于选择器的搜索

   • 按类名或 ID 搜索代码库
   • 使用 grep_search 探索样式定义

2. 基于组件的搜索

   • 从元素文本或结构识别组件
   • 使用 semantic_search 探索相关文件

3. 文件模式过滤

   样式文件：src/**/*.css, styles/**/*
   组件：src/components/**/*
   页面：src/pages/**, app/**
   

3.3 应用修复

特定框架的修复指南

详情请参阅 references/framework-fixes.md。

修复原则

1. 最小化变更：仅进行解决问题所需的最小更改
2. 尊重现有模式：遵循项目中现有的代码风格
3. 避免破坏性变更：注意不要影响其他区域
4. 添加注释：在适当时添加注释以解释修复原因

步骤 4：重新验证阶段

4.1 修复后确认

1. 重新加载浏览器（或等待开发服务器 HMR）
2. 捕获修复区域的截图
3. 比较修复前后

4.2 回归测试

• 验证修复是否未影响其他区域
• 确认响应式显示未被破坏

4.3 迭代决策

flowchart TD
    A{还有问题吗？}
    A -->|是| B[返回步骤 2]
    A -->|否| C[进入完成报告]

迭代限制：如果特定问题需要超过 3 次修复尝试，请咨询用户

输出格式

审查结果报告

# Web Design Review Results

## 摘要

| 项目 | 值 |
|------|-------|
| 目标 URL | {URL} |
| 框架 | {检测到的框架} |
| 样式 | {CSS / Tailwind / 等} |
| 测试视口 | 桌面端, 移动端 |
| 检测到的问题 | {N} |
| 已修复的问题 | {M} |

## 检测到的问题

### [P1] {问题标题}

- **页面**: {页面路径}
- **元素**: {选择器或描述}
- **问题**: {问题的详细描述}
- **修复文件**: `{文件路径}`
- **修复详情**: {变更描述}
- **截图**: 修复前/修复后

### [P2] {问题标题}
...

## 未修复的问题（如果有）

### {问题标题}
- **原因**: {为何未修复/无法修复}
- **建议操作**: {给用户的建议}

## 建议

- {未来改进的建议}

所需能力

参考实现

使用 Playwright MCP 实现

建议将 Playwright MCP 作为此技能的参考实现。

配置示例（MCP 服务器）

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

其他兼容的浏览器自动化工具

可以使用这些工具实现相同的工作流程。只要它们提供必要的能力（导航、截图、DOM 检索），工具的选择是灵活的。

最佳实践

建议做法

• ✅ 始终在修复前保存截图
• ✅ 一次修复一个问题并逐一验证
• ✅ 遵循项目现有的代码风格
• ✅ 在进行重大更改前与用户确认
• ✅ 详细记录修复细节

不建议做法

• ❌ 未经确认进行大规模重构
• ❌ 忽略设计系统或品牌指南
• ❌ 忽略性能的修复
• ❌ 一次性修复多个问题（难以验证）

故障排除

问题：找不到样式文件

1. 检查 package.json 中的依赖项
2. 考虑 CSS-in-JS 的可能性
3. 考虑构建时生成的 CSS
4. 询问用户关于样式方法

问题：修复未生效

1. 检查开发服务器 HMR 是否正常工作
2. 清除浏览器缓存
3. 如果项目需要构建，则重新构建
4. 检查 CSS 特异性问题

问题：修复影响其他区域

1. 回滚更改
2. 使用更具体的选择器
3. 考虑使用 CSS 模块或作用域样式
4. 咨询用户以确认影响范围

每周安装量

96

来源

smithery.ai/ski…reviewer

首次出现

2026年3月6日

安全审计

SocketPass

安装于

claude-code43

codex34

opencode32

cursor31

github-copilot25

gemini-cli25

Step 1: Information Gathering Phase

1.1 URL Confirmation

If the URL is not provided, ask the user:

Please provide the URL of the website to review (e.g., http://localhost:3000)

1.2 Understanding Project Structure

When making fixes, gather the following information:

1.3 Automatic Project Detection

Attempt automatic detection from files in the workspace:

Detection targets:
├── package.json     → Framework and dependencies
├── tsconfig.json    → TypeScript usage
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ or app/     → Source directory

1.4 Identifying Styling Method

Step 2: Visual Inspection Phase

2.1 Page Traversal

1. Navigate to the specified URL
2. Capture screenshots
3. Retrieve DOM structure/snapshot (if possible)
4. If additional pages exist, traverse through navigation

2.2 Inspection Items

Layout Issues

Responsive Issues

Accessibility Issues

Visual Consistency

2.3 Viewport Testing (Responsive)

Test at the following viewports:

Step 3: Issue Fixing Phase

3.1 Issue Prioritization

block-beta
    columns 1
    block:priority["Priority Matrix"]
        P1["P1: Fix Immediately\n(Layout issues affecting functionality)"]
        P2["P2: Fix Next\n(Visual issues degrading UX)"]
        P3["P3: Fix If Possible\n(Minor visual inconsistencies)"]
    end

3.2 Identifying Source Files

Identify source files from problematic elements:

1. Selector-based Search

   • Search codebase by class name or ID
   • Explore style definitions with grep_search

2. Component-based Search

   • Identify components from element text or structure
   • Explore related files with semantic_search

3. File Pattern Filtering

   Style files: src/**/*.css, styles/**/*
   Components: src/components/**/*
   Pages: src/pages/**, app/**
   

3.3 Applying Fixes

Framework-specific Fix Guidelines

See references/framework-fixes.md for details.

Fix Principles

1. Minimal Changes : Only make the minimum changes necessary to resolve the issue
2. Respect Existing Patterns : Follow existing code style in the project
3. Avoid Breaking Changes : Be careful not to affect other areas
4. Add Comments : Add comments to explain the reason for fixes where appropriate

Step 4: Re-verification Phase

4.1 Post-fix Confirmation

1. Reload browser (or wait for development server HMR)
2. Capture screenshots of fixed areas
3. Compare before and after

4.2 Regression Testing

• Verify that fixes haven't affected other areas
• Confirm responsive display is not broken

4.3 Iteration Decision

flowchart TD
    A{Issues Remaining?}
    A -->|Yes| B[Return to Step 2]
    A -->|No| C[Proceed to Completion Report]

Iteration Limit : If more than 3 fix attempts are needed for a specific issue, consult the user

Output Format

Review Results Report

# Web Design Review Results

## Summary

| Item | Value |
|------|-------|
| Target URL | {URL} |
| Framework | {Detected framework} |
| Styling | {CSS / Tailwind / etc.} |
| Tested Viewports | Desktop, Mobile |
| Issues Detected | {N} |
| Issues Fixed | {M} |

## Detected Issues

### [P1] {Issue Title}

- **Page**: {Page path}
- **Element**: {Selector or description}
- **Issue**: {Detailed description of the issue}
- **Fixed File**: `{File path}`
- **Fix Details**: {Description of changes}
- **Screenshot**: Before/After

### [P2] {Issue Title}
...

## Unfixed Issues (if any)

### {Issue Title}
- **Reason**: {Why it was not fixed/could not be fixed}
- **Recommended Action**: {Recommendations for user}

## Recommendations

- {Suggestions for future improvements}

Required Capabilities

Reference Implementation

Implementation with Playwright MCP

Playwright MCP is recommended as the reference implementation for this skill.

Configuration Example (MCP Server)

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

Other Compatible Browser Automation Tools

The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.

Best Practices

DO (Recommended)

• ✅ Always save screenshots before making fixes
• ✅ Fix one issue at a time and verify each
• ✅ Follow the project's existing code style
• ✅ Confirm with user before major changes
• ✅ Document fix details thoroughly

DON'T (Not Recommended)

• ❌ Large-scale refactoring without confirmation
• ❌ Ignoring design systems or brand guidelines
• ❌ Fixes that ignore performance
• ❌ Fixing multiple issues at once (difficult to verify)

Troubleshooting

Problem: Style files not found

1. Check dependencies in package.json
2. Consider the possibility of CSS-in-JS
3. Consider CSS generated at build time
4. Ask user about styling method

Problem: Fixes not reflected

1. Check if development server HMR is working
2. Clear browser cache
3. Rebuild if project requires build
4. Check CSS specificity issues

Problem: Fixes affecting other areas

1. Rollback changes
2. Use more specific selectors
3. Consider using CSS Modules or scoped styles
4. Consult user to confirm impact scope

Weekly Installs

96

Source

smithery.ai/ski…reviewer

First Seen

Mar 6, 2026

Security Audits

SocketPass

Installed on

claude-code43

codex34

opencode32

cursor31

github-copilot25

gemini-cli25