CSS
专业解决CSS布局、样式调试与性能优化问题的AI助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：专业解决CSS布局、样式调试与性能优化问题的AI助手。 完整的 Skill 内容见：https://321skill.com/skills/css-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的模态框（modal）总是显示在页面其他内容后面，z-index设置得再高也没用，怎么办？’ 它会分析可能的原因，如父元素设置了transform或opacity导致创建了新的层叠上下文，并给出具体的CSS修复方案。或者，你可以说：‘请帮我用CSS Grid实现一个响应式的产品卡片布局，在移动端单列，平板双列，桌面端三列。’ 它会生成完整的、带媒体查询的CSS代码。
介绍
这个Skill专门用于解决前端开发中遇到的各种CSS疑难杂症。当你的页面布局意外崩溃、元素堆叠顺序错乱、响应式设计失效，或者样式在跨浏览器中出现不一致时，它都能提供精准的诊断和修复方案。
它通过分析你描述的CSS问题，直接生成或修正对应的CSS代码。无论是调试复杂的Flexbox/Grid布局、解决z-index失效、修复内容布局偏移（CLS），还是处理Safari等浏览器的兼容性问题，它都能给出具体、可执行的代码片段和建议。
它主要服务于前端开发、全栈开发和UI设计师等需要与CSS打交道的角色。无论是日常开发中的样式调试，还是从零开始构建现代化的样式体系（如使用容器查询、CSS嵌套、逻辑属性等），它都能显著提升效率。
建议在遇到具体、可描述的CSS问题时使用，例如“为什么我的position: sticky不生效？”或“如何实现一个响应式的网格布局？”。对于涉及视觉审美（如配色方案、字体选择、间距比例）的主观设计决策，它的帮助可能有限。
核心特点
与通用代码助手不同，它深度聚焦于CSS领域，能精准诊断并解决如z-index堆叠、position: sticky失效、跨浏览器兼容性等具体且棘手的CSS问题，并提供符合现代最佳实践（如CSS层、容器查询、逻辑属性）的解决方案。
注意事项
不适用于涉及视觉审美、色彩搭配、字体选择或间距比例等主观设计决策的场景。
常见问题
如何解决position: sticky不生效的问题？
检查父容器是否有overflow: hidden/auto/scroll设置，确保sticky元素在滚动容器内，且指定了top/left/right/bottom值。
如何让元素在页面中水平垂直居中？
现代方案推荐使用Flexbox（父容器设置display: flex; justify-content: center; align-items: center;）或Grid布局。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-2/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-2/raw/index.md（查看排版版本）