Agent Skill 指南

A@UI 提供可安装的 Agent Skill，用来辅助 AI Coding 完成 A@UI 的开发与集成。它把协议规则、前端运行时接入方式、组件 manifest 约束和常见错误放进 Agent 可读取的上下文里，减少临时提示词遗漏和错误实现。

适用场景

在已有前端应用中接入 A@UI 前端运行时
让 Agent 根据组件 manifest 注册组件能力
生成或检查 render、update、destroy 命令流
编写后端 SSE、WebSocket 或 HTTP 流式输出时遵守 A@UI 协议
排查 widgetId、params、组件名和生命周期支持不匹配的问题

安装 Skill

在项目中通过 skills CLI 安装：

npx skills add mqhe2007/a-at-ui --skill a-at-ui

安装后，支持 Skill 的 Coding Agent 可以在处理 A@UI 相关任务时读取 skills/a-at-ui/SKILL.md、JSON Schema 和参考文档。

推荐使用方式

向 Agent 描述任务时，明确说明这是 A@UI 集成任务，并让它优先使用已安装的 A@UI Skill。例如：

使用 A@UI Skill 帮我在当前前端应用中接入 A@UI。请安装官方 npm 包，接入前端运行时，读取组件 manifest，并消费后端 SSE 命令流。

如果你只需要后端输出命令流，可以这样描述：

使用 A@UI Skill 帮我实现一个 SSE 接口。后端不安装 A@UI SDK，只输出符合 commands.schema.json 的 render、update、destroy 命令。

Skill 会约束什么

前端集成

前端集成必须安装并使用官方 npm 包提供的前端运行时，不应该在业务项目里重新实现 widget 管理、命令解析、事件封装或销毁清理。

npm install a-at-ui vue

Vue 应用当前使用 a-at-ui/runtime/vue 入口：

import type { AAtUIManifest } from 'a-at-ui';
import {
  consumeAAtUIStream,
  createAAtUIAdapter,
  type AAtUIVueRegistry,
} from 'a-at-ui/runtime/vue';

后端集成

后端不需要 A@UI 后端 SDK。它只需要输出符合协议的 JSON 命令。如果使用 SSE，每条命令写成一行 data: <json>，并用 data: [DONE] 结束。

组件 manifest

Agent 应读取 a-at-ui.manifest.json，确保命令里的 component 名称、params 结构、事件和生命周期操作与组件库声明一致。

常见收益

避免 Agent 自己实现一套前端运行时
避免把 widgetId 放进 render 命令
避免输出协议外的命令类型或非 JSON 数据
避免组件名、manifest 和 registry 不一致
让接入步骤更接近官方文档和包导出