用途：在编写、审查或重构 CSS 与 HTML 时，优先选择满足项目浏览器目标的最小原生方案，替换遗留 CSS、JavaScript 驱动的表现、预处理器和布局 hack。
主要能力：提供一组“替换—优先”模式，例如用 grid place-items 或 flex 对齐替代绝对定位居中，用 gap 替代子元素 margin 间距 hack，用 aspect-ratio 替代 padding hack，用逻辑属性替代物理 left/right，用 subgrid 替代重复嵌套网格轨道，用容器查询替代组件媒体查询，用 position: sticky 替代 JavaScript 粘性定位，用 svh/dvh/lvh 替代移动端 100vh，用 :has() 替代 JavaScript 父类切换，用 :where() 降低重置特异性，用 :focus-visible 替代鼠标触发的焦点环，用原生 CSS 嵌套替代 Sass/Less 嵌套，用级联层替代 !important 升级，用 clamp() 替代断点阶梯，用自定义属性、oklch()、color-mix() 替代硬编码颜色，用独立 translate/rotate/scale 替代合并 transform，用 overflow 与 scroll snap 替代简单 JavaScript 轮播，用 dialog、popover、details 替代自定义模态/弹出/折叠，用 overscroll-behavior 替代 JavaScript 滚动链阻止，用 img 加 object-fit 替代背景图承载内容。
使用方式：先检查现有浏览器目标、约定和依赖；在改实现前先识别行为，应用状态与业务逻辑保留在 JavaScript；当原生模式更简单时替换遗留变通方案；对不熟悉或新特性查当前浏览器支持，仅在目标浏览器需要时加简单回退；测试响应式布局、溢出、键盘焦点、缩放、减少动态效果和相关配色方案；运行项目的格式化、lint 和测试。规则包括：可复用组件用容器查询，视口或用户偏好用媒体查询；设计令牌与运行时主题用自定义属性；短标题用 text-wrap: balance，正文用 text-wrap: pretty；优先语义化原生 HTML；保留源顺序、键盘行为、焦点管理、标签、可访问名称和对比度；尊重 prefers-reduced-motion，避免固定高度裁剪放大文字；渐进增强用 @supports；对受限或实验性特性对照 MDN 与项目浏览器目标验证。
限制：未经批准不得用实验性特性替换已测试的生产行为；不要仅为移除少量清晰的 JavaScript 方案而构建复杂 CSS 回退。具体浏览器目标、依赖与测试命令暂未提供。