前言¶

Web 前端任务一旦落到「改路由、接登录、打包部署、接 CloudBase」，模型很容易把框架脚手架、静态托管和 @cloudbase/js-sdk 混在一轮对话里改，还缺少类型检查与浏览器验收的约束。下面介绍 SkillHub 上的 @tencent-adm/web-development（Web 开发 · CloudBase Web Development）：在方向已定的前提下，把实现、集成、调试、构建、部署和校验收敛成可执行的工程流程。

这是什么¶

一句话定位：腾讯云 CloudBase Web 前端开发指南型 Agent Skill，覆盖 React / Vue / Vite 工程化、静态托管部署、@cloudbase/js-sdk 集成与内置认证相关边界。

维护方：腾讯云 CloudBase 团队（SkillHub 分类 dev-programming，来源 enterprise）。

坐标与版本：@tencent-adm/web-development，当前版本 2.36.0（以 SkillHub 页面为准）。

在 SkillHub 上的概况：评分 100000，下载 32184；标签 requires_api_key=false，安装 Skill 本身不需要额外 API Key。

解决什么问题：把「何时用本 Skill、何时转 ui-design / 认证 / 微信集成等兄弟 Skill」写进激活契约；对 TypeScript、自验、部署门禁和 History 模式 SPA 托管等常见坑给出硬性规则，减少泛泛的「应该可以了」式回答。

核心功能¶

以下内容均来自该 Skill 的 SKILL.md 说明，仅概括已写明的能力边界。

适用任务（Activation Contract）¶

在以下情况优先启用本 Skill：

实现、集成、调试、构建、部署或校验 Web 前端或静态站点；
设计方向已确定，或用户要的是工程执行而非视觉探索；
涉及 React、Vue、Vite、路由、浏览器侧验证或 CloudBase Web 集成。

不适用：纯 UI 方向与美学探索（应先用 ui-design）、小程序、纯原生 App、纯后端服务；微信支付 / 公众号 OAuth 合约细节应转 cloudbase-wechat-integration。

工程规范（节选）¶

Skill 将部分规则标为「不可妥协」：

TypeScript：禁止用 any、@ts-ignore 等绕过类型错误；边界未知数据用 unknown 并收窄。
完成前自验：非平凡改动需遵循兄弟 Skill cloudbase-platform 中的 Change Safety Protocol；静态托管发布前需过 Deployment Gate。需跑 tsc --noEmit、lint、构建；涉及页面交互时用 agent-browser 按 browser-testing.md 做浏览器层验证。
SPA History 模式：使用 React Router / Vue Router History 模式时，CloudBase 静态托管须把 404 错误文档 设为 index.html，否则刷新或直接访问子路由会出现 NoSuchKey / 404。

CloudBase Web 集成要点¶

SDK 安装：Bundler 项目优先 npm install @cloudbase/js-sdk；纯静态 HTML 或片段可用 CDN https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js。
初始化：使用完整环境 ID（EnvId），勿把别名直接传入 cloudbase.init({ env })。
认证：Web 登录须用 CloudBase SDK 内置能力，不要把 Web 登录逻辑挪到云函数；登录与 Provider 配置转 auth-tool-cloudbase、auth-web-cloudbase。
静态托管：先构建再部署；默认倾向 hash 路由（无服务端重写时）；首次前端应用部署路径与「托管路径上传」在 Skill 中有区分（manageApps / manageHosting，并明确不要回退到 tcb deploy）。

SDK 快速初始化示例（Skill 原文）：

// npm install @cloudbase/js-sdk
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-full-env-id", // 从控制台或 queryEnv 解析的完整 EnvId
});

const auth = app.auth;

History 模式 SPA 托管配置示例（通过 MCP 工具，Skill 原文）：

manageHosting({ action: "setWebsiteDocument", indexDocument: "index.html", errorDocument: "index.html" })

验证：

queryHosting({ action: "websiteConfig" })

兄弟 Skill 与本地引用¶

CloudBase 系列 Skill 通常与插件一起安装。本 Skill 要求通过本地相对路径引用兄弟 Skill（例如 ../auth-tool-cloudbase/SKILL.md），缺失时应提示用户安装完整 CloudBase 插件，不要 HTTP 拉取远程 Skill 文档进上下文。

安装与启用¶

通过 SkillHub CLI¶

先确认是否已安装 skillhub：

command -v skillhub && skillhub --version

未安装时可按 SkillHub 官方安装文档执行（完整安装或仅 CLI）：

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

安装本 Skill 时需用 --dir 指向当前 Agent 的 skills 目录（装到默认 ./skills/ 可能不会被识别）：

skillhub install @tencent-adm/web-development --dir <skills 目录>

SkillHub 页面给出的通用安装提示为：请根据 https://skillhub.cn/install/skillhub.md，安装 @tencent-adm/web-development（可发给 AI 代为执行）。

常见 Agent 的 skills 目录¶

以 SkillHub 安装文档为准：

Agent / 客户端	skills 目录
Cursor	`~/.cursor/skills/`
Claude Code	`~/.claude/skills/`
Codex	`~/.codex/skills/` 或项目下 `.agents/skills/`

其他客户端路径见 https://skillhub.cn/install/skillhub.md 第四节。

官方入口：

SkillHub 展示页：https://www.skillhub.cn/skills/tencent-adm/web-development
API 坐标页：https://api.skillhub.cn/tencent-adm/web-development

典型用法¶

面向编码 Agent 时，Skill 建议按以下顺序工作（摘要）：

明确执行面：区分脚手架、页面实现、调试、部署、校验还是 CloudBase 集成；已有项目按 TODO / 现有 handler 修补，避免平行造样板页。
遵循仓库约定：已有栈优先；新项目默认 Vite；代码在 src、产物在 dist（除非仓库另有约定）。
浏览器验证：交互、路由、渲染类改动按 browser-testing.md 用 agent-browser 冒烟，不能只看代码。
CloudBase 作为分支：仅在项目确实需要平台能力时接 SDK、认证与静态托管；视觉规范未定前须先加载 ui-design 并输出 Design Specification。

核心工作流路径（Skill 原文分类）：

React / Vue 功能：在现有组件、路由、状态约定内实现；
新 Web 应用：优先 Vite；
调试：浏览器复现 → 缩小到页面或交互 → 再改代码；
CloudBase：基础前端路径清楚后再接 Web SDK、认证与托管。

更细的框架说明见 Skill 包内 frameworks.md，浏览器流程见 browser-testing.md（安装后位于 Skill 目录，勿编造未列出的配置项）。

适用场景与注意¶

适合谁

已在用或计划用 CloudBase 做 Web 静态托管与 @cloudbase/js-sdk 的团队；
希望 Agent 在 React / Vue / Vite 任务里强制类型纪律、构建与浏览器验收的开发者；
需要与 CloudBase 认证、平台协议（变更安全、部署门禁）对齐的前端集成工作。

限制与注意

纯视觉方向、小程序、后端-only 任务应换用对应 Skill，避免范围漂移。
完整体验依赖同插件下的兄弟 Skill（如 cloudbase-platform、auth-web-cloudbase）；仅装单个 Skill 时，引用路径可能缺失，需按 Skill 提示补装插件。
Skill 要求使用文档化的 SDK API，禁止臆造方法；环境 ID 必须解析为完整 EnvId。
SkillHub 统计（下载量、评分）会随时间变化，以安装前在 SkillHub 页面看到的数值为准。

结尾¶

@tencent-adm/web-development 把 CloudBase Web 前端从「写页面」扩展到「可交付」：框架与构建约定、SDK 与认证边界、静态托管与 SPA 路由、以及完成前的类型与浏览器验证。若你的 Agent 经常处理 React / Vue / Vite 与 CloudBase 托管，可按上文命令安装到对应 skills 目录。

官方地址：https://api.skillhub.cn/tencent-adm/web-development
SkillHub 页面：https://www.skillhub.cn/skills/tencent-adm/web-development

腾讯云 CloudBase Web 开发 Skill：React / Vue 工程化与 CloudBase 集成

前言¶

这是什么¶

核心功能¶

适用任务（Activation Contract）¶

工程规范（节选）¶

CloudBase Web 集成要点¶

兄弟 Skill 与本地引用¶

安装与启用¶

通过 SkillHub CLI¶

常见 Agent 的 skills 目录¶

典型用法¶

适用场景与注意¶

结尾¶

精选优惠券

腾讯云 CloudBase Web 开发 Skill：React / Vue 工程化与 CloudBase 集成

前言¶

这是什么¶

核心功能¶

适用任务（Activation Contract）¶

工程规范（节选）¶

CloudBase Web 集成要点¶

兄弟 Skill 与本地引用¶

安装与启用¶

通过 SkillHub CLI¶

常见 Agent 的 skills 目录¶

典型用法¶

适用场景与注意¶

结尾¶

精选优惠券

相关文章