relational-database-web-cloudbase
Installation
Summary
Frontend CloudBase Relational Database client initialization with Supabase-compatible query API.
- Provides canonical synchronous initialization pattern using
@cloudbase/js-sdkfor browser-based apps (React, Vue, vanilla JS) - Returns a shared
dbclient that uses identical method names and patterns to Supabase for queries, inserts, updates, and deletes - Enforces single-client reuse across components; prohibits lazy-loading, async wrappers, and re-initialization
- Handles only frontend database access; separate skills cover backend Node access and MCP/agent management
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 permissions 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.
Weekly Installs
594
Repository
tencentcloudbase/skillsGitHub Stars
42
First Seen
Jan 22, 2026
Security Audits
Installed on
opencode528
codex527
gemini-cli520
github-copilot508
cursor501
kimi-cli500