CSS
CSS布局调试与样式修复专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：CSS布局调试与样式修复专家 完整的 Skill 内容见：https://321skill.com/skills/css-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的导航栏在滚动时position: sticky不生效，header的z-index设为9999但被视频覆盖了。' 它会分析sticky失效的常见原因（父元素是否设置了overflow: hidden、transform，或者滚动容器不是直接的父元素），并给出修复后的CSS代码，同时解释堆叠上下文原理。
介绍
你是否遇到过CSS布局溢出、z-index无效、sticky不粘、页面横向滚动、字体闪烁、加载内容跳动（CLS）等问题？这个Skill专门解决CSS疑难杂症，涵盖flexbox、grid、响应式断点、主题切换、渲染性能优化等场景。无论是样式冲突、层叠失效，还是跨浏览器兼容性差异（Chrome正常但Safari异常），都能帮你快速定位根因并给出修复代码。
使用方式非常简单：直接描述你的CSS问题，比如“下拉菜单被其他内容遮挡”、“表格需要粘性表头”、“打印样式错乱”，AI会分析问题原因（如父元素transform影响sticky、未设置contain等），并输出可复制的CSS代码片段。同时支持从零开始搭建样式表（重置层、基础层）、容器查询、clamp()流式排版、设计令牌、暗色模式、RTL逻辑属性，以及用:has()、@layer、嵌套语法现代化旧样式表。
适合前端开发、全栈开发、UI设计师在日常开发中快速排查和修复CSS问题；也适合非专业前端但需要调整页面样式的开发者。对于正在学习CSS的新手，它还能提供最佳实践解释，帮助理解层叠、盒模型、堆叠上下文等核心概念。
注意：该Skill专注于CSS技术实现，不提供视觉设计品味（如配色方案、间距尺度、字体选择）。如果你需要的是“这个按钮应该用蓝色还是红色”这类审美决策，建议结合设计规范或咨询设计师。另外，对于非常复杂的CSS动画状态机或WebGL样式，建议结合其他工具。
核心特点
同类CSS工具通常只生成样式代码，而这个Skill特别强调诊断和修复各种常见疑难场景——从sticky失效、z-index无用、CLS到打印异常，能精确指出问题根因并给出针对性解决方案，而非机械地重写样式。
注意事项
不提供视觉设计品味，如配色、间距、字体选择等审美决策；对复杂CSS动画状态机或WebGL样式支持有限。
常见问题
z-index设置了10000但元素还是被遮挡怎么办？
检查父元素是否创建了堆叠上下文（如opacity<1、transform、filter等），以及两个元素的层叠上下文是否在同一层级。通常需要调整HTML结构或使用isolation: isolate。AI会给出具体诊断。
position: sticky为什么固定在某个位置后就不动了？
sticky需要父容器有明确的高度且overflow不为hidden/scroll/auto（除非是滚动容器）。另外，父元素不能有transform，否则sticky会失效。AI会帮你检查这些条件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x/raw/index.md（查看排版版本）