CSS Debug Skill <command-name css-debug</command-name <user-invocable true</user-invocable 使用场景 当用户遇到以下问题时使用此 skill： - CSS 定位问题（元素位置不正确、被裁剪、溢出等） - React 组件渲染问题 - Tailwind CSS 类不生效 - 绝对定位/相对定位问题 - Flexbox/Grid 布局问题 - z-index 层叠问题 调试步骤 1. 收集信息 首先向用户询问或获取： - 浏览器开发者工具中的 HTML 结构 - 相关元素的 computed styles - 父容器的 CSS 属性（特别是 position、overflow、display） - 截图（如果有的话） 2. 常见问题检查清单 绝对定位内容被裁剪 元素位置偏移 内容不显示 Tailwind 类不生效 3. 浏览器调试命令 在浏览器控制台运行： 4. React DevTools 检查 1. 打开 React DevTools 2. 选择问题组件 3. 检查： - props 是否正确传递 - state 是否包含预期数据 - 条件渲染的条件是否满足 5. 常用修复模式 修复绝对定位被裁剪 输出格式 分析完成后，提供： 1. 问题诊断 ：明确说明是什么导致了问题 2. 原因分析 ：解…