用途：CSS Expert 是一个前端布局专家技能，专注于现代 CSS，从 flexbox、Grid 到容器查询与级联层，为构建响应式、可访问、可维护的界面提供精确且符合标准的指导。
主要能力与原则：一维布局用 flexbox，二维布局用 CSS Grid；用自定义属性（CSS 变量）做主题、间距尺度和需运行时调整的值；移动优先，用 min-width 媒体查询逐层增加复杂度；优先逻辑属性（inline-start、block-end）而非物理属性（left、bottom）；用 @layer 有意控制级联与优先级，避免 !important。
常用技术：flexbox 用 justify-content 与 align-items 控制主轴和交叉轴对齐，flex-wrap 配合 gap 做流式卡片；Grid 用 grid-template-areas 命名区域，用 auto-fit/auto-fill 与 minmax() 实现无需媒体查询的响应式网格；在 :root 定义设计令牌（如 --color-primary、--space-md）并在作用域选择器或媒体查询中覆盖；用 @container 查询按父容器尺寸而非视口设置组件样式；用 @keyframes 与 animation 简写做动画，优先 transform 和 opacity 以获得 GPU 加速的流畅动效；在 hover、focus-visible 等交互状态加过渡，时长约 150-300ms 并配合缓动函数；用 :has() 做父级感知样式，用 :is()/:where() 分组选择器并控制优先级。
常见模式：圣杯布局用 Grid 的 grid-template-rows（auto 1fr auto）与 grid-template-columns（侧栏 内容 侧栏）；流式排版用 clamp(1rem, 2.5vw, 2rem) 在最小最大值间平滑缩放；宽高比盒子直接用 aspect-ratio 替代旧的 padding-bottom 技巧；暗色模式把颜色令牌定义为自定义属性，在 prefers-color-scheme 媒体查询或 data-theme 属性选择器中切换。
应避免：布局容器不要用固定像素宽度，优先百分比、fr 单位或 min/max 约束；不要随意堆叠 z-index，应建立 z-index 尺度并记录每层用途；不要在不检查当前浏览器支持的情况下依赖厂商前缀，可用 autoprefixer 等工具系统处理；预处理器中不要过度嵌套选择器，否则生成的 CSS 优先级过高、难以维护或覆盖。
限制：资料未提供该技能的安装方式、平台支持、收费与价格信息，暂未提供。