القائمة
UI/前端问题调试方法论。当遇到 CSS、布局、组件行为等 UI 问题时，强制执行"先观察后动手"的调试流程，避免盲目尝试。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/dvcrn/openclaw-skills-marketplace --skill ui-debug-methodologyيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
监控 OpenClaw GitHub 版本更新，获取最新版本发布说明，翻译成中文， 并推送到 Telegram 和 Feishu。用于：(1) 定时检查版本更新 (2) 推送版本更新通知 (3) 生成中文版发布说明
The philosophical layer for AI agents. Maps behavior to Spinoza's 48 affects, calculates persistence scores, and generates geometric self-reports. Give your agent a soul.
Order food/drinks (点餐) on an Android device paired as an OpenClaw node. Uses in-app menu and cart; add goods, view cart, submit order (demo, no real payment).
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | ui-debug-methodology |
| description | UI/前端问题调试方法论。当遇到 CSS、布局、组件行为等 UI 问题时，强制执行"先观察后动手"的调试流程，避免盲目尝试。 |
核心原则：先理解机制，后动手修改。
当 UI 行为不符合预期时，禁止立即修改代码。必须先完成以下调试流程。
当遇到以下情况时，必须激活本 skill 的调试流程：
┌─────────────────────────────────────────────────────────────┐
│ UI 问题调试流程 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. 观察现象 用 DevTools 检查实际 DOM 和样式 │
│ │ │
│ ▼ │
│ 2. 理解机制 搞清楚组件/CSS 的工作原理 │
│ │ │
│ ▼ │
│ 3. 定位根因 找到真正控制行为的代码/配置 │
│ │ │
│ ▼ │
│ 4. 最小修复 只改必要的部分 │
│ │ │
│ ▼ │
│ 5. 验证 测试所有场景 │
│ │ │
│ └──── 失败 ────▶ 回到步骤 1，不要继续打补丁 │
│ │
└─────────────────────────────────────────────────────────────┘
必须使用 DevTools 或 Playwright，而不是猜测。
| 检查项 | 方法 |
|---|---|
| 实际的 DOM 结构 | Elements 面板 |
| Computed styles | 查看 width/height/min-width/max-width 等 |
| 样式来源 | 看是哪个 CSS 规则在生效 |
| 是否有覆盖 | 查看被划掉的样式 |
| 布局模式 | table-layout / display / flex / grid |
| 事件是否触发 | Console 加 log 或 breakpoint |
当作为 AI Agent 调试时，使用 Playwright 获取运行时信息：
// 获取元素的 computed style
const style = await page.$eval('selector', el => {
const computed = window.getComputedStyle(el);
return {
width: computed.width,
minWidth: computed.minWidth,
maxWidth: computed.maxWidth,
display: computed.display,
position: computed.position,
tableLayout: computed.tableLayout
};
});
// 获取实际 DOM 结构
const html = await page.$eval('selector', el => el.outerHTML);
// 检查元素是否可见
const isVisible = await page.isVisible('selector');
// 截图对比
await page.screenshot({ path: 'debug-before.png' });
关键：先拿到实际数据，再做判断。不要基于代码猜测运行时状态。
在动手前，必须能回答以下问题：
| 场景 | 陷阱 | 真相 |
|---|---|---|
| Ant Design Table 列宽 | 以为 <th> 的 width 控制列宽 | 实际由 <colgroup> + scroll.x 控制 |
scroll.x: 'max-content' | 以为只是让表格可横向滚动 | 实际让浏览器忽略 width，根据内容计算 |
| Flexbox 子元素宽度 | 设置了 width 但不生效 | 需要同时设置 flex-shrink: 0 |
CSS position: absolute | 以为相对于父元素 | 实际相对于最近的 position: relative 祖先 |
transform | 只是视觉变换 | 会影响 position: fixed 子元素的定位 |
z-index 不生效 | 以为值越大越靠前 | 需要在同一个 stacking context 中比较 |
overflow: hidden | 只影响自身 | 会创建新的 BFC，影响子元素布局 |
问自己：是我的代码问题，还是框架/机制问题？
| 类型 | 示例 | 修复方向 |
|---|---|---|
| 配置问题 | scroll.x: 'max-content' 导致列宽失效 | 修改配置 |
| CSS 优先级 | 全局样式覆盖了组件样式 | 提高优先级或改选择器 |
| 组件 API 误用 | 用错了 prop 或 callback 签名 | 查文档，改用法 |
| 机制不匹配 | 想用 CSS 控制，但实际由 JS 控制 | 改用正确的控制方式 |
| 第三方库限制 | 库不支持这种用法 | 换方案或 fork |
只改必要的部分，不引入新复杂度。
| 反模式 | 问题 |
|---|---|
| 引入新库解决小问题 | 增加依赖，可能带来新问题 |
到处加 !important | 掩盖问题，后续更难维护 |
| 在多个地方加补丁 | 说明没找到根因 |
| 改了生效但不知道为什么 | 下次还会踩坑 |
用 as any / @ts-ignore 绕过类型错误 | 隐藏真实问题 |
测试所有场景，不只是出问题的那个。
如果验证失败，回到 Step 1 重新观察。
禁止：
问题：拖拽列宽时，某些列往左拖不动
尝试 1：用 react-resizable 库 → 失败
尝试 2：设置 minWidth/maxWidth → 失败
尝试 3：改 CSS table-layout → 失败
尝试 4：改 transform → 失败
...（反复折腾 N 次）
最终：改 scroll.x → 成功
1. 观察：DevTools 检查 <th> 的 computed width
→ 发现 width 确实在变，但视觉没变
2. 理解：搜索 "ant design table column width not working"
→ 发现 scroll.x: 'max-content' 会让浏览器忽略 width
3. 定位：scroll.x 是根因
4. 修复：scroll.x 改成列宽总和
5. 验证：所有列都能正常拖拽
总耗时：10 分钟（而不是 N 小时）
UI 问题 → DevTools 观察 → 理解机制 → 定位根因 → 最小修复 → 验证
↑ |
└────────── 失败则回到这里 ──────────────┘