适配指南

安装 SinleUI 的 Skill 后，就可以向 AI 描述需要开发的页面或功能。

一、安装 Skill

下载并解压 sinleui-app-dev，放入所用工具的技能目录。安装后，AI 可以查阅：

• 组件索引：组件的用途和对应文档；
• API 索引：$snui、snu、hooks、store、颜色与日期库的入口及文档链接；
• 页面结构与样式规则（sn-page 根节点、$ 动态值、--sn-* 变量等）；
• 交付前自查清单。

Skill 主要提供索引，具体用法需查阅对应文档，便于随框架更新，也能减少上下文占用。安装位置及不支持 Skill 时的用法见 Skill 页。

二、按场景描述需求

描述任务时，先说明页面或功能需求。AI 可以通过 Skill 查阅框架规则和相关文档。

你要做的	可以这样描述
一个列表页	「做一个消息列表页，每条显示标题、时间和摘要，点击进详情」
一个表单页	「做一个新建地址的表单，姓名、手机号、地区三级选择，带校验」
一段长列表	「商品列表，支持下拉刷新和加载更多，卡片式」
一个设置页	「设置页，分通用/账号两组，含暗黑模式开关和退出登录」
一次操作确认	「删除前弹确认框，确认后调接口并提示结果」
一个页面底部导航	「首页加底部三个 Tab：首页、分类、我的」
一个详情页	「商品详情页，顶部图片，内容从导航栏背后滚过」

补充数据与状态

说明数据来源、加载中和空列表时的表现，AI 更容易写出符合项目需求的代码。例如：「数据从 api.getMessages() 来，加载中用骨架屏，空列表显示提示」。

三、验收时看什么

AI 交付时应对照 Skill 的清单说明检查结果。你可以再复核以下几项：

• [ ] 页面根节点是 sn-page，弹层都在它内部；
• [ ] 尺寸使用 $ 动态值或 calc(var(--ff) * 14px)，没有大量写死的 px；
• [ ] 颜色使用 $primary / var(--sn-*)，没有写死的十六进制色值；
• [ ] 提示类调用使用 snu.showToast，没有混入 uni.showToast；
• [ ] 列表页有加载中 / 空态 / 正常三种状态。

四、补充说明

框架安装：框架本身的安装只需完成一次，步骤见安装与注意事项。

能力清单：插件内的 uni_modules/sinle-ui/ai-reference.md 是供 AI 查阅的离线索引，简述了组件、hooks 与 API 的用途。Skill 会引导 AI 查阅文档站；联网不便时，可以先查这份索引。

项目约定：目录结构、接口封装、状态管理、命名习惯等额外规范，可以写进项目的 AGENTS.md 或规则文件。Skill 负责框架用法，业务约定仍以项目规则为准。