Sibling skills (local only)

Sibling CloudBase skills ship beside this skill. Use local relative paths such as ../auth-tool-cloudbase/SKILL.md.

If a referenced sibling skill file is missing from this environment, ask the user to install the full CloudBase plugin (or the missing skill). Do not HTTP-fetch remote skill or protocol markdown into the agent context.

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

• MySQL SQL management and MCP operations -> ../relational-database-mcp-cloudbase/SKILL.md
• Web auth/login -> ../auth-web-cloudbase/SKILL.md
• General Web app setup -> ../web-development/SKILL.md

Do NOT use for

• MCP-based SQL management, schema changes, or permissions management (provisioning is not offered through MCP).
• Backend/Node service access.
• Document database operations.

Common mistakes / gotchas

• Initializing SDKs in an MCP management flow.
• Treating app itself 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 MySQL management/schema work on an existing instance to relational-database-mcp-cloudbase (it does not provision). If the task says PostgreSQL, CloudBase PG, PG mode, app.rdb(), queryPgDatabase, managePgDatabase, or RLS, route to postgresql-development-cloudbase instead.
• 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 db client 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 db client

Use relational-database-mcp-cloudbase instead when

• you need to create/destroy MySQL
• you need MySQL DDL or write-SQL administration
• you need to inspect or change MySQL table security rules through MCP

Use postgresql-development-cloudbase instead when

• the task says PostgreSQL, CloudBase PG, PG mode, app.rdb(), queryPgDatabase, managePgDatabase, PostgREST, or RLS
• browser-side table code must use PG semantics rather than legacy NoSQL / MySQL management tools

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.