wind_power_cal/.agents/skills/frontend-debug/SKILL.md

name, description

name	description
frontend-debug	前端 bug 排查规范。用于样式异常、交互异常或状态不一致问题，按 CSS、DOM、JS 的顺序定位，避免盲改逻辑代码。

前端排查规范

排查顺序（必须按序）

1. CSS 层：检查 Computed Style，确认是否被覆盖
2. DOM 层：检查 class 是否正确挂载
3. JS 层：确认 state/ref 与渲染流程是否正确

常见坑

• CSS Modules 中，复合选择器优先级高于单类选择器
• “样式不生效”大多数是优先级和覆盖问题，不是 JS 问题

示例：

.table td { color: #ccc; }        /* (0,1,1) */
.valueChanged { color: #22c55e; } /* (0,1,0) -> 会被覆盖 */
.table td.valueChanged { color: #22c55e; } /* 修复 */

禁止项

• 未验证 CSS 前反复改 JS
• 一次性改多层（CSS/DOM/JS）导致回归难定位
• 凭感觉改，不看 DevTools 实际结果