CSS第一代理技能
将任何AI代理转化为CSS第一专家。使用尖端CSS功能的零JavaScript解决方案（2021-2026）。
它的作用
这项技能使AI代理对现代CSS有了深入的了解，因此他们只提供CSS解决方案，而不是使用JavaScript。它包括：
- 7行为准则 --仅CSS强制执行、逻辑属性、现代功能、语义意图分析、框架检测、浏览器支持、渐进式增强
- 29个生产就绪的CSS演示 --布局、响应、容器查询、动画、主题化、定位、交互、视觉、特异性、功能和值
- 实时MDN集成 --按需获取当前基线状态和浏览器支持数据
特性
| 能力 | 描述 |
|---|---|
| 语义意图识别 | 检测布局、动画、间距、响应、视觉和交互意图 |
| 框架检测 | 自动检测React、Vue、Angular、Svelte、Tailwind、Bootstrap |
| 逻辑属性优先 | 优先级 inline-size, margin-inline等国际化 |
| 现代CSS（2021-2026） | 容器查询、视图转换、滚动驱动/触发动画， light-dark()锚定位， @layer, @scope, if(), @function，先进 attr(), contrast-color()，网格车道 |
| 浏览器支持意识 | 每个建议都包括基线状态（广泛可用/新可用/有限/实验） |
| 渐进式增强 | 核心功能优先，增强功能分层 @supports |
快速参考
| 用户意图 | CSS解决方案 | 演示 |
|---|---|---|
| 中心元素 | 柔性箱/网格 | css-demos/layout/centering-logical.css |
| 对齐网格 | 子网格 | css-demos/layout/subgrid.css |
| 家长选择 | :has() | css-demos/layout/has-selector.css |
| 组件样式 | CSS嵌套 | css-demos/layout/css-nesting.css |
| 砌体布局 | 网格车道 | css-demos/layout/grid-lanes-masonry.css |
| 响应式布局 | 媒体查询（范围语法） | css-demos/responsive/media-queries.css |
| 特征检测 | @supports | css-demos/responsive/supports-rule.css |
| 容器响应 | 容器大小查询 | css-demos/container/size-queries.css |
| 组件主题化 | 容器样式查询 | css-demos/container/style-queries.css |
| 粘滞检测 | 滚动状态查询 | css-demos/container/scroll-state-queries.css |
| 工具提示箭头翻转 | 锚定容器查询 | css-demos/container/anchored-queries.css |
| 黑暗模式 | light-dark() | css-demos/theming/light-dark-function.css |
| 页面转换 | 视图转换（+元素范围） | css-demos/animation/view-transitions.css |
| 滚动效果 | 滚动驱动动画 | css-demos/animation/scroll-driven.css |
| 滚动显示 | 滚动触发动画 | css-demos/animation/scroll-triggered.css |
| 进入/退出动画 | @starting-style | css-demos/animation/starting-style.css |
| 工具提示 | 锚定位 | css-demos/positioning/anchor-positioning.css |
| 旋转木马/标签 | CSS旋转木马 | css-demos/interaction/css-carousel.css |
| 弹出/下拉 | 弹出API | css-demos/interaction/popover.css |
| 触摸与指针 | 悬停媒体查询 | css-demos/interaction/hover-media-queries.css |
| 表单验证 | :user-valid / :user-invalid | css-demos/visual/form-validation.css |
| 颜色变化 | color-mix() | css-demos/visual/color-mix.css |
| 现代造型 | corner-shape | css-demos/visual/corner-shape.css |
| 条件值 | if() | css-demos/functions/css-if-function.css |
| 可重用逻辑 | @function | css-demos/functions/custom-functions.css |
| 数据驱动风格 | 高级 attr() | css-demos/functions/advanced-attr.css |
| 自动对比文本 | contrast-color() | css-demos/functions/contrast-color.css |
| 串级控制 | @layer | css-demos/specificity/cascade-layers.css |
| 范围样式 | @scope | css-demos/specificity/scope-rule.css |
结构
SKILL.md # Skill definition (loaded by agents)
references/
rules/ # 7 behavioral rules
live-mdn-fetch.md # Live MDN data fetch workflow
css-demos/
INDEX.md # Full catalog with MDN links & baseline status
layout/ # Centering, spacing, subgrid, :has(), nesting, grid lanes
responsive/ # Media queries (range syntax), @supports
container/ # Size, style, scroll-state, anchored queries
animation/ # View transitions, scroll-driven, scroll-triggered, @starting-style
theming/ # Dark mode with light-dark()
positioning/ # Anchor positioning
interaction/ # CSS Carousel, popover, hover media queries
visual/ # Form validation, color-mix(), corner-shape
functions/ # if(), @function, advanced attr(), contrast-color()
specificity/ # @layer cascade layers, @scope scoped styles基线状态指标
- 🟢 广泛可用的 （95%+）——生产安全
- 🔵 最新可用 （85-94%）-最近稳定，验证目标浏览器
- 🟡 限量供应 （70-84%）-渐进增强使用
- 🟣 实验性 （\<70%）——尖端，谨慎使用
许可证
麻省理工学院