修复网页和前端界面问题。当用户要求修复网页、调试前端、解决UI问题、修复样式、响应式布局错误、移动端显示异常、CSS问题、JavaScript报错、交互功能失效、生成网页后检查并修复时使用此技能。
系统化修复网页和前端界面问题，四阶段调试方法论高效定位根本原因。
核心铁律：修复根因而非表面 → 每次只改一个问题 → 修复后必须验证
开始修复前，根据项目需要检测可用工具：
npx playwright install --with-deps（端到端测试）、npm i -D web-vitals（性能监控）在尝试任何修复之前，必须完成以下步骤：
1.1 理解问题
1.2 可视化检查
1.3 控制台诊断
1.4 交叉验证
布局：Flexbox/Grid > 浮动；检查 box-sizing、overflow、position 样式不生效：验证选择器优先级、CSS 加载顺序、!important 滥用 JavaScript：读堆栈跟踪，检查作用域/闭包/事件绑定/DOM 加载时机 响应式：移动优先，用相对单位（rem/em/%），触摸目标 ≥44px 兼容性：查 Can I Use，CSS 前缀，Polyfill，多浏览器测试
HTML 特殊字符转义（高频踩坑点）：
生成包含代码片段的 HTML 时，必须用 escapeHTML() 转义 < > & ' "，动态内容优先用 textContent 而非 innerHTML。
CSS 2026 新特性注意：
:has() 父选择器（Chrome 105+），注意性能避免过度嵌套@layer 级联层控制优先级，DevTools 可查看规则所属层级Core Web Vitals（2024+ 标准）：
构建工具调试：
--debug --force，检查 source map 和 HMRnext dev --turbo，增量构建| ❌ 错误 | ✅ 正确 |
|---|---|
| 跳过分析直接改代码 | 先理解问题再修复 |
| 同时改多个地方 | 一次只改一个 |
| 假设而非验证 | 形成假设并测试 |
| 修复症状非根因 | 追溯源头 |
| 忽略跨浏览器测试 | 多浏览器验证 |
| 不测响应式 | 多设备尺寸验证 |
references/workflows.md — 详细工作流程references/checklist.md — 完整检查清单references/examples.md — 真实修复案例