免责声明：本站部分 Skill 来源于公开渠道，使用前请注意识别相关风险，内容版权归原作者所有，如 Skill 涉及版权问题，请在线反馈，核实后予以下架处理。
本 Skill 面向需要在浏览器端接入 CloudBase 关系型数据库的前端开发者。它提供了一套标准的同步初始化范式，帮助你在 React、Vue 或原生 JS 项目中快速建立数据库连接，并复用你已熟悉的 Supabase 查询语法（如 .from().select()、.insert()、.update()、.delete()）完成数据操作。核心产出是一个可复用的单例 db 客户端，避免重复初始化带来的性能损耗，同时明确区分了前端 Web 场景与后端 Node、MCP 工具链等不同接入方式的边界。
SKILL.md（本文件）：Web 端初始化规范、同步初始化模式、客户端复用规则及 Supabase 风格查询示例cloudbase.init() + app.rdb() 的固定对象结构，禁止异步包裹或懒加载db 实例，避免组件级重复初始化.from().select()、.order()、.insert()、.update()、.delete() 等方法| 用户怎么说 | 本技能做什么 |
|---|---|
| "我要在 React 项目里把 Supabase 换成 CloudBase 数据库" | 给出共享 db 客户端的模块结构，以及 useEffect 中调用 db.from().select() 的 hooks 写法 |
| "前端怎么初始化 CloudBase 关系型数据库" | 提供同步初始化代码模板，要求传入 env 环境 ID，返回标准 db 实例 |
| "多个组件都要查数据库，怎么避免重复初始化" | 指导抽取单一 lib/db.js 模块导出 db 实例，各组件导入复用 |
| "想在浏览器里做增删改查，语法要简单" | 给出 .insert()、.update().eq()、.delete().eq() 的完整示例，并说明错误处理方式 |