CSS Styling Skill 是一个用于协助编写现代、可维护 CSS 的技能，适用于为网站设置样式或修复 CSS 相关问题时参考。其定位是围绕布局、响应式设计、动画与 CSS 架构提供成体系的最佳实践指引。
主要能力：
-
现代 CSS Reset：统一 box-sizing，清除默认 margin 和 padding，设置 html 文本尺寸调整、body 最小高度与行高、字体平滑，并将图片、视频、canvas、svg 设为块级且最大宽度 100%，表单元素继承字体，标题与段落启用自动换行。
-
CSS 自定义属性（变量）：在 :root 中定义颜色（主色、深色、次级、成功、错误）、字体（无衬线、等宽）、字号（xs 至 3xl）、间距（1 至 16）、圆角（sm 至 full）、阴影（sm、md、lg）和过渡时长等设计令牌，并通过 prefers-color-scheme 提供深色模式变量。
-
Flexbox 布局模式：居中、两端对齐、垂直堆叠、自动换行等常用布局类。
-
Grid 布局模式：自动填充响应式网格、固定三列、侧边栏布局和圣杯布局。
-
响应式设计：移动优先的断点（640px、1024px、1280px），容器查询，以及使用 clamp() 实现流体排版。
-
常见组件：按钮（含主按钮、悬停态、focus-visible 焦点样式）、卡片（含卡片主体与标题）、表单输入框（含聚焦、无效状态样式）。
-
动画：淡入（fadeIn）与上滑（slideUp）关键帧及对应类，并通过 prefers-reduced-motion 尊重用户的减少动效偏好。
-
工具类：视觉隐藏（无障碍）、单行文本截断、两行截断。
使用方式：该技能以“撰写 CSS 时的操作规范与代码片段”形式提供。在编写 CSS 时按其中的 Reset、变量、布局、组件、动画等模块化指引应用；涉及 WordPress 时，还提供样式入队（wp_enqueue_style）、RTL 支持（wp_style_add_data 与逻辑属性）、区块编辑器样式（add_editor_style、wp_enqueue_block_style）、theme.json 集成及管理后台兼容的写法。
最佳实践与性能提示：使用自定义属性做主题化；移动优先响应式；避免 !important；使用逻辑属性（margin-inline、padding-block）；优先用类而非 ID 设置样式；采用 BEM 或类似命名约定；减少嵌套深度；分组相关属性；避免昂贵选择器；谨慎使用 will-change；动画优先使用 transform 与 opacity；对隔离组件使用 contain；延迟加载非关键 CSS。
WordPress 专项：类名加主题或插件前缀避免冲突；用 wp_add_inline_style() 输出动态 CSS；避免 !important，改用优先级；通过逻辑属性或 RTL 样式表支持 RTL；在 Gutenberg 编辑器中测试；尽量用 theme.json 提供设计令牌；生产环境用构建工具压缩。
适用场景：为网站或主题编写与整理 CSS，建立设计令牌与主题系统，实现响应式布局与常见 UI 组件，为组件添加动画并兼顾无障碍动效偏好，以及处理 WordPress 主题与插件的 CSS 集成。
限制：以上内容均为 CSS 编写规范与代码示例，不涉及具体的收费、价格或平台信息，资料中暂未提供相关内容。