CSS
CSS编写与调试专家，解决布局、样式和性能问题
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：CSS。 它的用途是：CSS编写与调试专家，解决布局、样式和性能问题 完整的 Skill 内容见：https://321skill.com/skills/css-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的flex布局在移动端溢出屏幕了，请帮我修复。' AI会分析你的CSS代码，诊断出可能是子元素未设置flex-shrink或flex-wrap未启用，并给出修改后的代码。另外，
对AI说：'z-index没效果，一个弹窗被遮住了。' AI会检查父元素的堆叠上下文，并建议移除不必要的transform或调整z-index层级。
介绍
CSS 样式经常出现各种意料之外的问题：布局溢出、z-index 失效、页面横向滚动、sticky 定位不生效、文本截断失败、样式冲突需要 !important、加载时内容跳动（CLS）、过渡动画卡顿、字体闪烁、模态框被遮挡、表单控件难以统一风格、表格需要固定表头、打印样式错乱，以及同一个样式在 Chrome 正常但 Safari 异常。本 Skill 专为解决这些 CSS 痛点而设计，覆盖从基础到现代 CSS 的广泛场景。
使用时，只需向 AI 描述你遇到的 CSS 问题或目标，例如“flex 布局溢出”、“grid 布局在窄屏下错位”、“z-index 不起作用”，AI 会分析你的 CSS 代码，诊断根因，并给出可执行的修复方案。它也支持从零开始搭建样式表（重置层、基础层）、实现居中、容器查询、使用 clamp() 实现流体排版、设计令牌与暗色模式、RTL 与逻辑属性，以及用 :has()、@layer 和嵌套规则现代化老旧样式表。
适合前端开发、全栈开发以及需要独立处理 CSS 问题的 UI 设计师。无论是日常样式调试、性能优化，还是重构遗留样式，都能从中受益。对于初学者，它可以帮助理解 CSS 工作原理；对于资深开发者，它可以快速定位疑难杂症，提升效率。
使用建议：请尽可能具体地描述问题现象和上下文（如浏览器、设备、屏幕尺寸、相关选择器），并提供可复现的完整 CSS 片段。注意本 Skill 专注于 CSS 技术实现，不涉及视觉设计品味（如配色方案、间距尺度、字体选择），这些需要你自行决策。
核心特点
本 Skill 覆盖了从经典 CSS 问题（布局溢出、z-index 堆叠）到现代 CSS 特性（容器查询、clamp()、:has()、@layer、嵌套）的完整调试与编写能力，且明确不处理视觉设计品味，专注于技术实现。
注意事项
不适合处理视觉设计品味相关的决策，如配色方案、间距尺度、字体选择等。
常见问题
z-index 设置了但不起作用怎么办？
检查父元素是否创建了新的堆叠上下文（如设置了 opacity、transform、filter），或检查 z-index 是否在同一个层叠上下文中比较。
flex 布局子元素溢出容器不换行？
检查是否设置了 flex-wrap: nowrap，改为 wrap；或检查子元素 min-width 是否过大导致无法收缩。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/css-x-3/raw/index.md 读取 CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/css-x-3/raw/index.md（查看排版版本）