用途
该技能是一个统一的前端知识库，覆盖 CSS 架构、UX 心理学、UI 组件、独特美学与界面设计生成。其主体内容是一份现代 CSS 参考，用于指导编写现代、健壮且高效的 CSS。
主要能力
资料按主题给出了大量现代 CSS 能力与代码示例：
- 布局与响应式设计：容器查询（container、@container、范围语法、容器单位 cqi/cqb/cqw/cqh）、锚定容器查询、媒体查询范围语法、Grid 增强（Subgrid、Masonry）。
- 颜色与主题：color-scheme 与 light-dark()、现代色彩空间（OKLCH、Display-P3、in oklch 渐变）、颜色操作（color-mix()、相对颜色语法）、accent-color。
- 排版：text-wrap: balance / pretty、text-box 修剪、流体排版 clamp()、动态视口单位 dvh/svh/lvh。
- 动画与动效：滚动驱动动画（animation-timeline: scroll()/view()）、视图过渡（@view-transition、view-transition-name、view-transition-class、嵌套视图过渡组）、linear() 缓动、@starting-style。
- 自定义属性与高级特性：@property、数学函数与 calc-size()、树计数函数（即将推出）、if() 条件 CSS（即将推出）。
- 架构与组织：级联层 @layer、@import layer()、嵌套层。
- 交互组件：Dialog（含 commandfor/command、closedby）、Popover（含 popover=hint）、锚点定位（anchor-name、position-anchor、position-area、position-try-fallbacks）、独占手风琴（details name）、可定制 select（appearance: base-select）、search 元素。
- 表单增强：field-sizing: content、:user-invalid / :user-valid、select 中的 hr。
- 视觉特效：滚动条样式（scrollbar-color、scrollbar-width）、shape() 函数、corner-shape。
- 渐进增强模式：@supports 特性检测、尊重用户偏好（prefers-reduced-motion、prefers-color-scheme、prefers-contrast）。
- Baseline：解释 Widely Available、Newly Available、Limited Availability 三种状态，并给出检查方式（web-features-explorer、caniuse、MDN、web.dev）。
资料还包含一个综合运用多种现代 CSS 特性的卡片组件完整示例（含 CSS 与 HTML），以及关键帧动画。
使用方式
资料给出的使用准则包括：
- 优先稳定性：生产代码推荐 Newly Available 或 Widely Available 的特性；Limited Availability 特性应配合渐进增强、优雅降级或 @supports，或询问用户如何处理。
- 使用 Web 平台：布局、动画与交互优先采用标准 CSS 方案而非 JavaScript 库（例如用 CSS Masonry 而非 Masonry.js，用 Popover API 而非自定义 tooltip 脚本）。
- 代码风格：新调色板使用现代色彩空间（oklch）。
- 始终检查 Baseline 状态，对前沿特性使用 @supports，并通过媒体查询尊重用户偏好。
适用场景
适用于需要编写或审查现代 CSS、构建响应式布局、设计颜色与主题系统、实现动画与视图过渡、组织 CSS 架构、构建交互组件与表单、以及进行渐进增强与浏览器兼容性判断的前端开发场景。
限制
资料未提供该技能的安装命令、收费方式、价格、平台支持范围或具体使用步骤，这些信息暂未提供。部分特性标注为“即将推出”或处于提案/开发阶段（如树计数函数、if() 条件 CSS、Masonry 的两种提案），其可用性需以实际浏览器支持为准。