用途
Black-Tortoise UI Reviewer 是一个面向 Black-Tortoise 项目 Angular 20 + Material Design 3 UI 技术栈的技能，用于在源代码层面识别并修复表现层问题。其审查范围包括：Black-Tortoise Angular 20 表现层、Material Design 3 组件样式与令牌、独立组件模板与 SCSS 文件。
主要能力
该技能按四步工作流运行：信息收集、视觉检查、问题修复、重新验证，并在问题仍存在时循环回视觉检查，直至完成报告。
视觉检查覆盖以下类别：
- 布局问题：元素溢出（高）、元素重叠（高）、对齐问题（中）、间距不一致（中）、文本裁剪（中）。
- 响应式问题：非移动端友好（高）、断点问题（中）、触摸目标过小（中）。
- 无障碍问题：对比度不足（高）、无焦点状态（高）、缺少 alt 文本（中）。
- 视觉一致性：字体不一致（中）、颜色不一致（中）、间距不一致（低）。
响应式测试视口包括：移动端 375px（iPhone SE/12 mini）、平板 768px（iPad）、桌面 1280px（标准 PC）、宽屏 1920px（大显示器）。
修复阶段按优先级矩阵处理：P1 立即修复（影响功能的布局问题）、P2 其次修复（降低 UX 的视觉问题）、P3 尽可能修复（轻微视觉不一致）。修复原则包括最小改动、尊重现有模式、避免破坏性变更、仅编辑表现层样式/模板，不触碰 domain/application 层。
使用方式
前置条件：目标 UI 必须可访问（本地开发服务器如 http://localhost:4200，可配置；或预发布环境；生产环境仅只读审查）；浏览器自动化必须可用（截图捕获、页面导航、DOM 信息获取）；修复时需要访问源代码，项目必须存在于工作区，编辑仅限于表现层文件。
信息收集阶段：若未提供 URL，需向用户询问；确认框架（Angular 20 独立组件）、样式方法（SCSS + Material Design 3 令牌）、源位置、审查范围；尝试从工作区文件自动检测（package.json → Angular 20 + Material + @ngrx/signals，angular.json → Angular CLI 配置，src//*.scss → 组件样式，src/styles/ → 样式配置，src/app/presentation/** → UI 源码）。
视觉检查阶段：导航到指定 URL、捕获截图、获取 DOM 结构/快照，若存在其他页面则通过导航遍历。
修复阶段：通过选择器搜索、组件搜索或文件模式过滤定位源文件，应用修复。框架特定修复指南参见 references/framework-fixes.md。
重新验证阶段：重新加载浏览器（或等待开发服务器 HMR）、捕获修复区域截图、前后对比、回归测试、决定是否迭代。若特定问题超过 3 次修复尝试，需咨询用户。
输出格式为审查结果报告，包含摘要表（目标 URL、框架、样式、测试视口、检测到的问题数、已修复数）、检测到的问题（按 P1/P2 等列出页面、元素、问题、修复文件、修复详情、前后截图）、未修复问题（原因与建议操作）以及未来改进建议。
适用场景
适用于 Black-Tortoise 项目 Angular 20 表现层的 UI 审查与修复，包括独立组件模板与 SCSS 文件、Material Design 3 组件样式与令牌的检查。可用于本地开发服务器、预发布环境或生产环境（只读审查）。
限制
需要浏览器自动化能力（导航、截图、DOM 获取）以及源代码访问（修复时）。修复必须限制在表现层文件，不得触碰 domain/application 层。若样式文件未找到，需检查 package.json 依赖、考虑 CSS-in-JS 或构建时生成 CSS 的可能性，并向用户询问样式方法。若修复未反映，需检查 HMR、清除缓存、重新构建或检查 CSS 特异性。若修复影响其他区域，需回滚、使用更具体选择器、考虑 CSS Modules 或作用域样式，并咨询用户确认影响范围。
参考实现
推荐使用 Playwright MCP 作为参考实现，配置示例：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
}
}
}
Playwright MCP 工具用途：browser_navigate（访问 URL）、browser_snapshot（获取 DOM 结构）、browser_take_screenshot（视觉检查图像）、browser_click（与交互元素交互）、browser_resize（响应式测试）、browser_console_messages（检测 JS 错误）。
其他兼容浏览器自动化工具：Selenium（广泛浏览器支持、多语言支持）、Puppeteer（Chrome/Chromium 专注、Node.js）、Cypress（易于与 E2E 测试集成）、WebDriver BiDi（标准化下一代协议）。只要提供必要能力（导航、截图、DOM 获取），工具选择灵活。
最佳实践
推荐：始终在修复前保存截图；一次修复一个问题并逐一验证；使用 Material Design 3 令牌进行样式更新；在模板中尊重 Angular 20 控制流语法；彻底记录修复详情。
不推荐：未经确认的大规模重构；忽略设计系统或品牌指南；忽略性能的修复；一次修复多个问题（难以验证）。