AI 技能配置

uni-agent 专属自定义技能 ，让 AI 理解项目组件体系和样式规范。

技能简介

当前项目提供了四套 AI 技能，分别面向 UI 组件使用、元子化样式编写、工具 API 调用 和 图表组件使用 场景。安装后，AI 助手在回答相关问题时将优先参考本项目规范，减少编造和不准确回答。

技能	文件名	作用场景
tuiplus-ui	tuiplus-ui/SKILL.md	组件选型、props/events 用法、demo 对照、页面搭建
tuiplus-autocss	tuiplus-autocss/SKILL.md	元子化 class、VaporCSS、主题变量、external-class
tuiplus-api	tuiplus-api/SKILL.md	TuiCrypto 加密、TuiAxios 请求、TuiStore 存储、TuiOcr 识别、TuiPinyin 拼音、TuiTts 语音等工具 API
tuiplus-charts	tuiplus-charts/SKILL.md	t-xcharts 图表组件、option 配置、18 种图表类型、Canvas 渲染

下载地址

技能文件打包下载：

• 下载地址：https://yundie.xyz/skills.zip

解压后将 tuiplus-ui、tuiplus-autocss、tuiplus-api 和 tuiplus-charts 四个文件夹复制到以下目录：

安装目录

将下载的压缩包解压后，把 tuiplus-ui、tuiplus-autocss、tuiplus-api 和 tuiplus-charts 四个文件夹放入以下目录：

%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\

最终目录结构

%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\
├── tuiplus-ui\
│   └── SKILL.md
├── tuiplus-autocss\
│   ├── SKILL.md
│   └── docs\
│       ├── index.md
│       ├── theme.md
│       ├── uts.md
│       ├── flex.md
│       ├── size.md
│       ├── text.md
│       ├── background.md
│       ├── border.md
│       ├── animation.md
│       ├── position.md
│       ├── skin.md
│       └── other.md
├── tuiplus-api\
│   ├── SKILL.md
│   └── docs\
│       ├── intro.md
│       ├── crypto.md
│       ├── http.md
│       ├── store.md
│       ├── ocr.md
│       ├── pinyin.md
│       ├── tts.md
│       ├── sqlite.md
│       ├── animation.md
│       ├── color.md
│       ├── css.md
│       ├── debounce.md
│       ├── throttle.md
│       ├── random.md
│       ├── text.md
│       ├── time.md
│       ├── video-thumb.md
│       └── verify.md
└── tuiplus-charts\
    ├── SKILL.md
    └── docs\
        ├── index.md
        ├── opts.md
        ├── event.md
        ├── xAxis.md
        ├── yAxis.md
        ├── legend.md
        ├── title.md
        ├── tooltip.md
        ├── markLine.md
        ├── categories.md
        ├── demos\
        │   ├── arcbar.md
        │   ├── area.md
        │   ├── bar.md
        │   ├── bubble.md
        │   ├── candle.md
        │   ├── column.md
        │   ├── funnel.md
        │   ├── gauge.md
        │   ├── line.md
        │   ├── map.md
        │   ├── mix.md
        │   ├── mount.md
        │   ├── pie.md
        │   ├── radar.md
        │   ├── ring.md
        │   ├── rose.md
        │   ├── scatter.md
        │   └── word.md
        └── extra\
            ├── arcbar.md
            ├── area.md
            ├── bar.md
            ├── bubble.md
            ├── candle.md
            ├── column.md
            ├── funnel.md
            ├── gauge.md
            ├── line.md
            ├── map.md
            ├── mix.md
            ├── mount.md
            ├── pie.md
            ├── radar.md
            ├── ring.md
            ├── rose.md
            ├── scatter.md
            └── word.md

技能说明

tuiplus-ui

适用于以下场景：

• 使用 t-button、t-form、t-page 等 t- 前缀组件
• 查阅组件 props、events、slots 用法
• 参考 demo 示例说明实现功能
• 对现有组件做二次封装
• 排查组件样式或交互问题

技能已自带完整组件 API 参考（component-api-full.md），涵盖全部 150 个组件的 Props、Events、externalClasses，由脚本从源码自动提取生成。安装后 AI 会优先参考技能包内文档，即使没有项目源码也能正常工作。如果用户本地有项目源码则以实际源码为准。

tuiplus-autocss

适用于以下场景：

• 使用 VaporCSS 元子化 class 编写样式
• 将普通 CSS 改写为元子化 class
• 给组件增加 external-class 扩展能力
• 在 UTS 中通过 @tui-autocss-include 注解生成动态 class
• 结合 theme.json 做主题适配

tuiplus-api

适用于以下场景：

• 使用 TuiCrypto 进行 AES/RSA/MD5/SHA/Base64 加解密
• 使用 TuiAxios 发起 HTTP 请求（GET/POST/PUT/DELETE）
• 使用 TuiStore 做数据存储,状态管理
• 使用 TuiOcr 做图片文字识别
• 使用 TuiPinyin 做汉字拼音转换
• 使用 TuiTts 做语音合成
• 使用 SQLite 数据库、防抖节流、颜色处理、时间日期、随机数、文本处理等工具 API
• 查询各 API 的导入路径、方法签名、参数说明和平台支持

技能已自带完整 API 文档，涵盖 20 个 API 模块的详细用法与示例代码。

tuiplus-charts

适用于以下场景：

• 使用 t-xcharts 图表组件进行数据可视化
• 配置柱状图、折线图、饼图、环形图、雷达图、散点图、气泡图、K 线图、漏斗图、仪表盘、地图、词云、混合图、圆弧进度条等 18 种图表
• 查询 option 配置项（xAxis/yAxis/legend/title/tooltip/markLine 等）
• 使用多图表（multiChart）在单 Canvas 中绘制多个图表
• 处理图表触摸事件、数据更新（updateData）
• Canvas 渲染性能优化（pixelRatio、canvas2d、enableScroll 等）

技能已自带完整图表文档，涵盖所有图表类型的演示、配置和额外参数说明。

验证是否生效

安装完成后，在 HBuilderX 中向 AI 提问以下问题，确认技能已加载：

测试 UI 技能：

使用 t-button 组件写一个带图标的提交按钮

如果 AI 能准确给出 t-button 的 props 用法，说明技能已生效。

测试样式技能：

使用 VaporCSS 元子化 class 写一个 flex 水平居中容器

如果 AI 使用 fl faic fjcc 等 class 回答，说明样式技能已生效。

测试 API 技能：

使用 TuiCrypto 对字符串进行 MD5 加密

如果 AI 能给出 TuiCrypto.md5() 的正确用法和导入路径，说明 API 技能已生效。

测试图表技能：

使用 t-xcharts 组件画一个柱状图

如果 AI 能给出完整的 t-xcharts 组件代码和 option 配置，说明图表技能已生效。

卸载

删除对应文件夹即可：

%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-ui\
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-autocss\
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-api\
%APPDATA%\HBuilder X\extensions\hbuilderx-ai-chat\uni-agent\config\skills\tuiplus-charts\