Official CLI demo

Modern Web Guidance

这段演示直接使用 Chrome 官方 CLI：先搜索某个 Web 开发意图，再取回对应指南。重点不是背 API，而是让开发者看到 AI coding agent 如何被现代 Web 知识和 Baseline 边界纠偏。

terminal

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"

Expected official output

搜索会返回 use case

light-dismiss-a-dialog：用原生 dialog 处理 light dismiss。
animate-to-from-top-layer：用现代 CSS 动画进入/离开 top layer。
declarative-dialog-popover-control：用声明式控制 dialog / popover。

Guided implementation

指南会把 Agent 拉回现代 Web 写法

这个页面用一个可运行的 dialog 动画做对应说明：优先使用原生 <dialog>、 ::backdrop、@starting-style 和 transition-behavior，而不是用大量 JavaScript 重新造弹层。

dialog {
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 220ms;
  transition-behavior: allow-discrete;
}

dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}