CSS
专业CSS调试与布局修复助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：专业CSS调试与布局修复助手 完整的 Skill 内容见：https://321skill.com/skills/css-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的flex容器内两个子项，一个固定宽度，另一个自适应剩余空间，但自适应项里的文字溢出导致容器撑大，页面出现横向滚动条。请帮我修复。' 它会分析你的代码，建议给flex项设置min-width:0或overflow:hidden，并解释flex-shrink和min-width的冲突原理。
介绍
解决什么问题
CSS布局跑偏、溢出、z-index失效、sticky不粘、内容加载抖动（CLS）、过渡卡顿、字体闪烁、模态框被遮挡、表格列头固定、打印样式错乱等一切CSS疑难杂症。也处理从零开始写样式表（reset与基础层）、居中、容器查询、clamp()流体排版、设计令牌与暗色模式、RTL与逻辑属性，以及用:has()、@layer、嵌套重构旧样式。
怎么用 直接描述你遇到的具体问题，比如“flex布局下子元素不换行，溢出容器”或“暗色模式切换后部分文字颜色未变”。该技能会分析你的CSS代码，定位根源，给出修复方案，并解释为什么。支持交互式调试，你可以逐步提供修改后的效果反馈。
适合谁 前端开发工程师、UI设计师、全栈开发者、需要快速解决CSS问题的任何人。尤其适合那些被跨浏览器兼容性、层叠上下文、性能优化困扰的开发者。
使用建议 尽量提供完整的上下文：HTML结构、当前CSS、浏览器环境、预期效果。如果遇到样式冲突，可配合“检查元素”截图。该技能不擅长视觉设计品味（如配色、间距、字体选择），更适合纯技术层面的调试与优化。
核心特点
不同于通用代码助手，该技能专注于CSS的调试流程和现代CSS特性（层叠层、容器查询、逻辑属性等），能深入解释层叠上下文、包含块、渲染性能等底层原理，而非仅给出样式片段。
注意事项
不处理视觉设计决策（如调色板、间距尺度、字体选择），也不适合需要大量创意视觉样式的场景。
常见问题
z-index不生效怎么办？
检查是否未设置position值（static除外），并确认层叠上下文是否被父级限制。可尝试提升层级或使用isolation: isolate。
position: sticky不生效？
确保父容器没有overflow: hidden/auto/scroll，且sticky元素在滚动容器内。同时检查top/bottom等偏移值是否设置。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-4/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-4/raw/index.md（查看排版版本）