用途：在构建或修改 WebUI 应用时使用本技能。核心原则是模板即 UI，所有结构都写在 .html 中，禁止使用 document.createElement、innerHTML、insertAdjacentHTML 或 appendChild，显示隐藏用 <if>、重复用 <for>，唯一例外是挂载懒加载组件。CSS 负责全部样式与动画，禁止 el.style.x、classList.toggle 或 adoptedStyleSheets，改为绑定 ?data-active="{{expr}}" 并在 CSS 中选择 [data-active]，动画使用 transition、@keyframes、@starting-style，不用 element.animate() 或 JS 动画库。JavaScript 为可选项，只有当组件含 @event、w-ref 命令式 API、生命周期钩子、fetch 或公开方法 API 时才需要 .ts 文件。优先使用 Web 平台能力，如 <dialog> 代替 div 模态、popover 代替 JS 下拉、<details> 代替 JS 手风琴。每条模板绑定都必须在服务端状态 JSON 中存在，缺失键会静默渲染为空。HTML、CSS、TypeScript 分为独立文件，不用 JSX、CSS-in-JS，模板中不写 JS。
用法：webui build ./src --out ./dist --plugin=webui 构建；webui serve ./src --state ./data/state.json --plugin=webui --watch 启动开发服务。文本绑定是路径查找，{{count}} 与 {{user.name}} 解析点分状态路径，比较应放在条件中，如 <if condition="count > 0"> 或 ?active="{{section == 'guide'}}"。运算符支持 ==、!=、<、>、<=、>=、&&、||、!，禁止三元、函数调用、算术、混用 && 与 || 及超过 5 个逻辑运算符。w-ref 必须带花括号，如 w-ref="{inputEl}"，仅用于焦点、滚动、showModal 等命令式 API，不用于读取状态。
限制与细节：组件默认使用 Shadow DOM，--dom light 可改为全局 Light DOM；需要原生 <slot> 投影、Shadow 封装或 :host 选择器时使用 <template shadowrootmode="open">。<for> 循环内的组件不继承循环变量，需通过属性传值。@attr({ mode: 'boolean' }) 表示 true/false，存在为 true、缺失为 false，禁止字符串 "false"。完整参考见 docs/ai.md，生成任何 WebUI 代码前应先阅读该文件。