CSS
一个专注于编写和调试CSS代码的AI助手。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：一个专注于编写和调试CSS代码的AI助手。 完整的 Skill 内容见：https://321skill.com/skills/css-x-9/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的页面在移动端出现横向滚动条，检查发现一个div的宽度超出了视口，怎么办？'，它会分析可能的原因（如固定宽度、负边距、绝对定位元素溢出），并提供具体的CSS修改建议，例如使用`max-width: 100%`或`overflow-x: hidden`（需谨慎）等。或者问：'如何用CSS Grid实现一个三栏布局，中间栏自适应，两侧固定200px？'，它会给出完整的Grid容器和项目代码。
介绍
这个Skill是一个专业的CSS问题诊断与解决方案生成工具。它专门解决前端开发中遇到的各种棘手的样式和布局问题，例如布局错乱、元素堆叠顺序失效、响应式断点设置不当、渲染性能不佳等。
当你在开发中遇到诸如position: sticky不生效、页面出现横向滚动条、z-index无效、样式层叠被破坏、或者样式在Chrome正常但在Safari异常等问题时，可以直接向它描述现象，它会分析并提供具体的CSS代码修复方案。
它非常适合前端开发、全栈开发以及UI设计师在实现视觉稿时使用，能帮助快速定位和解决CSS相关的技术难题，提升开发效率。
建议在提问时尽可能详细地描述问题现象、期望效果以及已尝试过的方案，这有助于获得更精准的解答。注意，它不负责视觉美感（如配色、字体选择）等主观设计决策，而是专注于解决技术实现问题。
核心特点
与通用代码助手相比，它深度聚焦于CSS领域，能精准诊断复杂的布局和渲染问题（如CLS、堆叠上下文、浏览器兼容性），并提供从基础重置到现代特性（如容器查询、`:has()`选择器）的完整解决方案。
注意事项
不适用于视觉设计审美、色彩搭配、字体选择等主观性设计决策。
常见问题
如何解决元素z-index不生效的问题？
检查元素的position属性是否非static，并排查其父元素是否创建了新的堆叠上下文。
如何实现一个响应式布局？
根据需求选择Flexbox或Grid布局，并结合媒体查询或容器查询设置断点。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-9/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-9/raw/index.md（查看排版版本）