OpenClaw

ui-debug-methodology

UI/前端问题调试方法论。当遇到 CSS、布局、组件行为等 UI 问题时，强制执行"先观察后动手"的调试流程，避免盲目尝试。

chrsh44e0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install chrsh44e/ui-debug-methodology

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

UI 问题调试方法论

核心原则：先理解机制，后动手修改。

当 UI 行为不符合预期时，禁止立即修改代码。必须先完成以下调试流程。

触发条件

当遇到以下情况时，必须激活本 skill 的调试流程：

UI 行为不符合预期
CSS/样式不生效
组件交互有问题（拖拽、点击、hover 等）
布局错乱
第一次尝试修复失败后

强制流程

┌─────────────────────────────────────────────────────────────┐
│                    UI 问题调试流程                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. 观察现象        用 DevTools 检查实际 DOM 和样式          │
│       │                                                     │
│       ▼                                                     │
│  2. 理解机制        搞清楚组件/CSS 的工作原理                │
│       │                                                     │
│       ▼                                                     │
│  3. 定位根因        找到真正控制行为的代码/配置              │
│       │                                                     │
│       ▼                                                     │
│  4. 最小修复        只改必要的部分                          │
│       │                                                     │
│       ▼                                                     │
│  5. 验证            测试所有场景                            │
│       │                                                     │
│       └──── 失败 ────▶ 回到步骤 1，不要继续打补丁           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Step 1: 观察现象

必须使用 DevTools 或 Playwright，而不是猜测。

检查清单

检查项	方法
实际的 DOM 结构	Elements 面板
Computed styles	查看 width/height/min-width/max-width 等
样式来源	看是哪个 CSS 规则在生效
是否有覆盖	查看被划掉的样式
布...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/chrsh44e/ui-debug-methodology
Version: —
Commit: fd07087c3b6b2672e0b45be65cec812690208e7e
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# UI 问题调试方法论

**核心原则：先理解机制，后动手修改。**

当 UI 行为不符合预期时，**禁止**立即修改代码。必须先完成以下调试流程。

---

## 触发条件

当遇到以下情况时，**必须**激活本 skill 的调试流程：

1. UI 行为不符合预期
2. CSS/样式不生效
3. 组件交互有问题（拖拽、点击、hover 等）
4. 布局错乱
5. 第一次尝试修复失败后

---

## 强制流程

```
┌─────────────────────────────────────────────────────────────┐
│                    UI 问题调试流程                           │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  1. 观察现象        用 DevTools 检查实际 DOM 和样式          │
│       │                                                     │
│       ▼                                                     │
│  2. 理解机制        搞清楚组件/CSS 的工作原理                │
│       │                                                     │
│       ▼                                                     │
│  3. 定位根因        找到真正控制行为的代码/配置              │
│       │                                                     │
│       ▼                                                     │
│  4. 最小修复        只改必要的部分                          │
│       │                                                     │
│       ▼                                                     │
│  5. 验证            测试所有场景                            │
│       │                                                     │
│       └──── 失败 ────▶ 回到步骤 1，不要继续打补丁           │
│                                                             │
└─────────────────────────────────────────────────────────────┘
```

---

## Step 1: 观察现象

**必须使用 DevTools 或 Playwright**，而不是猜测。

### 检查清单

| 检查项 | 方法 |
|--------|------|
| 实际的 DOM 结构 | Elements 面板 |
| Computed styles | 查看 width/height/min-width/max-width 等 |
| 样式来源 | 看是哪个 CSS 规则在生效 |
| 是否有覆盖 | 查看被划掉的样式 |
| 布...

搜索