用途
该技能用于在审查样式表、组件样式和响应式行为时，检查并推动使用容器查询（container queries）实现组件级响应式。它关注的核心问题是：媒体查询响应的是视口宽度，这使组件变得依赖上下文——一个为三列网格设计的卡片，放到两列网格或侧边栏中可能会布局错乱。容器查询让组件根据其容器给予的空间来布局自身，从而使组件在任何布局上下文中都真正可复用。
主要能力
- 检查：在 CSS 中查找带有媒体查询断点的组件，判断改用容器查询是否能让它们在不同布局上下文中更可复用。
- 修复：使用 container-type 和 @container，将组件从基于媒体查询的响应式转换为基于容器查询的响应式。
- 解释：说明容器查询与媒体查询的区别、为什么容器查询能带来更好的组件复用，以及如何建立容器与查询之间的关系。
- 代码审查：审查与“使用容器查询实现组件级响应式”相关的样式表、组件样式和响应式状态，指出在渲染 UI 中违反该规则的具体选择器、声明或断点。
使用方式
该技能以规则形式提供，包含快速参考、检查、修复、解释和代码审查等条目。快速参考要点包括：容器查询响应的是父容器的大小而非视口；在父容器上设置 container-type: inline-size 以启用容器查询；使用 @container 规则编写在容器断点处激活的样式；容器查询使组件可在侧边栏、网格和全宽区域中复用。完整的实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/en/rules/css/container-queries。
适用场景
适用于审查样式表、组件样式和响应式行为，尤其是需要让组件在侧边栏、网格、全宽区域等不同布局上下文中复用的场景。
限制
资料未提供该技能的具体安装命令、支持的框架版本、收费或价格信息，这些内容暂未提供。