# AI交互组件开发Skill

> AI 对话流式渲染、打字机、可视化图表组件的开发模式。当需要开发 AI 对话界面、流式输出渲染、图表可视化等交互组件时使用。

- Skill: `sky-cube/ai-skill-4` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sky-cube/ai-skill-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sky-cube/ai-skill-4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Sky-Cube (https://skillmd.com/u/sky-cube)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sky-cube/ai-skill-4

---

# AI交互组件开发Skill

## 适用场景
开发 AI 交互类前端组件:对话消息流式渲染、打字机效果、Markdown 渲染、图表可视化、会话控制(停止/重新生成)。

## 执行步骤
1. 流式渲染:消费 SSE 或回调流,增量追加文本到消息状态;渲染用 requestAnimationFrame 或短间隔批量合并,避免逐字高频渲染。
2. 打字机效果:基于流式增量直接渲染即为天然打字机;需要动画时按帧推进,支持「停止/继续/中断」状态切换。
3. Markdown 渲染:选成熟渲染库,渲染前必须 sanitize 过滤脚本与危险标签,禁止直接 v-html/dangerouslySetInnerHTML 未经消毒内容。
4. 图表可视化:数据到图表组件(如 ECharts)统一走适配层;大数据量下采样;图表 resize 与主题切换统一处理。
5. 会话控制:停止生成(中断请求并清理连接)、重新生成、清空会话;每个消息带状态(进行中/完成/失败/已中断)。
6. 异常与性能:断流重连或提示重试;长会话列表虚拟滚动;消息内容防抖保存,避免高频接口调用。

## 规范要点
- 流式连接必须随组件销毁清理,防止内存泄漏与后台请求堆积。
- AI 输出内容一律视为不可信:渲染前 sanitize,链接加 rel 与白名单校验。
- 进行中状态禁止用户重复触发同一请求,停止/中断必须真正终止网络请求。
- 图表配置抽为可复用封装,禁止页面内堆积配置对象;数据更新与销毁时机明确。
- 长文本与长列表必须虚拟化,滚动跟随与用户手动滚动区分处理。

## 输出模板
```
## AI 交互组件方案
组件清单:流式消息/输入框/停止控制/Markdown 渲染/图表
流式处理:SSE 解析方式 + 渲染合并策略 + 中断清理
安全处理:内容 sanitize 方案 + 链接/脚本白名单
会话状态机:消息状态流转(进行中/完成/失败/中断)
```

## 自检清单
- [ ] 流式增量渲染无卡顿,连接随销毁清理
- [ ] AI 输出内容渲染前 sanitize,无 XSS 风险
- [ ] 停止/中断真正终止请求,无重复提交
- [ ] 长列表虚拟滚动,图表统一封装
- [ ] 失败/中断状态有明确 UI 与重试入口