cloudbase-sites-runtime
# cloudbase-sites-runtime Cloudbase-sites-runtime orchestrates web development workflows for CloudBase Vite-based React and Vue applications, enabling users to build, preview, deploy, and manage versions of their projects within a single working directory. Use this skill when a user requests to build or deploy a web app in a CloudBase environment, the project contains Vite with React or Vue in its package.json, and the host supports the cloudbase-sites plugin with access to CloudBase MCP tools for authentication, deployment, and environment management.
git clone --depth 1 https://github.com/TencentCloudBase/CloudBase-MCP /tmp/cloudbase-sites-runtime && cp -r /tmp/cloudbase-sites-runtime/plugin/cloudbase-sites/skills/cloudbase-sites-runtime ~/.claude/skills/cloudbase-sites-runtimeSKILL.md
# CloudBase Sites Runtime
This skill orchestrates a **single working directory = single project** flow
for CloudBase Web apps. The cwd itself is the workspace; we do not manage
cross-cwd state or session IDs at the skill level.
This runtime is shared by the Codex, Claude Code, and CodeBuddy plugin
surfaces. The CLI and CloudBase MCP workflows are the source of truth. Some
hosts also run bundled lifecycle hooks that start previews or inject compact
rules at session start; if hooks are unavailable, disabled, or not yet trusted,
use the explicit CLI commands in this skill.
## Activation contract
### Use this skill when
- The user says "build me a website / app", "I want to make a landing page",
"create a React app and let me preview", "deploy this to CloudBase",
"save this version", "roll back to v1", or similar.
- The current cwd looks like a CloudBase + Vite project (has `package.json`
with `vite` + `react` or `vue`).
- The user is running this conversation inside Codex, Claude Code, CodeBuddy,
or a compatible host with the `cloudbase-sites` plugin enabled —
`cloudbase-mcp` is registered and the `cloudbase-sites` binary is either on
PATH or available from the plugin root's `bin/cloudbase-sites`.
### Do NOT use this skill when
- It's a mini-program project — route to mini-program guidance instead.
- It's a native app project — route to http-api guidance.
- It's a backend-only project — route to cloud-functions / cloudrun guidance.
- The framework is Next/Nuxt/Astro/Remix — politely tell the user this skill
only covers Vite-based React/Vue apps and stop. Do NOT try to adapt the
scripts to those frameworks.
## What this skill orchestrates — three layers
### 1. CloudBase MCP tools (provided by `cloudbase-mcp`, registered via plugin's `.mcp.json`)
These are the only tools that produce CloudBase side effects. Highlights:
- `downloadTemplate({ template: "react" | "vue", ide })` — pull official template
- `envQuery({ action: "info" })` + `auth({ action: "set_env", envId })` — bind env
- `manageApps({ action: "deployApp", ... })` — deploy to CloudApp (independent subdomain)
- `envDomainManagement({ action: "create", domains })` — whitelist dev origin for CORS
- `searchKnowledgeBase({ mode: "skill", skillName: "<name>" })` — fetch CloudBase domain skills (see below)
For all CloudBase operations beyond the dev-server lifecycle (auth, db,
storage, ai), fetch the corresponding CloudBase domain skill via
`searchKnowledgeBase(mode="skill", skillName=...)`. Common ones:
- `ui-design` UI design spec (mandatory before new UI work)
- `web-development` Web project conventions
- `auth-tool` provider config (management-side)
- `auth-web` Web SDK auth client code
- `no-sql-web-sdk` document database Web SDK
- `cloud-storage-web` cloud storage Web SDK
- `relational-database-web` MySQL Web SDK
- `cloudbase-platform` platform overview / console links
These are **NOT Claude Code native skills** and are NOT bundled with this
plugin. They live inside cloudbase-mcp and are fetched on demand. When this
file (or the injected RULES_BLOCK) says "调 ui-design skill" or "follow the
auth-tool skill", that means: call `searchKnowledgeBase(mode="skill",
skillName="<that-name>")` and apply the returned content.
### 2. The `cloudbase-sites` CLI (provided by this plugin's `bin/` directory)
First resolve the CLI path:
1. Try `command -v cloudbase-sites`.
2. If that fails and the host exposes `CODEX_PLUGIN_ROOT`, use
`$CODEX_PLUGIN_ROOT/bin/cloudbase-sites`.
3. If that fails and the host exposes `CLAUDE_PLUGIN_ROOT`, use
`$CLAUDE_PLUGIN_ROOT/bin/cloudbase-sites`.
4. If SessionStart injected an absolute CLI path, use that path.
Do not assume Codex has injected the plugin `bin/` directory into PATH.
Single binary, multiple subcommands. Use these — and ONLY these — for the
dev-server / version / deploy lifecycle:
- `cloudbase-sites init --start` — scaffold from empty cwd and start preview when the user explicitly wants a Sites app
- `cloudbase-sites preview` — daemonize Vite for an existing Vite project
- `cloudbase-sites preview --status [--quiet]` — JSON status / exit code
- `cloudbase-sites preview --restart` / `--stop [--force]`
- `cloudbase-sites save -m "<label>"` — create a saved version
- `cloudbase-sites versions` — list saved versions + deploy status
- `cloudbase-sites deploy [--version <n>]` — deploy a saved version (Phase 1: emit nextAction)
- `cloudbase-sites deploy --post --version <n> --access-url <url> [--build-id <BuildId>] [--version-name <VersionName>]` — record deploy
- `cloudbase-sites rollback [--to-version <n>]` — revert to a saved version
- `cloudbase-sites supervisor status|list|heal|reload|start|stop`
Never invent `npm run dev` / `vite` / `vite build` invocations. The CLI
handles host=0.0.0.0 forcing, port allocation (17173..17272), daemonization,
base path injection, version metadata, and deploy history.
### 3. Standard tools (Bash, git, Edit, Write)
Use for editing files. The plugin's PostToolUse hook handles automatic
restart on config-file edits — you don't need to manage that.
## Lifecycle hooks and fallback
**Do NOT invoke `cloudbase-sites init` or `cloudbase-sites preview`
proactively in your first message just because the plugin is installed.**
SessionStart is intentionally passive for empty directories so the plugin does
not interfere with unrelated sessions. A UserPromptSubmit hook may initialize
after the first user message, but only when deterministic Chinese/English
intent rules detect an explicit Sites/Web-app creation request. By the time you
read the user's first prompt:
- If the cwd was an existing Vite project: dev server is up (or installing).
- If the cwd was empty: no files were downloaded by SessionStart. If the first
prompt clearly asked to build/create a Sites app, UserPromptSubmit may have
started `init --start`; otherwise initialize only after the user asks.
- IfUse this skill for Node.js backend AI via @cloudbase/node-sdk (>=3.16.0) — cloud functions, CloudRun, Express, Koa, NestJS, serverless APIs, scheduled jobs, LLM proxies. Only SDK supporting image generation (ai.createImageModel + generateImage). Text models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field of generateText/streamText. MUST run two-step preflight before code — see body. Keywords: backend, 云函数, 云托管, serverless, LLM proxy, agent orchestration, generateText, streamText, generateImage, createModel, hunyuan-image, Token Credits, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for browser/Web (use ai-model-web) or Mini Program (use ai-model-wechat).
Use this skill when a browser/Web app (React, Vue, Angular, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI) needs AI models via @cloudbase/js-sdk. Default routing for page/页面/Web/前端/frontend/网页/H5 AI — call directly from browser, do NOT propose a Node.js proxy. Covers generateText and streamText. Models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field. MUST run two-step preflight before code — see body. Keywords: 页面, Web, 前端, React, Vue, Next, Nuxt, SPA, AI chat UI, generateText, streamText, createModel, hunyuan-exp, Token Credits, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for Node.js backend (use ai-model-nodejs), Mini Program (use ai-model-wechat), or image generation (Node SDK only).
Use this skill for WeChat Mini Program AI via wx.cloud.extend.AI (小程序, 企业微信小程序, wx.cloud apps). Features generateText and streamText with callbacks (onText, onEvent, onFinish). Models via wx.cloud.extend.AI.createModel with groups hunyuan-exp (小程序成长计划), cloudbase (main managed), or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the data wrapper model field. API differs from JS/Node SDK — streamText needs data wrapper, generateText returns raw response. MUST run two-step preflight before code — see body. Keywords: Mini Program AI, wx.cloud.extend.AI, 小程序成长计划, ai_miniprogram_inspire_plan, Token Credits 资源包, generateText, streamText, createModel, hunyuan-exp, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for browser/Web (use ai-model-web), Node.js backend (use ai-model-nodejs), or image generation (use ai-model-nodejs).
CloudBase Node SDK auth guide for server-side identity, user lookup, and custom login tickets. This skill should be used when Node.js code must read caller identity, inspect end users, or bridge an existing user system into CloudBase; not when configuring providers or building client login UI.
CloudBase auth provider configuration and login-readiness guide. This skill should be used when users need to inspect, enable, disable, or configure auth providers, publishable-key prerequisites, login methods, SMS/email sender setup, or other provider-side readiness before implementing a client or backend auth flow.
CloudBase Web Authentication Quick Guide for frontend integration after auth-tool has already been checked. Provides concise and practical Web authentication solutions with multiple login methods and complete user management.
CloudBase WeChat Mini Program native authentication guide. This skill should be used when users need mini program identity handling, OPENID/UNIONID access, or `wx.cloud` auth behavior in projects where login is native and automatic.
CloudBase function runtime guide for building, deploying, and debugging your own Event Functions or HTTP Functions. This skill should be used when users need application runtime code on CloudBase, not when they are merely calling CloudBase official platform APIs.