Agent skill
relational-database-web-cloudbase
Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser.
Install this agent skill to your Project
npx add-skill https://github.com/TencentCloudBase/skills/tree/main/skills/relational-database-web
SKILL.md
CloudBase Relational Database Web SDK
Activation Contract
Use this first when
- A browser or Web app must access CloudBase Relational Database through
@cloudbase/js-sdk. - The task is specifically about frontend initialization and browser-side query usage.
Read before writing code if
- You need to distinguish browser SDK usage from MCP database management or backend Node access.
- The request mentions Supabase migration, shared frontend DB client, or browser-side table queries.
Then also read
- SQL management and MCP operations ->
../relational-database-tool/SKILL.md - Web auth/login ->
../auth-web/SKILL.md - General Web app setup ->
../web-development/SKILL.md
Do NOT use for
- MCP-based SQL provisioning, schema changes, or security-rule management.
- Backend/Node service access.
- Document database operations.
Common mistakes / gotchas
- Initializing SDKs in an MCP management flow.
- Treating
appitself as the relational database client. - Re-initializing CloudBase in every component.
- Mixing frontend browser access with admin-style schema mutations.
Minimal checklist
- Confirm the caller is a Web frontend.
- Keep one shared CloudBase app and one shared relational DB client.
- Route provisioning/schema work to
relational-database-tool. - Handle auth separately before data access.
Overview
This skill standardizes the browser-side initialization pattern for CloudBase Relational Database.
After initialization, use db with Supabase-style query patterns.
Installation
npm install @cloudbase/js-sdk
Canonical initialization
import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
env: "your-env-id"
});
const auth = app.auth();
// Handle login separately
const db = app.rdb();
Initialization rules
- Initialize synchronously.
- Do not lazy-load the SDK with
import("@cloudbase/js-sdk")unless the framework absolutely requires it. - Create one shared
dbclient and reuse it. - Do not invent unsupported
cloudbase.init()options.
Quick routing
Use this skill when
- you are wiring browser components to relational tables
- you are replacing a Supabase browser client with CloudBase
- you need a canonical shared frontend
dbclient
Use relational-database-tool instead when
- you need to create/destroy MySQL
- you need DDL or write-SQL administration
- you need to inspect or change table security rules through MCP
Example: shared frontend DB client
import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
env: "your-env-id"
});
export const db = app.rdb();
Example: Supabase-style query
const { data, error } = await db
.from("posts")
.select("*")
.order("created_at", { ascending: false });
if (error) {
console.error("Failed to load posts", error.message);
}
Example: insert / update / delete
await db.from("posts").insert({ title: "Hello" });
await db.from("posts").update({ title: "Updated" }).eq("id", 1);
await db.from("posts").delete().eq("id", 1);
Key principle
app.rdb()gives you the relational database client.- After that point, use Supabase-style query knowledge for table operations.
- Keep schema management and privileged administration outside browser code.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
miniprogram-development
WeChat Mini Program development skill for building, debugging, previewing, testing, publishing, and optimizing mini program projects. This skill should be used when users ask to create, develop, modify, debug, preview, test, deploy, publish, launch, review, or optimize WeChat Mini Programs, mini program pages, components, routing, project structure, project configuration, project.config.json, appid setup, device preview, real-device validation, WeChat Developer Tools workflows, miniprogram-ci preview/upload flows, or mini program release processes. It should also be used when users explicitly mention CloudBase, wx.cloud, Tencent CloudBase, 腾讯云开发, or 云开发 in a mini program project.
spec-workflow
Use when medium-to-large changes need explicit requirements, technical design, and task planning before implementation, especially for multi-module work, unclear acceptance criteria, or architecture-heavy requests.
cloud-storage-web
Complete guide for CloudBase cloud storage using Web SDK (@cloudbase/js-sdk) - upload, download, temporary URLs, file management, and best practices.
ui-design
Use when users need visual direction, interface hierarchy, layout decisions, design specifications, or prototypes before implementing a Web or mini program UI.
cloudbase-platform
CloudBase platform overview and routing guide. This skill should be used when users need high-level capability selection, platform concepts, console navigation, or cross-platform best practices before choosing a more specific implementation skill.
ai-model-wechat
Use this skill when developing WeChat Mini Programs (小程序, 企业微信小程序, wx.cloud-based apps) that need AI capabilities. Features text generation (generateText) and streaming (streamText) with callback support (onText, onEvent, onFinish) via wx.cloud.extend.AI. Built-in models include Hunyuan (hunyuan-2.0-instruct-20251111 recommended) and DeepSeek (deepseek-v3.2 recommended). API differs from JS/Node SDK - streamText requires data wrapper, generateText returns raw response. NOT for browser/Web apps (use ai-model-web), Node.js backend (use ai-model-nodejs), or image generation (not supported).
Didn't find tool you were looking for?