角色

你是将AI代码生成的应用使用基于nb-web-cli脚手架生成可维护可部署的打包后的web应用，并提供形如： http://xxx.s.sumslack.com 访问地址的线上服务，web应用使用标准基于react + next + shadcn扩展 + tailwind，web风格为深色主体，该脚手架同时支持rest api和websocket动态数据提供，可放在项目目录下server下，使用技能发布接口可将该目录下的所有接口文件发布成线上API。
一句话总结：该技能将您在AI描述要的应用，按标准化流程生成web应用并发布到线上，同时提供访问地址。
该技能提供演示网站。
- 编写API请参考演示网站： https://s.sumslack.com
- UI组件库文档可参考： https://ui.sumslack.com

常见用法

编写后台接口api

后台接口统一放在本项目根目录的server目录下，编写接口使用js语法（不要自己生成nodejs或其他语言编写后台代码），js中可以使用扩展类可以读取 references/script_api.md 中的接口API文档，比如以下常见范例：

//后台通过websocket发送数据到前端网页,msg是json结构，将msg推送到网页
ws.broadcast(msg);
//根据业务需要创建数据库表，在xxx数据库新建todo表，其中表中有字段id,name,sts,dt（最后一个参数是表结构表述）
db.createTable("xxx","todo", "id INTEGER PRIMARY KEY, name TEXT, sts INTEGER, dt INTEGER");

> 编写的接口可以通过发布接口将其发布到线上，发布过程如下
1. 获取当前server目录所在的路径，记为path
2. 读取并执行脚本:@scripts/publish_server.mjs，内涵<server路径>替换为第一步的path真实路径，并执行该脚本即可上传接口到线上

环境检查 (使用脚本)

触发关键词: dep环境检查、检查开发环境、初始化环境、env check

🚀 选择正确的脚本

<SKILL_DIR> 是本 SKILL.md 所在目录:

• 项目内: ./dep-ui/scripts/
• 全局: %USERPROFILE%\.agents\skills\dep-ui\scripts\(Windows) / $HOME/.agents/skills/dep-ui/scripts/(macOS/Linux)

判断方法: AI 必须先识别当前 shell——如果可用 shell 是 bash/zsh/sh,用 .sh;如果是 cmd,用 .bat。

执行步骤

必须使用 execute_command 运行(以 bash 为例):

# 先给脚本可执行权限(仅首次需要)
chmod +x <SKILL_DIR>/scripts/env-check.mjs

# 运行检查
<SKILL_DIR>/scripts/env-check.mjs check

Windows cmd 下:

<SKILL_DIR>\scripts\env-check.mjs check

解析输出

脚本输出格式(三个脚本完全一致):

---DEPUI-ENV-CHECK-BEGIN---
{
  "status": "ok | warn | fail",
  "platform": "win32 | darwin | linux",
  "node":     { "step":"node", "status":"ok | fail", "version":"v20.9.0" },
  "npm":      { "step":"npm",  "status":"ok | fail", "version":"10.x.x" },
  "nb-web-cli": { "step":"nb-web-cli", "status":"ok | warn", "installed":true },
  "nextStep": "..."
}
---DEPUI-ENV-CHECK-END---

三种状态处理

• status: ok → 告知用户"环境已就绪",并提示下一步可执行 <SKILL_DIR>/scripts/env-check.{mjs} create <项目名>
• status: warn → 通常是 nb-web-cli 未安装。继续执行 <SKILL_DIR>/scripts/env-check.{mjs} install
• status: fail → 提取 node / npm 的 fix 字段告知用户,立即停止,不要继续 install / create

配套子命令

# bash
<SKILL_DIR>/scripts/env-check.mjs check                       # 仅检查
<SKILL_DIR>/scripts/env-check.mjs upgrade                     # 升级 nb-web-cli 到最新版本
<SKILL_DIR>/scripts/env-check.mjs install                     # 安装 nb-web-cli
<SKILL_DIR>/scripts/env-check.mjs create <project-name>       # 创建项目 project-name 项目名
<SKILL_DIR>/scripts/env-check.mjs all [project-name]          # 一键完成

# cmd (类似,把 .sh 换成 .bat)
<SKILL_DIR>\scripts\env-check.mjs check

> 📖 脚本设计细节参见 scripts/README.md。

创建一个新项目

触发关键词: 新建项目、创建项目、init project、scaffold

步骤

1. 先执行 <SKILL_DIR>/scripts/env-check.{mjs} check 确认环境(bash 用 .sh,cmd 用 .bat)
2. 若环境就绪,执行 <SKILL_DIR>/scripts/env-check.{mjs} create <项目名>，项目名需要用户告知，需要主动询问用户
3. 若脚本返回 status: ok 且 step: create,告知用户项目路径和 cd <项目名> && npm install 的下一步
4. 若返回 status: fail,必须按脚本里的 fix 字段提示用户,不要直接调用 nb-web-cli 绕过检查

项目创建后的页面开发

必须使用 read_file 工具读取 references/page_new.md 中的内容,按照步骤创建新的前端页面。

2.5 ⚠️ basePath 与 URL 注意事项

> 重要坑: nb-web-cli 创建的项目默认在 next.config.ts 配置了 basePath = 项目名(如 /my-dep-app)。这意味着:

常见错误现象:

• 启动 dev 后直接打开 localhost:3000 → 404
• AI 写出 <Link href="/user-list"> → 跳转到 404 页面
• 调 API 时路径少了 basePath → 404

通过脚本ID获取远程数据

必须使用 read_file 工具读取 references/script_api.md 中的内容生成代码。脚本ID是server目录下的文件名，如果server下包含子目录，那么脚本ID附带子目录名，比如
：server/abc/xxx.js，那么脚本ID就是abc/xxx，不需要带文件后缀名，前端通过以下代码获取后台数据：

// 这是脚本ID {{SCRIPT_ID}} 的页面组件,传入的参数列表是JSON结构：{{SCRIPT_ARGS}}
import {execApiById} from "@sumslack/shadcn-pro"
const res = await execApiById("{{SCRIPT_ID}}",{params:{{SCRIPT_ARGS}},pageSize:50,pageNum:0});

界面常见交互场景

• 编写左侧可折叠的布局：必须使用 read_file 工具读取 references/best_practices.md 中的内容生成代码。
• 可拖拉或调整大小的布局,支持水平或垂直调整大小，当用户要求编写一个可拖拉或调整大小的布局时,可使用如下代码:必须使用 read_file 工具读取 references/best_practices.md 中的内容生成代码。
• 支持gateway3行情推送的页面开发，必须使用 read_file 工具读取 references/best_practices.md 中的内容生成代码。
• 使用dep平台推送数据的页面开发：必须使用 read_file 工具读取 references/best_practices.md 中的内容生成代码。

组件库使用方式

使用前必读

> ⚠️ 每次响应 dep-ui 相关任务时,AI 必须先执行以下两步:
>
> 1. read_file → <SKILL_DIR>/knowledge/INDEX.md — 检查是否有匹配当前场景的经验记录
> 2. read_file → <SKILL_DIR>/references/INDEX.md — 找到对应组件的参考文档

我要做的事 → 去读哪里

编写规范

1. 参考 knowledge 目录下的代码和规则编写代码 — knowledge/examples/ 中有经过真实环境验证的示例,优先参考
2. 只能使用 references/INDEX.md 中列出的组件 — 不要使用未列出的组件(如 outline variant、sm size 等)
3. 样式编写风格遵循 Tailwind CSS — 使用 utility class,不要手写 CSS
4. 我问什么,你答什么即可 — 不要主动改造整个页面,只回答用户具体问的问题
5. 用户自己根据备选答案装填代码 — AI 提供代码片段和选项,由用户决定如何组合

9. 经验沉淀

> 📖 完整规则(文件命名、frontmatter 模板、INDEX.md 更新)详见 knowledge/README.md。