CSS
专业CSS编写与调试助手，解决布局与样式难题
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：专业CSS编写与调试助手，解决布局与样式难题 完整的 Skill 内容见：https://321skill.com/skills/css-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的flex布局在换行时溢出了，容器宽度固定，子项flex-basis: 200px，但显示不全'，它会检查flex-wrap、flex-basis和容器宽度，指出需要设置flex-wrap: wrap并调整flex-basis或添加gap，然后给出修复后的CSS代码。
介绍
本Skill专注于解决CSS开发中的各种实际问题。当布局溢出、z-index失效、页面横向滚动、position: sticky不生效、文本截断异常、样式层叠混乱、加载时内容跳动（CLS）、过渡卡顿、字体闪烁、模态框或下拉菜单被遮挡、表单控件需要重写样式、表格需要固定表头、打印样式错乱，或同一样式在Chrome正常但在Safari异常时，都可以使用本Skill进行诊断和修复。
使用时，只需描述你遇到的具体CSS问题或需求，Skill会分析现有代码，给出定位原因、修复方案和优化后的代码示例。支持从零开始构建样式表（重置和基础层）、居中布局、容器查询、使用clamp()实现流体排版、设计令牌和暗色模式、RTL与逻辑属性，以及使用:has()、@layer、嵌套等现代CSS特性对旧样式表进行现代化改造。
适合前端开发工程师、UI设计师、全栈开发者等需要频繁处理CSS的人员。尤其适合那些在复杂项目中遇到跨浏览器兼容性、渲染性能、响应式布局、主题切换等场景的开发者。
使用建议：将问题描述得越具体越好，比如提供出现问题的HTML结构、当前CSS代码、期望效果和实际表现。Skill会返回包含注释的修复代码，并能解释每个改动的原因。注意，本Skill不涉及视觉设计品味（如配色方案、间距比例、字体选择），专注于技术实现层面的正确性和性能优化。
核心特点
与通用代码调试Skill不同，本Skill专精CSS领域，不仅覆盖常见布局溢出、z-index失效等问题，还能处理容器查询、设计令牌、暗色模式、:has()、@layer等现代CSS特性，并支持从零开始构建样式表，覆盖了从基础到前沿的CSS全栈能力。
注意事项
不适合用于视觉设计品味决策（如调色板、间距比例、字体选择），也不处理后端逻辑、数据库或非CSS相关的代码问题。
常见问题
为什么z-index设置了但元素还是被遮挡？
可能是父元素未创建堆叠上下文（如设置了position: relative），或子元素z-index在父容器内比较。Skill会检查堆叠上下文并给出修复建议。
position: sticky不生效怎么办？
常见原因：父元素overflow设为hidden/scroll/auto，或元素没有设置top/bottom等定位值。Skill会分析布局并给出具体修复。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-5/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-5/raw/index.md（查看排版版本）