[{"data":1,"prerenderedAt":359},["ShallowReactive",2],{"docs-guides\u002Fagent-skill-zh":3},{"id":4,"title":5,"body":6,"description":16,"extension":352,"meta":353,"navigation":354,"path":355,"seo":356,"stem":357,"__hash__":358},"docs\u002Fzh\u002Fguides\u002Fagent-skill.md","Agent Skill 指南",{"type":7,"value":8,"toc":340},"minimark",[9,13,17,21,52,56,59,94,101,104,107,115,118,124,128,132,135,154,161,246,249,260,264,279,282,306,309,336],[10,11,5],"h1",{"id":12},"agent-skill-指南",[14,15,16],"p",{},"A@UI 提供可安装的 Agent Skill，用来辅助 AI Coding 完成 A@UI 的开发与集成。它把协议规则、前端运行时接入方式、组件 manifest 约束和常见错误放进 Agent 可读取的上下文里，减少临时提示词遗漏和错误实现。",[18,19,20],"h2",{"id":20},"适用场景",[22,23,24,28,31,46,49],"ul",{},[25,26,27],"li",{},"在已有前端应用中接入 A@UI 前端运行时",[25,29,30],{},"让 Agent 根据组件 manifest 注册组件能力",[25,32,33,34,38,39,38,42,45],{},"生成或检查 ",[35,36,37],"code",{},"render","、",[35,40,41],{},"update",[35,43,44],{},"destroy"," 命令流",[25,47,48],{},"编写后端 SSE、WebSocket 或 HTTP 流式输出时遵守 A@UI 协议",[25,50,51],{},"排查 widgetId、params、组件名和生命周期支持不匹配的问题",[18,53,55],{"id":54},"安装-skill","安装 Skill",[14,57,58],{},"在项目中通过 skills CLI 安装：",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-bash shiki shiki-themes one-dark-pro","npx skills add mqhe2007\u002Fa-at-ui --skill a-at-ui\n","bash","",[35,67,68],{"__ignoreMap":65},[69,70,73,77,81,84,87,91],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"sVbv2","npx",[69,78,80],{"class":79},"subq3"," skills",[69,82,83],{"class":79}," add",[69,85,86],{"class":79}," mqhe2007\u002Fa-at-ui",[69,88,90],{"class":89},"sVC51"," --skill",[69,92,93],{"class":79}," a-at-ui\n",[14,95,96,97,100],{},"安装后，支持 Skill 的 Coding Agent 可以在处理 A@UI 相关任务时读取 ",[35,98,99],{},"skills\u002Fa-at-ui\u002FSKILL.md","、JSON Schema 和参考文档。",[18,102,103],{"id":103},"推荐使用方式",[14,105,106],{},"向 Agent 描述任务时，明确说明这是 A@UI 集成任务，并让它优先使用已安装的 A@UI Skill。例如：",[60,108,113],{"className":109,"code":111,"language":112,"meta":65},[110],"language-text","使用 A@UI Skill 帮我在当前前端应用中接入 A@UI。请安装官方 npm 包，接入前端运行时，读取组件 manifest，并消费后端 SSE 命令流。\n","text",[35,114,111],{"__ignoreMap":65},[14,116,117],{},"如果你只需要后端输出命令流，可以这样描述：",[60,119,122],{"className":120,"code":121,"language":112,"meta":65},[110],"使用 A@UI Skill 帮我实现一个 SSE 接口。后端不安装 A@UI SDK，只输出符合 commands.schema.json 的 render、update、destroy 命令。\n",[35,123,121],{"__ignoreMap":65},[18,125,127],{"id":126},"skill-会约束什么","Skill 会约束什么",[129,130,131],"h3",{"id":131},"前端集成",[14,133,134],{},"前端集成必须安装并使用官方 npm 包提供的前端运行时，不应该在业务项目里重新实现 widget 管理、命令解析、事件封装或销毁清理。",[60,136,138],{"className":62,"code":137,"language":64,"meta":65,"style":65},"npm install a-at-ui vue\n",[35,139,140],{"__ignoreMap":65},[69,141,142,145,148,151],{"class":71,"line":72},[69,143,144],{"class":75},"npm",[69,146,147],{"class":79}," install",[69,149,150],{"class":79}," a-at-ui",[69,152,153],{"class":79}," vue\n",[14,155,156,157,160],{},"Vue 应用当前使用 ",[35,158,159],{},"a-at-ui\u002Fruntime\u002Fvue"," 入口：",[60,162,166],{"className":163,"code":164,"language":165,"meta":65,"style":65},"language-ts shiki shiki-themes one-dark-pro","import type { AAtUIManifest } from 'a-at-ui';\nimport {\n  consumeAAtUIStream,\n  createAAtUIAdapter,\n  type AAtUIVueRegistry,\n} from 'a-at-ui\u002Fruntime\u002Fvue';\n","ts",[35,167,168,197,205,214,222,233],{"__ignoreMap":65},[69,169,170,174,177,181,185,188,191,194],{"class":71,"line":72},[69,171,173],{"class":172},"seHd6","import",[69,175,176],{"class":172}," type",[69,178,180],{"class":179},"sn6KH"," { ",[69,182,184],{"class":183},"sVyAn","AAtUIManifest",[69,186,187],{"class":179}," } ",[69,189,190],{"class":172},"from",[69,192,193],{"class":79}," 'a-at-ui'",[69,195,196],{"class":179},";\n",[69,198,200,202],{"class":71,"line":199},2,[69,201,173],{"class":172},[69,203,204],{"class":179}," {\n",[69,206,208,211],{"class":71,"line":207},3,[69,209,210],{"class":183},"  consumeAAtUIStream",[69,212,213],{"class":179},",\n",[69,215,217,220],{"class":71,"line":216},4,[69,218,219],{"class":183},"  createAAtUIAdapter",[69,221,213],{"class":179},[69,223,225,228,231],{"class":71,"line":224},5,[69,226,227],{"class":172},"  type",[69,229,230],{"class":183}," AAtUIVueRegistry",[69,232,213],{"class":179},[69,234,236,239,241,244],{"class":71,"line":235},6,[69,237,238],{"class":179},"} ",[69,240,190],{"class":172},[69,242,243],{"class":79}," 'a-at-ui\u002Fruntime\u002Fvue'",[69,245,196],{"class":179},[129,247,248],{"id":248},"后端集成",[14,250,251,252,255,256,259],{},"后端不需要 A@UI 后端 SDK。它只需要输出符合协议的 JSON 命令。如果使用 SSE，每条命令写成一行 ",[35,253,254],{},"data: \u003Cjson>","，并用 ",[35,257,258],{},"data: [DONE]"," 结束。",[129,261,263],{"id":262},"组件-manifest","组件 manifest",[14,265,266,267,270,271,274,275,278],{},"Agent 应读取 ",[35,268,269],{},"a-at-ui.manifest.json","，确保命令里的 ",[35,272,273],{},"component"," 名称、",[35,276,277],{},"params"," 结构、事件和生命周期操作与组件库声明一致。",[18,280,281],{"id":281},"常见收益",[22,283,284,287,297,300,303],{},[25,285,286],{},"避免 Agent 自己实现一套前端运行时",[25,288,289,290,293,294,296],{},"避免把 ",[35,291,292],{},"widgetId"," 放进 ",[35,295,37],{}," 命令",[25,298,299],{},"避免输出协议外的命令类型或非 JSON 数据",[25,301,302],{},"避免组件名、manifest 和 registry 不一致",[25,304,305],{},"让接入步骤更接近官方文档和包导出",[18,307,308],{"id":308},"相关文档",[22,310,311,318,324,330],{},[25,312,313],{},[314,315,317],"a",{"href":316},"\u002Fdocs\u002Fguides\u002Ffrontend-vue","Vue 前端接入指南",[25,319,320],{},[314,321,323],{"href":322},"\u002Fdocs\u002Fguides\u002Fbackend-nodejs","Node.js 后端接入指南",[25,325,326],{},[314,327,329],{"href":328},"\u002Fdocs\u002Fguides\u002Fcomponent-manifest","组件库 Manifest",[25,331,332],{},[314,333,335],{"href":334},"\u002Fdocs\u002Fprotocol\u002Fcommands","命令协议",[337,338,339],"style",{},"html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .subq3, html code.shiki .subq3{--shiki-default:#98C379}html pre.shiki code .sVC51, html code.shiki .sVC51{--shiki-default:#D19A66}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}",{"title":65,"searchDepth":199,"depth":199,"links":341},[342,343,344,345,350,351],{"id":20,"depth":199,"text":20},{"id":54,"depth":199,"text":55},{"id":103,"depth":199,"text":103},{"id":126,"depth":199,"text":127,"children":346},[347,348,349],{"id":131,"depth":207,"text":131},{"id":248,"depth":207,"text":248},{"id":262,"depth":207,"text":263},{"id":281,"depth":199,"text":281},{"id":308,"depth":199,"text":308},"md",{},true,"\u002Fzh\u002Fguides\u002Fagent-skill",{"title":5,"description":16},"zh\u002Fguides\u002Fagent-skill","xBJ2Yn9yK6pyJsnJbTQ0e6WhqPvhDVozE4rqlMqd0jA",1779263315970]