CSS
专注于CSS代码编写与调试的AI助手，解决布局、样式、性能等前端样式问题。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：专注于CSS代码编写与调试的AI助手，解决布局、样式、性能等前端样式问题。 完整的 Skill 内容见：https://321skill.com/skills/css-x-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的下拉菜单总是被页面上的其他内容挡住，z-index设置得再高也没用，怎么办？’ 它会分析你的代码，指出可能是因为父元素形成了新的堆叠上下文，并给出具体的CSS修改方案，比如检查并调整相关元素的 `position` 和 `isolation` 属性。或者，你可以说：‘我想用CSS Grid实现一个响应式图片画廊，但在移动端布局会错位。’ AI会为你生成健壮的Grid代码，并添加合适的媒体查询或容器查询来确保布局在不同屏幕尺寸下都正确。
介绍
这个Skill是一个专业的CSS问题解决专家，专门处理前端开发中各种棘手的样式和布局问题。它能帮你诊断和修复复杂的CSS Bug，例如布局错乱、元素堆叠顺序（z-index）失效、页面横向滚动、position: sticky 不生效、文本溢出截断失败、样式层叠被破坏或需要滥用 !important、页面加载时内容跳动（CLS）、动画过渡卡顿、字体闪烁、模态框或下拉菜单被遮挡、表单控件需要重设样式、表格需要固定表头、打印样式错误，以及跨浏览器（如Chrome与Safari）兼容性问题。
使用方式非常直接：当你遇到任何CSS相关的难题时，只需向AI描述你遇到的问题、展示相关代码片段或描述你想要实现的效果。AI会分析问题根源，提供具体的CSS代码解决方案、调试步骤和最佳实践建议，帮助你快速定位并修复问题。
它非常适合前端开发、全栈开发和UI设计师等角色，尤其是那些需要频繁与CSS打交道，希望提升样式开发效率和代码质量的开发者。对于正在学习CSS或处理遗留样式代码的开发者来说，它也是一个极佳的学习和现代化改造工具。
使用建议是，尽量提供清晰的问题描述和上下文代码，这样AI能给出更精准的答案。需要注意的是，它专注于CSS的技术实现和问题解决，而非视觉设计的美学判断，如色彩搭配、间距比例或字体选择等主观设计决策。
核心特点
与通用前端开发助手相比，它深度聚焦于CSS领域，能精准诊断和修复一系列具体、复杂且常见的CSS Bug和兼容性问题，并提供从基础布局到现代化特性（如容器查询、CSS嵌套、逻辑属性）的完整解决方案。
注意事项
不适用于涉及视觉设计美感、色彩搭配、字体选择等主观审美决策的场景。
常见问题
如何解决z-index不生效的问题？
AI会检查元素的定位上下文（position属性）、堆叠上下文形成原因，并指导你通过调整定位属性、隔离堆叠上下文或检查父元素层级来修复。
怎么让一个元素在页面滚动时固定（sticky）？
AI会解释 `position: sticky` 的工作原理，检查其父容器的尺寸和溢出设置，确保有足够的滚动空间和正确的阈值，并提供修复代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-8/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-8/raw/index.md（查看排版版本）