CSS
专业解决CSS布局、调试与现代化重构问题的AI助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：专业解决CSS布局、调试与现代化重构问题的AI助手。 完整的 Skill 内容见：https://321skill.com/skills/css-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的模态框（modal）总是显示在页面内容后面，即使设置了很高的z-index也没用，怎么办？’ 它会分析可能的原因，比如父元素创建了新的堆叠上下文，并给出具体的CSS修改方案，例如检查并调整相关元素的`position`和`z-index`属性。
介绍
这个Skill专门用于解决前端开发中各种棘手的CSS问题。当你的页面布局意外错乱、元素堆叠顺序失效、响应式设计失灵，或者遇到浏览器兼容性差异时，它都能提供精准的诊断和修复方案。
它通过理解你描述的CSS问题现象，直接生成或调试对应的CSS代码。无论是定位z-index失效的原因、修复position: sticky不生效的bug、解决内容加载时的布局抖动（CLS），还是处理跨浏览器的样式差异，它都能提供具体的代码修改建议。
它非常适合前端开发者、全栈工程师以及任何需要编写和维护CSS样式的人员。无论是日常开发中的样式调试，还是对遗留样式表进行现代化重构，都能从中获得高效支持。
使用建议是，尽可能清晰地描述你遇到的问题现象、期望的效果以及你已经尝试过的方案。对于复杂的布局问题，提供相关的HTML结构或截图有助于获得更准确的解决方案。请注意，它不负责视觉美学方面的决策，如配色方案或字体选择。
核心特点
与通用代码助手相比，它深度聚焦于CSS领域，能精准诊断如`z-index`堆叠上下文、`position: sticky`失效、布局抖动（CLS）等复杂且具体的CSS问题，并提供现代CSS解决方案，如容器查询、逻辑属性和`:has()`选择器。
注意事项
不适用于视觉设计美学决策，如色彩搭配、间距比例或字体选择。
常见问题
如何解决z-index设置了但没效果的问题？
通常与堆叠上下文有关，请检查父元素是否创建了新的堆叠上下文，或尝试调整`position`属性。
怎么让一个元素在滚动时始终固定在视口顶部？
使用`position: sticky; top: 0;`，并确保其父容器有足够的高度且未设置`overflow: hidden`。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-7/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-7/raw/index.md（查看排版版本）