用容器查询打造可复用自适应组件

是什么 这条推文发布了 Florian 的首个 Agent skill：Prefer Container Queries。它强调组件应根据自身容器宽度响应，而不是只根据浏览器视口变化。从已给信息看，flornkm/skills 是一个仍在开发中的设计与工程指导 skills 集合；材料没有提供目录、运行时、依赖或测试信息，因此不能进一步还原仓库架构。

核心设计 容器查询把响应式判断从页面级下沉到组件级，使同一组件放入主栏、侧栏、网格或嵌套区域时都能自行适配。画面用宽版人员列表、窄版音乐卡片和指标卡展示了不同容器尺寸下的模块化界面。相比让 Agent 为每种尺寸生成两套组件，这种约束能减少分支与重复代码，提高复用性。

关键洞察 它的价值不仅是一个 CSS 技巧，也是一条应注入代码生成流程的设计原则：先判断组件的真实容器，再选择布局策略。对 Agent 工程而言，这能修正模型偏好媒体查询的惯性，提升生成前端的可组合性。

边界与风险 容器查询不替代页面级媒体查询，也不能自动解决内容溢出、断点设计、可访问性和浏览器兼容问题。需要明确 containment 边界，并测试嵌套、动态尺寸和极窄容器场景。由于仓库标注为 WIP，其规则覆盖范围与验证质量仍需实际查看代码后确认。