{"id":"bd770f88-7d52-48f8-a988-a77f9ef840b9","entityType":"agent","slug":"clawhub-binggg-web-development","name":"Web 开发 · CloudBase Web Development","canonicalUrl":"https://www.xpersona.co/agent/clawhub-binggg-web-development","canonicalPath":"/agent/clawhub-binggg-web-development","generatedAt":"2026-10-09T12:32:16.931Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":null},"description":"Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.","descriptionLabel":"Source description","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 6.9K downloads reported by the source. Last updated 10/9/2026.","installCommand":"clawhub skill install s17cgdbxp195f7dy8f5h6p0d9183h6nq:web-development","sourceUrl":"https://clawhub.ai/binggg/web-development","homepage":"https://clawhub.ai/binggg/skills/web-development","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/binggg/web-development","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/binggg/skills/web-development","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":52,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Web 开发 · CloudBase Web Development technical dossier on Xpersona with agent coverage, OPENCLEW support, and live trust metadata."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":null},"stars":null,"forks":null,"downloads":6864,"packageName":null,"latestVersion":"1.27.58","tractionLabel":"6.9K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":null},"lastUpdatedAt":"2026-10-09T03:11:47.137Z","lastCrawledAt":"2026-10-09T03:11:47.137Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-10T03:11:47.137Z","lastVerifiedAt":null,"highlights":[{"version":"1.27.58","createdAt":"2026-09-30T13:46:05.187Z","changelog":"Recent commits / 最近提交: | - fix(clawhub): 🏷️ publish the curated display name and topics (#1124) | - docs: 🔄 sync CloudBase CloudAPI reference page | - feat(evals): ✨ score the secret and migration tasks (#1122) | - feat(evals): add the scenario runner and point it at a local endpoint (#1119) | - fix(mcp): 🔧 report local endpoint failures directly (#1118)","fileCount":5,"zipByteSize":12643},{"version":"1.27.57","createdAt":"2026-09-30T06:15:42.243Z","changelog":"Recent commits / 最近提交: | - chore(release): bump version to v2.34.8 | - fix(mcp): 🔒 bind the two-phase function deploy to the upload target it signed (#1114) | - feat(mcp): route cloud API calls to a local endpoint (#1116) | - feat(evals): ✨ point the public dry run at a scored task (#1113) | - fix(dsh-plugin): 📝 describe database, storage, auth, and deploy (#1117)","fileCount":5,"zipByteSize":12605},{"version":"1.27.56","createdAt":"2026-09-21T13:26:01.196Z","changelog":"Recent commits / 最近提交: | - chore(release): bump version to v2.34.6 | - chore: sync cloudbase plugin skills from upstream | - chore(connectors): sync generated cloudbase-intl package [skip ci] | - chore(experts): auto-bump versions for changed packs [skip ci] | - Merge branch 'feat/function-publish-version-9cb1bf6e'","fileCount":5,"zipByteSize":12794},{"version":"1.27.55","createdAt":"2026-09-20T09:29:09.721Z","changelog":"Recent commits / 最近提交: | - chore(release): bump version to v2.34.5 | - fix(internal-sync): 🧹 keep atomic-write temp files out of the archive (#1070) | - chore(experts): auto-bump versions for changed packs [skip ci] | - chore(dsh-plugin): bump version to 0.1.2 | - chore(experts): auto-bump versions for changed packs [skip ci]","fileCount":5,"zipByteSize":12791},{"version":"1.27.54","createdAt":"2026-09-16T09:35:02.974Z","changelog":"Recent commits / 最近提交: | - chore(release): bump version to v2.34.4 | - chore: sync cloudbase plugin skills from upstream | - feat(skills): 📚 add PostgreSQL access-pattern best practices (#1046) | - fix(mcp): 🧭 按 OpenAI hosted Scan 收紧工具注解 (#1047) | - docs: 🔄 sync CloudBase CloudAPI reference page","fileCount":5,"zipByteSize":12813},{"version":"1.27.53","createdAt":"2026-09-16T09:14:55.970Z","changelog":"Recent commits / 最近提交: | - feat(skills): 📚 add PostgreSQL access-pattern best practices (#1046) | - fix(mcp): 🧭 按 OpenAI hosted Scan 收紧工具注解 (#1047) | - docs: 🔄 sync CloudBase CloudAPI reference page | - chore: sync cloudbase plugin skills from upstream | - fix(cloudrun): state the runtime contract and the credential gate (#1045)","fileCount":5,"zipByteSize":12828},{"version":"1.27.52","createdAt":"2026-09-14T05:11:34.863Z","changelog":"Recent commits / 最近提交: | - chore(release): bump version to v2.34.3 | - fix(mcp): 🐛 harden hosted tool contracts and error signalling (#1039) | - fix(ci): 🔧 run the plugin-skill pull-back after the upstream push (#1038) | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source","fileCount":5,"zipByteSize":12679},{"version":"1.27.51","createdAt":"2026-09-13T16:36:03.803Z","changelog":"Recent commits / 最近提交: | - chore(release): bump version to v2.34.2 | - fix(mcp): 🐛 align the login_by_api_key hint with the parameter the tool reads (envId → apiKeyEnvId) (#1037) | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source | - chore(release): bump version to v2.34.1","fileCount":5,"zipByteSize":12695}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17cgdbxp195f7dy8f5h6p0d9183h6nq:web-development","setupComplexity":"low","setupSteps":["Install using `clawhub skill install s17cgdbxp195f7dy8f5h6p0d9183h6nq:web-development` in an isolated environment before connecting it to live workloads.","No published capability contract is available yet, so validate auth and request/response behavior manually.","Review the upstream CLAWHUB listing at https://clawhub.ai/binggg/web-development before using production credentials."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-09T12:32:16.925Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-binggg-web-development/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":null},"readme":"Skill: Web 开发 · CloudBase Web Development\n\nOwner: binggg\n\nSummary: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\n\nTags: latest:1.27.58\n\nVersion history:\n\nv1.27.58 | 2026-09-30T13:46:05.187Z | user\n\nRecent commits / 最近提交: | - fix(clawhub): 🏷️ publish the curated display name and topics (#1124) | - docs: 🔄 sync CloudBase CloudAPI reference page | - feat(evals): ✨ score the secret and migration tasks (#1122) | - feat(evals): add the scenario runner and point it at a local endpoint (#1119) | - fix(mcp): 🔧 report local endpoint failures directly (#1118)\n\nv1.27.57 | 2026-09-30T06:15:42.243Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.8 | - fix(mcp): 🔒 bind the two-phase function deploy to the upload target it signed (#1114) | - feat(mcp): route cloud API calls to a local endpoint (#1116) | - feat(evals): ✨ point the public dry run at a scored task (#1113) | - fix(dsh-plugin): 📝 describe database, storage, auth, and deploy (#1117)\n\nv1.27.56 | 2026-09-21T13:26:01.196Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.6 | - chore: sync cloudbase plugin skills from upstream | - chore(connectors): sync generated cloudbase-intl package [skip ci] | - chore(experts): auto-bump versions for changed packs [skip ci] | - Merge branch 'feat/function-publish-version-9cb1bf6e'\n\nv1.27.55 | 2026-09-20T09:29:09.721Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.5 | - fix(internal-sync): 🧹 keep atomic-write temp files out of the archive (#1070) | - chore(experts): auto-bump versions for changed packs [skip ci] | - chore(dsh-plugin): bump version to 0.1.2 | - chore(experts): auto-bump versions for changed packs [skip ci]\n\nv1.27.54 | 2026-09-16T09:35:02.974Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.4 | - chore: sync cloudbase plugin skills from upstream | - feat(skills): 📚 add PostgreSQL access-pattern best practices (#1046) | - fix(mcp): 🧭 按 OpenAI hosted Scan 收紧工具注解 (#1047) | - docs: 🔄 sync CloudBase CloudAPI reference page\n\nv1.27.53 | 2026-09-16T09:14:55.970Z | user\n\nRecent commits / 最近提交: | - feat(skills): 📚 add PostgreSQL access-pattern best practices (#1046) | - fix(mcp): 🧭 按 OpenAI hosted Scan 收紧工具注解 (#1047) | - docs: 🔄 sync CloudBase CloudAPI reference page | - chore: sync cloudbase plugin skills from upstream | - fix(cloudrun): state the runtime contract and the credential gate (#1045)\n\nv1.27.52 | 2026-09-14T05:11:34.863Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.3 | - fix(mcp): 🐛 harden hosted tool contracts and error signalling (#1039) | - fix(ci): 🔧 run the plugin-skill pull-back after the upstream push (#1038) | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source\n\nv1.27.51 | 2026-09-13T16:36:03.803Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.2 | - fix(mcp): 🐛 align the login_by_api_key hint with the parameter the tool reads (envId → apiKeyEnvId) (#1037) | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source | - chore(release): bump version to v2.34.1\n\nv1.27.50 | 2026-09-13T16:00:55.436Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.1 | - chore: sync cloudbase plugin skills from upstream | - chore(experts): auto-bump versions for changed packs [skip ci] | - feat: 把部署后分享环节送到专家包与实际部署路径上 (#1036) | - fix(mcp): keep the OpenAPI doc list order stable across builds (#1035)\n\nv1.27.49 | 2026-09-13T14:50:40.684Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.34.0 | - chore(release): refresh generated tools artifacts | - chore(gitignore): 忽略 plugin 发布产物的带时间戳变体 | - fix(mcp): 放宽 STS 资源级 E2E 的超时预算，消除云存储用例偶发超时 (#1034) | - fix(tools): CNB 链接存活检查区分「待合并后可见」，并刷掉自己的 compat 欠账 (#1033)\n\nv1.27.48 | 2026-09-13T12:43:00.269Z | user\n\nRecent commits / 最近提交: | - fix(docs): point skill docs at the site's current Markdown addresses (#1032) | - chore: sync cloudbase plugin skills from upstream | - feat(mcp): runtime-guard param-level i18n and cap describe length (#1030) | - chore: sync cloudbase plugin skills from upstream | - feat(mcp): callCloudApi 服务白名单扩至 57 个并内置版本映射 (#1029)\n\nv1.27.47 | 2026-09-08T12:59:51.964Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.33.2 | - chore: sync claude skills mirror from source | - Merge pull request #980 from yulinlin2020/feature/deploy0831 | - Merge pull request #1009 from TencentCloudBase/feat/webdev-expert-prereq-checks | - feat(experts): add connector & skill prerequisite checks to cloudbase-webdev-expert\n\nv1.27.46 | 2026-09-08T04:25:34.924Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.33.1 | - chore(release): build artifacts for v2.33.1 | - Merge branch 'feature/tool-naming-env-domain-converge' | - feat(telemetry): add client param and region/site reporting for hosted MCP | - Merge pull request #1006 from TencentCloudBase/fix/intl-device-flow-auth-url\n\nv1.27.45 | 2026-09-04T09:55:23.962Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.33.0 (eea512f9) | - feat(functions): 支持云函数自定义镜像部署与异步部署状态查询 (#985) | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source | - refactor(env): converge env domain tool naming into query*/manage* system (#997)\n\nv1.27.44 | 2026-09-01T10:41:59.936Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.32.5 (4e6ca71c) | - fix(auth): international-site (TCB_SITE=intl) API key routing, device flow and diagnostics (#972) | - fix(mcp): queryEnv(list) pin to bound env for hosted OAuth token (环境级 STS) (#968) | - refactor(rag): remove vector mode from searchKnowledgeBase (#973) | - fix(cloudrun): mask service env params by default in queryCloudRun detail (#975)\n\nv1.27.43 | 2026-08-28T04:24:03.635Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.32.4 (a9cd97d2) | - chore: sync claude skills mirror from source | - fix(auth): give OTP sdkHints full call context and messageId caution (#964) | - chore: sync cloudbase plugin skills from upstream | - docs(release): add v2.32.3 release notes (7b513c4e)\n\nv1.27.42 | 2026-08-26T13:23:35.762Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.32.3 (7b513c4e) | - fix(auth): 🔧 resolve ambiguous-region credentials from the only usable site slot (#962) | - fix(tests): 🔨 retry temp dir cleanup in cloudbase-sites-plugin tests (#961) | - feat(pg): default ExecutePGSql role to cloudbase_postgres, reserve cloudbase_admin (#959) | - feat(dsh-plugin): @cloudbase/dsh-plugin — CloudBase backend for DeepSeek Harness (#933)\n\nv1.27.41 | 2026-08-25T10:35:35.036Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.32.2 (eec8ec79) | - Merge pull request #958 from TencentCloudBase/feat/msg-push-container-mode | - chore(deps): ⬆️ bump @cloudbase/manager-node to 5.8.2 (requestFn support, MR !150) | - Merge pull request #956 from TencentCloudBase/feat/git-guard-pre-push | - Revert \"fix(nosql): 🐛 route tcb-domain DB calls via requestFn when present (WeChat IDE has no Tencent creds) (dc0eaaf9)\"\n\nv1.27.40 | 2026-08-25T05:13:27.120Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.32.1 (82a92358) | - Merge pull request #957 from TencentCloudBase/feat/msg-push-container-mode | - docs(skill): 🔧 use WeChat-side tool names (cloud_query_msg_push/cloud_manage_msg_push) in skill docs (dc0eaaf9) | - docs(skill): 📚 add push-mode (cloudfunction/container) chapter to message-push reference (dc0eaaf9) | - fix(msg-push): ⚠️ degrade function-existence check when host hook absent (compat with WeChat IDE, dc0eaaf9)\n\nv1.27.39 | 2026-08-24T13:19:40.807Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.32.0 (e30ee663) | - chore: sync cloudbase plugin skills from upstream | - Merge pull request #949 from TencentCloudBase/feat/virtual-payment-mcp | - fix(skill): 📏 compress miniprogram-development description under Codex 1024-char limit (dc0eaaf9) | - Merge remote-tracking branch 'origin/main' into feat/virtual-payment-mcp\n\nv1.27.38 | 2026-08-20T15:36:22.338Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.31.0 (7efa4dd50) | - Merge pull request #947 from TencentCloudBase/feat/getdeploylog-coding-fix | - fix(cloudrun): 🔧 align getDeployLog coding fallback next_step action union (b2cb3661) | - task: queryCloudRun getDeployLog 遇 CODING 未登录改 (18efa60c) | - chore: sync cloudbase plugin skills from upstream\n\nv1.27.37 | 2026-08-20T12:27:00.517Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.30.1 (9326243c1) | - Merge pull request #944 from TencentCloudBase/feat/kimi-plugin-zip-cleanup | - refactor(kimi): 🧹 assemble sibling skills into cloudbase/references | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source\n\nv1.27.36 | 2026-08-20T08:10:02.988Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.30.0 (a84f982e) | - Merge pull request #943 from TencentCloudBase/feat/kimi-plugin-zip-cleanup | - refactor(kimi): 🧹 whitelist-only zip with version-free asset name | - Merge pull request #942 from TencentCloudBase/feat/mcp-region-env-scope | - chore: sync claude skills mirror from source\n\nv1.27.35 | 2026-08-20T07:40:09.414Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.29.0 (3636e6c7) | - Merge pull request #941 from TencentCloudBase/feat/kimi-plugin-publish | - feat(kimi): 📦 pack Kimi plugin zip and attach to release assets | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source\n\nv1.27.34 | 2026-08-18T12:13:32.192Z | user\n\nRecent commits / 最近提交: | - chore(release): merge main into v2.28.1 bump (52383793) | - Merge pull request #932 from TencentCloudBase/feat/kimi-plugin-shared-manifest | - chore(release): 🚀 bump version to v2.28.1 (52383793) | - fix(kimi): drop tcb CLI from skillInstructions — login via MCP auth tool | - docs(kimi): align interface copy with Vercel/Supabase Codex plugin pattern\n\nv1.27.33 | 2026-08-18T02:48:09.317Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.28.0 (5520bd3b) | - Merge pull request #926 from TencentCloudBase/task/cloudbase-mcp-20260818 | - fix(compat): pass-through copies only git-tracked files; refresh baseline without gitignored skills | - fix(compat): support .yaml/.yml in compat baseline classifier + refresh baseline | - docs(cloudrun): add container deploy failure SOP (bde80f9c)\n\nv1.27.32 | 2026-08-14T16:30:37.314Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.27.0 | - chore(release): 🛠️ refresh generated tools docs before v2.27.0 | - Merge pull request #909 from TencentCloudBase/fix/remove-download-path-test | - fix: 移除 downloadRemoteFile 遗留集成测试与文档分类映射 | - Merge pull request #908 from TencentCloudBase/feat/remove-downloadRemoteFile\n\nv1.27.31 | 2026-08-10T03:07:14.000Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.26.0 | - chore(release): 🛠️ refresh generated tools docs before v2.26.0 | - feat(gateway): 🔌 add enableRoute/disableRoute for gateway routes (#901) | - chore: sync cloudbase plugin skills from upstream | - chore: sync claude skills mirror from source\n\nv1.27.30 | 2026-08-05T10:33:32.907Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.25.10 | - fix(ci): 🩹 refresh compat baseline after codebuddy plugin.json change (#892) | - fix(deps): 🔒 upgrade MCP SDK to 1.30.0 and retain category annotations (#873) | - fix(env): detect RuntimeBackends.nosql from flexdb tnt InstanceId (#891) | - fix(partner): 🩹 post-#886 prewarm cleanup, skill install path, CI sync (#888)\n\nv1.27.29 | 2026-08-05T09:19:05.547Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.25.9 | - fix(ci): 📦 install examples scripts deps before build-zips (#890) | - feat(skills): add minimal-web-baas-demo and publish path (#886) | - docs(marketplace): mark Trae community MCP and skills listed (#885) | - chore(ci): ⬆️ bump clawhub CLI pin to 0.23.3 after upload-ticket fix (#884)\n\nv1.27.28 | 2026-08-05T05:52:31.149Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.25.8 | - fix(cli): break cloud-mode↔logger cycle crashing --cloud-mode (#879) | - Merge pull request #877 from TencentCloudBase/docs/awesome-copilot-intake-rerun-status | - docs(marketplace): ✅ note Awesome Copilot intake re-pass and ready-for-review | - docs(marketplace): 📝 record Awesome Copilot intake re-pass after skill-fetch strip\n\nv1.27.27 | 2026-08-05T04:25:14.907Z | user\n\nRecent commits / 最近提交: | - Merge pull request #875 from TencentCloudBase/fix/awesome-copilot-strip-remote-skill-urls | - fix(security): 🛡️ strip remote skill-fetch URLs for Copilot review | - chore: sync claude skills mirror from source | - chore(release): 🚀 bump version to v2.25.7 | - fix(ci): 🛡️ use rsync --checksum for skills repo sync (#874)\n\nv1.27.26 | 2026-08-05T03:42:08.567Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.25.7 | - fix(ci): 🛡️ use rsync --checksum for skills repo sync (#874) | - fix(deps): Dependabot security overrides + vitest 3.2.7 (#871) | - fix(ci): 🛡️ use rsync --checksum for plugin repo sync (#872) | - fix(ci): 🩹 restore workflow_dispatch inputs after concurrency insert (#870)\n\nv1.27.25 | 2026-08-04T09:48:20.900Z | user\n\nRecent commits / 最近提交: | - fix(ci): 🩹 pin clawhub CLI and harden plugin skills sync push (#868) | - chore: sync claude skills mirror from source | - chore(release): 🚀 bump version to v2.25.6 | - chore(release): 🏗️ build artifacts for v2.25.6 | - fix(functions): 🩹 accept func.name as functionName fallback\n\nv1.27.24 | 2026-08-03T15:05:50.431Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.25.5 | - fix(pg-mcp): hydrate remote migration history + poll DescribeTaskResult in applyMigration (#859) | - chore: sync cloudbase plugin skills from upstream | - feat(gateway): 🔗 add bindCustomDomain accessType/customCname (#858) | - fix(gateway): ❓ report unknown status when privilege fields are missing (#856)\n\nv1.27.23 | 2026-08-03T10:43:40.274Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.25.4 | - chore(release): build artifacts for v2.25.3 | - chore: sync claude skills mirror from source | - chore: sync cloudbase plugin skills from upstream | - feat(gateway): 🔌 add HTTP gateway privilege query and switch actions (#855)\n\nv1.27.22 | 2026-08-03T09:43:40.284Z | user\n\nRecent commits / 最近提交: | - chore(release): 🚀 bump version to v2.25.3 | - chore: sync cloudbase plugin skills from upstream | - feat(mcp): harden manageEnv billing UX and gateway HTTPSERVICE defaults (#854) | - fix(pg): 🛡️ fail closed when applyMigration does not land (#852) | - chore: sync claude skills mirror from source\n\nv1.27.21 | 2026-07-30T07:15:20.237Z | user\n\nRecent commits / 最近提交: | - chore(release): 🔖 bump version to v2.25.2 | - chore(release): 📦 rebuild prompts for v2.25.2 | - chore: sync cloudbase plugin skills from upstream | - Merge pull request #841 from TencentCloudBase/feature/multi-region-refactor-research | - Merge pull request #842 from TencentCloudBase/feature/sync-codebuddy-marketplace-fork\n\nv1.27.20 | 2026-07-28T11:58:53.270Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.25.1 | - chore: sync cloudbase plugin skills from upstream | - Merge pull request #837 from TencentCloudBase/feature/gateway-path-transmission-drop-invite | - feat(gateway): 🧭 unify upstreamResourceType and drop invite-code | - Merge pull request #836 from TencentCloudBase/fix/claude-skills-mirror-race\n\nv1.27.19 | 2026-07-28T08:44:16.671Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.25.0 | - chore(release): build artifacts for v2.25.0 | - Merge pull request #835 from TencentCloudBase/docs/cursor-directory-submitted | - docs(marketplace): 📝 track cursor.directory cloudbase listing | - Merge pull request #834 from TencentCloudBase/feature/open-plugin-logo\n\nv1.27.18 | 2026-07-28T05:31:29.398Z | user\n\nRecent commits / 最近提交: | - Merge pull request #830 from TencentCloudBase/feature/vally-skill-dir-rename | - fix(tests): 🔧 expect renamed kiro auth-web-cloudbase path | - fix(skills): 🔧 align skill directories with frontmatter names for vally | - Merge pull request #829 from TencentCloudBase/feature/cnb-plugin-mirror | - feat(plugins): mirror OPS plugin repos to CNB like skills\n\nv1.27.17 | 2026-07-24T02:38:31.722Z | user\n\nRecent commits / 最近提交: | - Merge pull request #821 from TencentCloudBase/feat/skill-guideline-slimming | - chore: sync cloudbase plugin skills from upstream | - fix(skills): 🎯 keep cloudbase description within Codex 1024-char limit | - feat(skills): ✂️ slim CloudBase guideline entry and align publish templates | - fix(skillhub): 本地版本未领先时跳过发布\n\nv1.27.16 | 2026-07-21T05:52:48.194Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.24.1 | - Merge pull request #819 from TencentCloudBase/feat/plugin-beacon-dau-telemetry | - feat(plugin): 📡 add Vercel-style DAU telemetry via Beacon | - Merge pull request #818 from TencentCloudBase/feat/telemetry-mcp-client-info | - chore: sync claude skills mirror from source\n\nv1.27.15 | 2026-07-20T12:54:14.371Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.24.0 | - Merge pull request #813 from TencentCloudBase/feat/pg-migration-contract-hardening | - Merge pull request #814 from TencentCloudBase/fix/dedicated-repo-ops-only | - fix(plugin): 📦 keep dedicated repos Open Plugin Spec only | - feat(pg): 🔒 require explicit migrationVersion and default DDL to applyMigration\n\nv1.27.14 | 2026-07-15T13:07:04.159Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.23.11 | - chore(release): build artifacts for v2.23.11 | - Merge pull request #806 from TencentCloudBase/feat/plugin-review-and-skill-inject-eval | - fix: 🐛 remove unused imports flagged by github-code-quality review | - fix(compat): 🐛 fix cloudbaase typo in build-compat-config.mjs guideline targets\n\nv1.27.13 | 2026-07-14T09:11:56.189Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.23.10 | - chore(release): build artifacts | - Merge pull request #803 from TencentCloudBase/fix/search-knowledgebase-skill-search-roots | - chore: 📦 update compat baseline for .agents/skills and .claude/skills | - fix(mcp): 🔧 add .agents/skills and .claude/skills to build and searchKnowledgeBase\n\nv1.27.12 | 2026-07-13T09:23:11.055Z | user\n\nRecent commits / 最近提交: | - chore(release): 🔖 bump version to v2.23.9 | - Merge pull request #800 from TencentCloudBase/feat/pg-context-stateless | - feat(pg): ♻️ remove stateful init step, derive context per call | - Merge pull request #799 from TencentCloudBase/feat/plugin-hooks-commands-agents | - chore(deps): 🔒 update pnpm-lock.yaml for @cloudbase/manager-node\n\nv1.27.11 | 2026-07-09T06:55:16.451Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.23.8 | - chore(release): build artifacts for v2.23.8 | - feat(cloudrun): 🚀 add 12 new serverConfig params from manager-node v5.6.1 | - feat(cloudrun): 🚀 add 12 new serverConfig params from manager-node v5.6.1 | - chore: sync cloudbase plugin skills from upstream\n\nv1.27.10 | 2026-07-08T10:28:00.244Z | user\n\nRecent commits / 最近提交: | - chore(release): bump version to v2.23.7 | - chore(release): build artifacts for v2.23.7 | - fix: 🐛 resolve deleteAccess failure when only accessId is provided | - fix: 🐛 resolve deleteAccess failure when only accessId is provided | - fix: 🐛 sanitize agent name to avoid invalid alias characters\n\nv1.27.9 | 2026-07-08T04:03:44.014Z | user\n\nRecent commits / 最近提交: | - feat(skills): update auth skills to match Web SDK v3 API (#791) | - feat(auth): ✨ add login_by_api_key action to auth tool (#790) | - chore: sync cloudbase plugin skills from upstream | - feat(doc): 📺 add BV1kXEJ6VEn2 video tutorial + fix add_video_tutorial skill (#784) | - chore: sync claude skills mirror from source\n\nArchive index:\n\nArchive v1.27.58: 5 files, 12643 bytes\n\nFiles: browser-testing.md (5232b), frameworks.md (6201b), skill-card.md (1891b), SKILL.md (13296b), _meta.json (136b)\n\nFile v1.27.58:SKILL.md\n\n---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.8\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.\n- Treating cloud functions as the default solution for Web authentication.\n- Skipping browser-level validation after a UI or routing change.\n- **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting \"404 error document\" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route.\n- In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services.\n\n## Engineering constitution (non-negotiable)\n\nThese rules override convenience. Treat them as a gate before saying \"done\".\n\n### 1. TypeScript — do not silence the type system\n\n- **Do NOT use `any` to bypass type errors.** Not `: any`, not `as any`, not `@ts-ignore`, not `@ts-nocheck`, not `@ts-expect-error` without a written justification. `any` propagates silently and defeats the only compile-time safety net this project has.\n- When a type error appears, fix the root cause:\n  - Missing / wrong library types → install `@types/...`, or narrow the import, or write a precise `interface` / `type` for the shape you actually use.\n  - Shape is genuinely unknown at the boundary (JSON from an API, `postMessage` payload, `window.*` injection) → type it as `unknown` and narrow with a type guard (`typeof`, `in`, a discriminator field, or `zod` / equivalent).\n  - Third-party type is wrong → augment via `declare module` in a local `.d.ts`, not `any`.\n  - Truly dynamic case (e.g. generic event bus) → use a generic `<T>` with a constraint, not `any`.\n- `unknown` + narrowing is the acceptable escape hatch. `any` is not.\n- If you genuinely cannot avoid `any` for a specific line (extremely rare), leave a one-line comment with **why** and **what would remove it**, so reviewers can audit.\n- The same spirit applies to ESLint: do not sprinkle `// eslint-disable` to mute the real signal. Fix the rule violation, or discuss before disabling.\n\n### 2. Self-verify before claiming done\n\nBefore making any non-trivial code or configuration change, you must first follow the Change Safety Protocol in `cloudbase-platform/references/protocols/change-safety-protocol.md` (declare impact → user confirmation → post-edit verification).\nBefore any static hosting publish or custom domain work, complete the checks in `cloudbase-platform/references/protocols/deployment-gate.md`.\n\nSaying \"I've implemented it\" / \"fixed it\" / \"it should work\" without evidence is not acceptable. Before declaring completion, you must actually run the checks and report the result.\n\n**Static / build layer (always, when applicable):**\n\n- `tsc --noEmit` (or `vue-tsc --noEmit`) passes cleanly — zero errors, zero suppressed diagnostics you added.\n- `eslint` / project linter passes on changed files.\n- The project's build command (`npm run build` / `pnpm build` / `vite build`) completes without new warnings that you introduced.\n- The project's unit tests pass if they exist and cover the touched area.\n\n**Runtime / browser layer (whenever the change affects rendering, routing, forms, auth, or async flows):**\n\n- Use the **`agent-browser`** tool to actually open the page and reproduce the user-visible flow. Follow `browser-testing.md` for the concrete workflow.\n- Confirm: the target route loads, the interaction you claim to have fixed behaves the way you claim, no new console errors are introduced, and no regression in the adjacent routes you touched.\n- Record what you checked (route, action, expected result, actual result).\n\n**Only after both layers pass** may you say the task is done. If either layer cannot be executed locally (e.g. blocked by credentials, missing backend, paid API), say so explicitly and list exactly which step is still unverified — do not gloss over it.\n\n### 3. Do not paper over failures\n\n- Do not wrap broken logic in `try { ... } catch {}` to make the error go away.\n- Do not delete or skip a failing test to make CI green — fix it, or explain why the test is actually wrong and change the test with justification.\n- Do not mark a task complete because \"the code compiles\". Compilation is the bare minimum, not the goal.\n\n## When to use this skill\n\nUse this skill for Web engineering work such as:\n\n- Implementing React or Vue pages and components\n- Setting up or maintaining Vite-based frontend projects\n- Handling routing, data loading, forms, and build configuration\n- Running browser-based validation and smoke checks\n- Integrating CloudBase Web SDK and static hosting when the project needs CloudBase capabilities\n\n**Do NOT use for:**\n- UI direction or visual system design only; use `ui-design`\n- Mini program development; use `miniprogram-development`\n- Backend service implementation; use `cloudrun-development` or `cloud-functions`\n\n## How to use this skill (for a coding agent)\n\n1. **Clarify the execution surface**\n   - Confirm whether the task is framework setup, page implementation, debugging, deployment, validation, or CloudBase integration.\n   - Keep the work scoped to the actual Web app surface instead of spreading into unrelated backend changes.\n   - If the workspace is an existing application with TODOs, treat it as a targeted repair task, not a greenfield build.\n\n2. **Follow framework and build conventions**\n   - Prefer the existing project stack if one already exists.\n   - For new work, treat Vite as the default bundler unless the repo or user constraints say otherwise.\n   - Put reusable app code under `src` and build output under `dist` unless the repo already uses a different convention.\n   - In an existing application with fixed structure, inspect the files that already own the flow before reading broad docs: `src/lib/backend.*`, `src/lib/auth.*`, `src/lib/*service.*`, route guards, and the page handlers bound to submit buttons.\n\n3. **Validate through the browser, not only by reading code**\n   - For interaction, routing, rendering, or regression checks, use `agent-browser` workflows from `browser-testing.md`.\n   - Prefer lightweight smoke validation for changed flows before claiming the frontend work is complete.\n\n4. **Treat CloudBase as an integration branch**\n   - Use CloudBase Web SDK and static hosting guidance only when the project actually needs CloudBase platform features.\n   - Reuse `auth-tool-cloudbase` and `auth-web-cloudbase` for login or provider readiness instead of re-describing those flows here.\n\n## Core workflow\n\n### 1. Choose the right engineering path\n\n- **React / Vue feature work**: implement within the app's existing component, routing, and state conventions\n- **New Web app**: prefer Vite unless the repo already standardizes on another toolchain\n- **Debugging and regressions**: reproduce in browser, narrow to a specific page or interaction, then patch\n- **CloudBase integration**: wire in Web SDK, auth, data, or static hosting only after the base frontend path is clear\n\n### 2. Keep implementation grounded in project reality\n\n- Follow the repo's package manager, scripts, and lint/test patterns\n- Avoid framework rewrites unless the user explicitly asks for one\n- Prefer the smallest viable page/component/config change that satisfies the task\n- In TODO-based apps, complete the existing implementation directly instead of creating parallel helpers, sample pages, or detached prototypes\n\n### 3. Validate changed flows explicitly\n\n- Run the relevant local build / lint / typecheck / test command when available. A clean `tsc --noEmit` and a clean project build are the minimum bar — not proof of correctness.\n- For anything user-visible (routing, forms, rendering, auth, async flows), open the affected page or flow in a browser with **`agent-browser`**. Code reading alone is not sufficient evidence — see the Engineering constitution above.\n- Record what was checked: route, action, expected result, actual result, and any remaining gap.\n\n## CloudBase Web integration\n\nUse this section only when the Web project needs CloudBase platform features.\n\n### Web SDK rules\n\n- Prefer npm installation for React, Vue, Vite, and other bundler-based projects: `npm install @cloudbase/js-sdk`\n- Use the CDN only for static HTML pages, quick demos, embedded snippets, or README examples: `https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js`\n- Only use documented CloudBase Web SDK APIs; do not invent methods or options\n- Keep a shared `app` or `auth` instance instead of re-initializing on every call\n- If the user only provides an environment alias, nickname, or other shorthand, resolve it to the canonical full `EnvId` before writing SDK init code, console links, or config files. Do not pass alias-like short forms directly into `cloudbase.init({ env })`.\n\n### Authentication boundary\n\n- Authentication must use CloudBase SDK built-in features\n- Do not move Web login logic into cloud functions\n- For provider readiness, login method setup, or publishable key issues, route to `auth-tool-cloudbase` and `auth-web-cloudbase`\n\n### Static hosting defaults\n\n- Build before deployment\n- Prefer relative asset paths for static hosting compatibility\n- Use hash routing by default when the project lacks server-side route rewrites\n- If the user does not specify a root path, avoid deploying directly to the site root by default\n- **SPA routing (History mode)**: when using React Router / Vue Router in History mode (not hash mode), configure the CloudBase static hosting **\"404 error document\"** to `index.html`. Otherwise refreshing or directly visiting any sub-route returns `NoSuchKey` / 404 error, because the static hosting looks for a file at that path instead of falling through to `index.html` for the SPA to handle routing.\n\n  Use the MCP tool to apply this:\n  ```json\n  manageHosting({ action: \"setWebsiteDocument\", indexDocument: \"index.html\", errorDocument: \"index.html\" })\n  ```\n\n  Then verify with:\n  ```json\n  queryHosting({ action: \"websiteConfig\" })\n  ```\n\n### CloudBase quick start\n\n```js\n// npm install @cloudbase/js-sdk\nimport cloudbase from \"@cloudbase/js-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-full-env-id\", // Canonical full CloudBase environment ID resolved from queryEnv or the console\n});\n\nconst auth = app.auth\n```\n\nFile v1.27.58:_meta.json\n\n{\n  \"ownerId\": \"kn7emfp36dbn1xx4fz4s5q4a6180439j\",\n  \"slug\": \"web-development\",\n  \"version\": \"1.27.58\",\n  \"publishedAt\": 1790775965187\n}\n\nFile v1.27.58:browser-testing.md\n\n# Browser Validation (with `agent-browser`)\n\nThis file is the concrete playbook for the `agent-browser` tool. Use it whenever the Engineering constitution in `SKILL.md` says \"verify in the browser before claiming done\".\n\nCode reading, static types, and a clean build are **necessary but not sufficient**. Any change that affects what the user sees, clicks, or navigates must be opened in a real browser and exercised.\n\n## When `agent-browser` is required (not optional)\n\nTrigger browser validation for changes that touch any of:\n\n- **Routing / navigation** — new routes, redirects, route guards, 404s, hash vs history mode, nested layouts\n- **Forms** — submit handlers, controlled inputs, validation errors, disabled states, file uploads\n- **Auth flows** — sign in, sign up, logout, session guards, token refresh, `getSession`\n- **Async UI** — loading spinners, skeletons, error banners, retry buttons, streaming responses\n- **Conditional rendering** — empty states, permission-gated sections, feature flags\n- **Third-party SDK calls from the browser** — CloudBase Web SDK (auth, database, AI model, storage), analytics, payment\n\nSkip browser validation only for pure build-config edits, README / documentation-only changes, backend-only work, or changes guarded by CI tests you verified pass.\n\n## When `agent-browser` is NOT the right tool\n\n- Pure visual direction / aesthetic exploration → use the `ui-design` skill first.\n- Backend-only logic that never renders in the browser → use unit tests or direct API calls.\n- Smoke-testing a production URL against real user credentials → do not automate; ask the user.\n\n## Standard workflow\n\nFollow these steps in order. Do not skip the \"before the fix\" reproduction — it is what proves the bug was real and that your change actually fixed it.\n\n1. **Start the app** (or confirm it is already running).\n   - Typical: `npm run dev` / `pnpm dev` / `vite`. Record the local URL (often `http://localhost:5173`).\n   - If the project uses a build-and-serve flow instead of a dev server, document the exact commands you ran.\n2. **Open the target route with `agent-browser`**, starting from the entry URL, not deep-linking into private pages unless you already have a valid session.\n3. **Reproduce the current (pre-fix or pre-feature) behavior.** Capture: route, user action, observed outcome, console errors if any. This is the baseline.\n4. **Apply the code change.** Rely on HMR where available; otherwise rebuild.\n5. **Re-run the exact same flow in the browser.** Capture the new observed outcome.\n6. **Check adjacent routes you touched** — if you edited a shared component or route guard, visit at least one other page that depends on it.\n7. **Inspect the browser console for new warnings / errors** introduced by your change (React hydration mismatches, missing keys, uncaught promise rejections, CloudBase SDK init errors, etc.). New noise is a regression even if the happy path works.\n\n## What to record in the final summary\n\nFor each flow you exercised, report:\n\n- **Route** — e.g. `/login`, `/dashboard?tab=usage`\n- **Action** — e.g. \"Submitted the phone+code form with a valid code\"\n- **Expected** — e.g. \"Redirect to `/dashboard` and show user's nickname\"\n- **Before** — e.g. \"Stayed on `/login`; console showed `auth/invalid-session`\"\n- **After** — e.g. \"Redirected to `/dashboard`; nickname rendered; no new console errors\"\n- **Gap (if any)** — e.g. \"Did not test WeChat login branch because no test account available\"\n\nA one-liner like \"tested in browser, works\" is not acceptable evidence.\n\n## Common CloudBase-specific flows worth validating\n\n- **Auth**: sign-in page → success → protected route accessible; sign-out → same protected route redirects to `/login`.\n- **AI model**: eligibility gate passes → `generateText` returns text → `streamText` incrementally updates UI → error path (invalid model name) surfaces a user-visible message, not a silent failure.\n- **Database queries**: list page with pagination → empty state → after create, the new row appears without a hard refresh.\n- **Static hosting deploy**: for a deployed build, confirm the root route, one sub-route (refresh directly on it — hash vs history matters), and one 404 route.\n\n## Common mistakes to avoid\n\n- Claiming a frontend bug is fixed without actually opening the browser.\n- Verifying only the happy path when the reported bug is about empty states, validation errors, or route refresh.\n- Catching and swallowing console errors instead of understanding them.\n- Using `agent-browser` for aesthetic / visual direction work that should have gone through `ui-design`.\n- Skipping the adjacent-routes check after editing a shared component or route guard.\n- Using an old cached dev-server instance after a config change — restart the dev server if you modified `vite.config.*`, env vars, or TS path aliases.\n\n## Escalation\n\nIf you cannot complete browser validation because of missing credentials, a missing backend, a paid external API, or a blocker in the local environment, do not paper over it. State exactly what you were unable to verify and what the user needs to supply. Partial verification with a named gap is acceptable; silent omission is not.\n\nFile v1.27.58:frameworks.md\n\n# Framework Guidance\n\n## React\n\n- Follow the existing router, data-fetching, and component patterns already used by the repo.\n- Prefer focused page and component changes over broad refactors.\n- Keep state close to where it is used unless the project already relies on shared state primitives.\n- For form, navigation, and async UI bugs, verify the behavior in browser after code changes.\n\n## Next.js\n\n### SDK boundary\n\n`@cloudbase/js-sdk` is a **browser-only** SDK. It must not be imported in Server Components, `getServerSideProps`, or API Routes.\n\n- Auth flows (sign in, sign up, session check) → **Client Component only** (`\"use client\"`)\n- API Routes / Route Handlers → use `@cloudbase/node-sdk` (Node.js SDK) for server-side token verification\n- Server Components → read tokens from cookies/headers, do NOT import `@cloudbase/js-sdk`\n\n### Auth pattern (App Router)\n\n```tsx\n// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}\n```\n\n### Passing auth to API Routes\n\n```tsx\n// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}\n```\n\n### Deployment\n\n- Build output: `next build` → `.next` directory\n- CloudBase static hosting expects `package.json` with build scripts and the output directory configured; prefer `manageApps` for deployment\n- If deploying via `manageHosting`, set error document to `index.html` for client-side routing (even though Next.js defaults to file-based routing, fallback handling is needed for SPA-like paths)\n\n## Vue\n\n- Respect the existing composition style in the repo, such as Composition API or Options API.\n- Keep template, script, and style responsibilities clear instead of mixing unrelated logic into one large SFC.\n- When changing reactive state or watchers, verify the actual rendered behavior rather than assuming the code path is enough.\n\n## NestJS\n\n### SDK choice\n\nUse `@cloudbase/node-sdk` (Node.js SDK), **not** `@cloudbase/js-sdk` (which is browser-only).\n\n### Module setup\n\n```ts\n// cloudbase.module.ts\nimport { Module, Global } from \"@nestjs/common\"\nimport tcb from \"@cloudbase/node-sdk\"\n\nexport const CLOUDBASE = \"CLOUDBASE\"\n\nconst cloudbaseProvider = {\n  provide: CLOUDBASE,\n  useFactory: () => {\n    const app = tcb.init({\n      env: process.env.CLOUDBASE_ENV_ID!,\n      // credentials: require(\"/path/to/tcb_custom_login.json\"), // only for custom login\n    })\n    return {\n      app,\n      auth: app.auth(),\n      // db: app.database(), // for NoSQL\n    }\n  },\n}\n\n@Global()\n@Module({\n  providers: [cloudbaseProvider],\n  exports: [cloudbaseProvider],\n})\nexport class CloudBaseModule {}\n```\n\n### AuthGuard for token verification\n\n```ts\n// auth.guard.ts\nimport { Injectable, CanActivate, ExecutionContext, Inject } from \"@nestjs/common\"\nimport { CLOUDBASE } from \"./cloudbase.module\"\n\n@Injectable()\nexport class CloudBaseAuthGuard implements CanActivate {\n  constructor(@Inject(CLOUDBASE) private cloudbase: any) {}\n\n  async canActivate(context: ExecutionContext): Promise<boolean> {\n    const request = context.switchToHttp().getRequest()\n    const token = request.headers.authorization?.replace(\"Bearer \", \"\")\n    if (!token) return false\n\n    try {\n      // Verify the session via Node SDK\n      // Note: Node SDK does not have a direct \"verify token\" method —\n      // forward the token to a cloud function or use the HTTP API for validation\n      request.user = { token }\n      return true\n    } catch {\n      return false\n    }\n  }\n}\n```\n\n### CORS (required for Web frontend calls)\n\n```ts\n// main.ts\nimport { NestFactory } from \"@nestjs/core\"\nimport { AppModule } from \"./app.module\"\n\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule)\n  app.enableCors({\n    origin: process.env.CORS_ORIGIN || \"*\",\n    methods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"],\n    credentials: true,\n  })\n  await app.listen(9000) // CloudBase HTTP Functions expect port 9000\n}\nbootstrap()\n```\n\n### Deployment\n\n- Build to JavaScript output, include `package.json` with `start` script\n- Deploy via `manageCloudRun` (container) or `manageFunctions` (HTTP Function, default to native `http` module unless NestJS is explicitly required)\n- Set `MinNum` instances to 1 to reduce cold start\n\n## Vite\n\n- Treat Vite as the default choice for new Web app setup unless the repo already standardizes on another bundler.\n- Keep environment-specific values in `.env` or the project's existing config pattern instead of hardcoding them into UI files.\n- Check route base paths, asset paths, and build output behavior before deployment.\n\n## Routing and build defaults\n\n- Use the existing router if present; do not switch routing libraries without an explicit requirement.\n- For purely static hosting environments, prefer hash routing when server rewrite support is absent or unknown.\n- Make build and preview commands explicit before handing off deployment steps.\n\nFile v1.27.58:skill-card.md\n\n## Description:\n\nUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[binggg](https://clawhub.ai/user/binggg)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers use this skill to build, debug, deploy, and validate React, Vue, or Vite web frontends, including browser flows and CloudBase Web integration when needed.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Authentication examples may lead to protected routes accepting unverified tokens.\n\nMitigation: Require authoritative server-side token or session verification and secure cookie or session handling before using generated authentication code in production.\n\n## Reference(s):\n\n- [ClawHub skill release](https://clawhub.ai/binggg/skills/web-development)\n- [Browser validation guidance](artifact/browser-testing.md)\n- [Framework guidance](artifact/frameworks.md)\n- [CloudBase integration documentation](https://docs.cloudbase.net/integration/introduce.md)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Code and Markdown guidance with commands and configuration examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Recommends type, build, and browser validation for changed web flows.]\n\n## Skill Version(s):\n\n1.27.58 (source: server-resolved ClawHub release; artifact frontmatter lists 2.34.8)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.27.57: 5 files, 12605 bytes\n\nFiles: browser-testing.md (5232b), frameworks.md (6201b), skill-card.md (1737b), SKILL.md (13296b), _meta.json (136b)\n\nFile v1.27.57:SKILL.md\n\n---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.8\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.\n- Treating cloud functions as the default solution for Web authentication.\n- Skipping browser-level validation after a UI or routing change.\n- **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting \"404 error document\" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route.\n- In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services.\n\n## Engineering constitution (non-negotiable)\n\nThese rules override convenience. Treat them as a gate before saying \"done\".\n\n### 1. TypeScript — do not silence the type system\n\n- **Do NOT use `any` to bypass type errors.** Not `: any`, not `as any`, not `@ts-ignore`, not `@ts-nocheck`, not `@ts-expect-error` without a written justification. `any` propagates silently and defeats the only compile-time safety net this project has.\n- When a type error appears, fix the root cause:\n  - Missing / wrong library types → install `@types/...`, or narrow the import, or write a precise `interface` / `type` for the shape you actually use.\n  - Shape is genuinely unknown at the boundary (JSON from an API, `postMessage` payload, `window.*` injection) → type it as `unknown` and narrow with a type guard (`typeof`, `in`, a discriminator field, or `zod` / equivalent).\n  - Third-party type is wrong → augment via `declare module` in a local `.d.ts`, not `any`.\n  - Truly dynamic case (e.g. generic event bus) → use a generic `<T>` with a constraint, not `any`.\n- `unknown` + narrowing is the acceptable escape hatch. `any` is not.\n- If you genuinely cannot avoid `any` for a specific line (extremely rare), leave a one-line comment with **why** and **what would remove it**, so reviewers can audit.\n- The same spirit applies to ESLint: do not sprinkle `// eslint-disable` to mute the real signal. Fix the rule violation, or discuss before disabling.\n\n### 2. Self-verify before claiming done\n\nBefore making any non-trivial code or configuration change, you must first follow the Change Safety Protocol in `cloudbase-platform/references/protocols/change-safety-protocol.md` (declare impact → user confirmation → post-edit verification).\nBefore any static hosting publish or custom domain work, complete the checks in `cloudbase-platform/references/protocols/deployment-gate.md`.\n\nSaying \"I've implemented it\" / \"fixed it\" / \"it should work\" without evidence is not acceptable. Before declaring completion, you must actually run the checks and report the result.\n\n**Static / build layer (always, when applicable):**\n\n- `tsc --noEmit` (or `vue-tsc --noEmit`) passes cleanly — zero errors, zero suppressed diagnostics you added.\n- `eslint` / project linter passes on changed files.\n- The project's build command (`npm run build` / `pnpm build` / `vite build`) completes without new warnings that you introduced.\n- The project's unit tests pass if they exist and cover the touched area.\n\n**Runtime / browser layer (whenever the change affects rendering, routing, forms, auth, or async flows):**\n\n- Use the **`agent-browser`** tool to actually open the page and reproduce the user-visible flow. Follow `browser-testing.md` for the concrete workflow.\n- Confirm: the target route loads, the interaction you claim to have fixed behaves the way you claim, no new console errors are introduced, and no regression in the adjacent routes you touched.\n- Record what you checked (route, action, expected result, actual result).\n\n**Only after both layers pass** may you say the task is done. If either layer cannot be executed locally (e.g. blocked by credentials, missing backend, paid API), say so explicitly and list exactly which step is still unverified — do not gloss over it.\n\n### 3. Do not paper over failures\n\n- Do not wrap broken logic in `try { ... } catch {}` to make the error go away.\n- Do not delete or skip a failing test to make CI green — fix it, or explain why the test is actually wrong and change the test with justification.\n- Do not mark a task complete because \"the code compiles\". Compilation is the bare minimum, not the goal.\n\n## When to use this skill\n\nUse this skill for Web engineering work such as:\n\n- Implementing React or Vue pages and components\n- Setting up or maintaining Vite-based frontend projects\n- Handling routing, data loading, forms, and build configuration\n- Running browser-based validation and smoke checks\n- Integrating CloudBase Web SDK and static hosting when the project needs CloudBase capabilities\n\n**Do NOT use for:**\n- UI direction or visual system design only; use `ui-design`\n- Mini program development; use `miniprogram-development`\n- Backend service implementation; use `cloudrun-development` or `cloud-functions`\n\n## How to use this skill (for a coding agent)\n\n1. **Clarify the execution surface**\n   - Confirm whether the task is framework setup, page implementation, debugging, deployment, validation, or CloudBase integration.\n   - Keep the work scoped to the actual Web app surface instead of spreading into unrelated backend changes.\n   - If the workspace is an existing application with TODOs, treat it as a targeted repair task, not a greenfield build.\n\n2. **Follow framework and build conventions**\n   - Prefer the existing project stack if one already exists.\n   - For new work, treat Vite as the default bundler unless the repo or user constraints say otherwise.\n   - Put reusable app code under `src` and build output under `dist` unless the repo already uses a different convention.\n   - In an existing application with fixed structure, inspect the files that already own the flow before reading broad docs: `src/lib/backend.*`, `src/lib/auth.*`, `src/lib/*service.*`, route guards, and the page handlers bound to submit buttons.\n\n3. **Validate through the browser, not only by reading code**\n   - For interaction, routing, rendering, or regression checks, use `agent-browser` workflows from `browser-testing.md`.\n   - Prefer lightweight smoke validation for changed flows before claiming the frontend work is complete.\n\n4. **Treat CloudBase as an integration branch**\n   - Use CloudBase Web SDK and static hosting guidance only when the project actually needs CloudBase platform features.\n   - Reuse `auth-tool-cloudbase` and `auth-web-cloudbase` for login or provider readiness instead of re-describing those flows here.\n\n## Core workflow\n\n### 1. Choose the right engineering path\n\n- **React / Vue feature work**: implement within the app's existing component, routing, and state conventions\n- **New Web app**: prefer Vite unless the repo already standardizes on another toolchain\n- **Debugging and regressions**: reproduce in browser, narrow to a specific page or interaction, then patch\n- **CloudBase integration**: wire in Web SDK, auth, data, or static hosting only after the base frontend path is clear\n\n### 2. Keep implementation grounded in project reality\n\n- Follow the repo's package manager, scripts, and lint/test patterns\n- Avoid framework rewrites unless the user explicitly asks for one\n- Prefer the smallest viable page/component/config change that satisfies the task\n- In TODO-based apps, complete the existing implementation directly instead of creating parallel helpers, sample pages, or detached prototypes\n\n### 3. Validate changed flows explicitly\n\n- Run the relevant local build / lint / typecheck / test command when available. A clean `tsc --noEmit` and a clean project build are the minimum bar — not proof of correctness.\n- For anything user-visible (routing, forms, rendering, auth, async flows), open the affected page or flow in a browser with **`agent-browser`**. Code reading alone is not sufficient evidence — see the Engineering constitution above.\n- Record what was checked: route, action, expected result, actual result, and any remaining gap.\n\n## CloudBase Web integration\n\nUse this section only when the Web project needs CloudBase platform features.\n\n### Web SDK rules\n\n- Prefer npm installation for React, Vue, Vite, and other bundler-based projects: `npm install @cloudbase/js-sdk`\n- Use the CDN only for static HTML pages, quick demos, embedded snippets, or README examples: `https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js`\n- Only use documented CloudBase Web SDK APIs; do not invent methods or options\n- Keep a shared `app` or `auth` instance instead of re-initializing on every call\n- If the user only provides an environment alias, nickname, or other shorthand, resolve it to the canonical full `EnvId` before writing SDK init code, console links, or config files. Do not pass alias-like short forms directly into `cloudbase.init({ env })`.\n\n### Authentication boundary\n\n- Authentication must use CloudBase SDK built-in features\n- Do not move Web login logic into cloud functions\n- For provider readiness, login method setup, or publishable key issues, route to `auth-tool-cloudbase` and `auth-web-cloudbase`\n\n### Static hosting defaults\n\n- Build before deployment\n- Prefer relative asset paths for static hosting compatibility\n- Use hash routing by default when the project lacks server-side route rewrites\n- If the user does not specify a root path, avoid deploying directly to the site root by default\n- **SPA routing (History mode)**: when using React Router / Vue Router in History mode (not hash mode), configure the CloudBase static hosting **\"404 error document\"** to `index.html`. Otherwise refreshing or directly visiting any sub-route returns `NoSuchKey` / 404 error, because the static hosting looks for a file at that path instead of falling through to `index.html` for the SPA to handle routing.\n\n  Use the MCP tool to apply this:\n  ```json\n  manageHosting({ action: \"setWebsiteDocument\", indexDocument: \"index.html\", errorDocument: \"index.html\" })\n  ```\n\n  Then verify with:\n  ```json\n  queryHosting({ action: \"websiteConfig\" })\n  ```\n\n### CloudBase quick start\n\n```js\n// npm install @cloudbase/js-sdk\nimport cloudbase from \"@cloudbase/js-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-full-env-id\", // Canonical full CloudBase environment ID resolved from queryEnv or the console\n});\n\nconst auth = app.auth\n```\n\nFile v1.27.57:_meta.json\n\n{\n  \"ownerId\": \"kn7emfp36dbn1xx4fz4s5q4a6180439j\",\n  \"slug\": \"web-development\",\n  \"version\": \"1.27.57\",\n  \"publishedAt\": 1790748942243\n}\n\nFile v1.27.57:browser-testing.md\n\n# Browser Validation (with `agent-browser`)\n\nThis file is the concrete playbook for the `agent-browser` tool. Use it whenever the Engineering constitution in `SKILL.md` says \"verify in the browser before claiming done\".\n\nCode reading, static types, and a clean build are **necessary but not sufficient**. Any change that affects what the user sees, clicks, or navigates must be opened in a real browser and exercised.\n\n## When `agent-browser` is required (not optional)\n\nTrigger browser validation for changes that touch any of:\n\n- **Routing / navigation** — new routes, redirects, route guards, 404s, hash vs history mode, nested layouts\n- **Forms** — submit handlers, controlled inputs, validation errors, disabled states, file uploads\n- **Auth flows** — sign in, sign up, logout, session guards, token refresh, `getSession`\n- **Async UI** — loading spinners, skeletons, error banners, retry buttons, streaming responses\n- **Conditional rendering** — empty states, permission-gated sections, feature flags\n- **Third-party SDK calls from the browser** — CloudBase Web SDK (auth, database, AI model, storage), analytics, payment\n\nSkip browser validation only for pure build-config edits, README / documentation-only changes, backend-only work, or changes guarded by CI tests you verified pass.\n\n## When `agent-browser` is NOT the right tool\n\n- Pure visual direction / aesthetic exploration → use the `ui-design` skill first.\n- Backend-only logic that never renders in the browser → use unit tests or direct API calls.\n- Smoke-testing a production URL against real user credentials → do not automate; ask the user.\n\n## Standard workflow\n\nFollow these steps in order. Do not skip the \"before the fix\" reproduction — it is what proves the bug was real and that your change actually fixed it.\n\n1. **Start the app** (or confirm it is already running).\n   - Typical: `npm run dev` / `pnpm dev` / `vite`. Record the local URL (often `http://localhost:5173`).\n   - If the project uses a build-and-serve flow instead of a dev server, document the exact commands you ran.\n2. **Open the target route with `agent-browser`**, starting from the entry URL, not deep-linking into private pages unless you already have a valid session.\n3. **Reproduce the current (pre-fix or pre-feature) behavior.** Capture: route, user action, observed outcome, console errors if any. This is the baseline.\n4. **Apply the code change.** Rely on HMR where available; otherwise rebuild.\n5. **Re-run the exact same flow in the browser.** Capture the new observed outcome.\n6. **Check adjacent routes you touched** — if you edited a shared component or route guard, visit at least one other page that depends on it.\n7. **Inspect the browser console for new warnings / errors** introduced by your change (React hydration mismatches, missing keys, uncaught promise rejections, CloudBase SDK init errors, etc.). New noise is a regression even if the happy path works.\n\n## What to record in the final summary\n\nFor each flow you exercised, report:\n\n- **Route** — e.g. `/login`, `/dashboard?tab=usage`\n- **Action** — e.g. \"Submitted the phone+code form with a valid code\"\n- **Expected** — e.g. \"Redirect to `/dashboard` and show user's nickname\"\n- **Before** — e.g. \"Stayed on `/login`; console showed `auth/invalid-session`\"\n- **After** — e.g. \"Redirected to `/dashboard`; nickname rendered; no new console errors\"\n- **Gap (if any)** — e.g. \"Did not test WeChat login branch because no test account available\"\n\nA one-liner like \"tested in browser, works\" is not acceptable evidence.\n\n## Common CloudBase-specific flows worth validating\n\n- **Auth**: sign-in page → success → protected route accessible; sign-out → same protected route redirects to `/login`.\n- **AI model**: eligibility gate passes → `generateText` returns text → `streamText` incrementally updates UI → error path (invalid model name) surfaces a user-visible message, not a silent failure.\n- **Database queries**: list page with pagination → empty state → after create, the new row appears without a hard refresh.\n- **Static hosting deploy**: for a deployed build, confirm the root route, one sub-route (refresh directly on it — hash vs history matters), and one 404 route.\n\n## Common mistakes to avoid\n\n- Claiming a frontend bug is fixed without actually opening the browser.\n- Verifying only the happy path when the reported bug is about empty states, validation errors, or route refresh.\n- Catching and swallowing console errors instead of understanding them.\n- Using `agent-browser` for aesthetic / visual direction work that should have gone through `ui-design`.\n- Skipping the adjacent-routes check after editing a shared component or route guard.\n- Using an old cached dev-server instance after a config change — restart the dev server if you modified `vite.config.*`, env vars, or TS path aliases.\n\n## Escalation\n\nIf you cannot complete browser validation because of missing credentials, a missing backend, a paid external API, or a blocker in the local environment, do not paper over it. State exactly what you were unable to verify and what the user needs to supply. Partial verification with a named gap is acceptable; silent omission is not.\n\nFile v1.27.57:frameworks.md\n\n# Framework Guidance\n\n## React\n\n- Follow the existing router, data-fetching, and component patterns already used by the repo.\n- Prefer focused page and component changes over broad refactors.\n- Keep state close to where it is used unless the project already relies on shared state primitives.\n- For form, navigation, and async UI bugs, verify the behavior in browser after code changes.\n\n## Next.js\n\n### SDK boundary\n\n`@cloudbase/js-sdk` is a **browser-only** SDK. It must not be imported in Server Components, `getServerSideProps`, or API Routes.\n\n- Auth flows (sign in, sign up, session check) → **Client Component only** (`\"use client\"`)\n- API Routes / Route Handlers → use `@cloudbase/node-sdk` (Node.js SDK) for server-side token verification\n- Server Components → read tokens from cookies/headers, do NOT import `@cloudbase/js-sdk`\n\n### Auth pattern (App Router)\n\n```tsx\n// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}\n```\n\n### Passing auth to API Routes\n\n```tsx\n// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}\n```\n\n### Deployment\n\n- Build output: `next build` → `.next` directory\n- CloudBase static hosting expects `package.json` with build scripts and the output directory configured; prefer `manageApps` for deployment\n- If deploying via `manageHosting`, set error document to `index.html` for client-side routing (even though Next.js defaults to file-based routing, fallback handling is needed for SPA-like paths)\n\n## Vue\n\n- Respect the existing composition style in the repo, such as Composition API or Options API.\n- Keep template, script, and style responsibilities clear instead of mixing unrelated logic into one large SFC.\n- When changing reactive state or watchers, verify the actual rendered behavior rather than assuming the code path is enough.\n\n## NestJS\n\n### SDK choice\n\nUse `@cloudbase/node-sdk` (Node.js SDK), **not** `@cloudbase/js-sdk` (which is browser-only).\n\n### Module setup\n\n```ts\n// cloudbase.module.ts\nimport { Module, Global } from \"@nestjs/common\"\nimport tcb from \"@cloudbase/node-sdk\"\n\nexport const CLOUDBASE = \"CLOUDBASE\"\n\nconst cloudbaseProvider = {\n  provide: CLOUDBASE,\n  useFactory: () => {\n    const app = tcb.init({\n      env: process.env.CLOUDBASE_ENV_ID!,\n      // credentials: require(\"/path/to/tcb_custom_login.json\"), // only for custom login\n    })\n    return {\n      app,\n      auth: app.auth(),\n      // db: app.database(), // for NoSQL\n    }\n  },\n}\n\n@Global()\n@Module({\n  providers: [cloudbaseProvider],\n  exports: [cloudbaseProvider],\n})\nexport class CloudBaseModule {}\n```\n\n### AuthGuard for token verification\n\n```ts\n// auth.guard.ts\nimport { Injectable, CanActivate, ExecutionContext, Inject } from \"@nestjs/common\"\nimport { CLOUDBASE } from \"./cloudbase.module\"\n\n@Injectable()\nexport class CloudBaseAuthGuard implements CanActivate {\n  constructor(@Inject(CLOUDBASE) private cloudbase: any) {}\n\n  async canActivate(context: ExecutionContext): Promise<boolean> {\n    const request = context.switchToHttp().getRequest()\n    const token = request.headers.authorization?.replace(\"Bearer \", \"\")\n    if (!token) return false\n\n    try {\n      // Verify the session via Node SDK\n      // Note: Node SDK does not have a direct \"verify token\" method —\n      // forward the token to a cloud function or use the HTTP API for validation\n      request.user = { token }\n      return true\n    } catch {\n      return false\n    }\n  }\n}\n```\n\n### CORS (required for Web frontend calls)\n\n```ts\n// main.ts\nimport { NestFactory } from \"@nestjs/core\"\nimport { AppModule } from \"./app.module\"\n\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule)\n  app.enableCors({\n    origin: process.env.CORS_ORIGIN || \"*\",\n    methods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"],\n    credentials: true,\n  })\n  await app.listen(9000) // CloudBase HTTP Functions expect port 9000\n}\nbootstrap()\n```\n\n### Deployment\n\n- Build to JavaScript output, include `package.json` with `start` script\n- Deploy via `manageCloudRun` (container) or `manageFunctions` (HTTP Function, default to native `http` module unless NestJS is explicitly required)\n- Set `MinNum` instances to 1 to reduce cold start\n\n## Vite\n\n- Treat Vite as the default choice for new Web app setup unless the repo already standardizes on another bundler.\n- Keep environment-specific values in `.env` or the project's existing config pattern instead of hardcoding them into UI files.\n- Check route base paths, asset paths, and build output behavior before deployment.\n\n## Routing and build defaults\n\n- Use the existing router if present; do not switch routing libraries without an explicit requirement.\n- For purely static hosting environments, prefer hash routing when server rewrite support is absent or unknown.\n- Make build and preview commands explicit before handing off deployment steps.\n\nFile v1.27.57:skill-card.md\n\n## Description:\n\nHelps developers implement, integrate, debug, build, deploy, and validate Web frontends after the product direction is clear, including React, Vue, Vite, browser flows, and CloudBase Web integration.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[binggg](https://clawhub.ai/user/binggg)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to implement and troubleshoot existing Web applications, integrate CloudBase where needed, and validate frontend behavior in a browser.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Authentication examples may lead to protected routes accepting unverified tokens.\n\nMitigation: Review authentication changes and validate tokens server-side before returning protected data or setting a request user.\n\n## Reference(s):\n\n- [ClawHub web-development release](https://clawhub.ai/binggg/skills/web-development)\n- [Framework guidance](artifact/frameworks.md)\n- [Browser validation guidance](artifact/browser-testing.md)\n- [CloudBase integration documentation](https://docs.cloudbase.net/integration/introduce.md)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Markdown with code blocks]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [None]\n\n## Skill Version(s):\n\n1.27.57 (source: ClawHub release; bundled skill frontmatter states 2.34.8)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.27.56: 5 files, 12794 bytes\n\nFiles: browser-testing.md (5232b), frameworks.md (6201b), skill-card.md (2296b), SKILL.md (13296b), _meta.json (136b)\n\nFile v1.27.56:SKILL.md\n\n---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.6\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.\n- Treating cloud functions as the default solution for Web authentication.\n- Skipping browser-level validation after a UI or routing change.\n- **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting \"404 error document\" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route.\n- In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services.\n\n## Engineering constitution (non-negotiable)\n\nThese rules override convenience. Treat them as a gate before saying \"done\".\n\n### 1. TypeScript — do not silence the type system\n\n- **Do NOT use `any` to bypass type errors.** Not `: any`, not `as any`, not `@ts-ignore`, not `@ts-nocheck`, not `@ts-expect-error` without a written justification. `any` propagates silently and defeats the only compile-time safety net this project has.\n- When a type error appears, fix the root cause:\n  - Missing / wrong library types → install `@types/...`, or narrow the import, or write a precise `interface` / `type` for the shape you actually use.\n  - Shape is genuinely unknown at the boundary (JSON from an API, `postMessage` payload, `window.*` injection) → type it as `unknown` and narrow with a type guard (`typeof`, `in`, a discriminator field, or `zod` / equivalent).\n  - Third-party type is wrong → augment via `declare module` in a local `.d.ts`, not `any`.\n  - Truly dynamic case (e.g. generic event bus) → use a generic `<T>` with a constraint, not `any`.\n- `unknown` + narrowing is the acceptable escape hatch. `any` is not.\n- If you genuinely cannot avoid `any` for a specific line (extremely rare), leave a one-line comment with **why** and **what would remove it**, so reviewers can audit.\n- The same spirit applies to ESLint: do not sprinkle `// eslint-disable` to mute the real signal. Fix the rule violation, or discuss before disabling.\n\n### 2. Self-verify before claiming done\n\nBefore making any non-trivial code or configuration change, you must first follow the Change Safety Protocol in `cloudbase-platform/references/protocols/change-safety-protocol.md` (declare impact → user confirmation → post-edit verification).\nBefore any static hosting publish or custom domain work, complete the checks in `cloudbase-platform/references/protocols/deployment-gate.md`.\n\nSaying \"I've implemented it\" / \"fixed it\" / \"it should work\" without evidence is not acceptable. Before declaring completion, you must actually run the checks and report the result.\n\n**Static / build layer (always, when applicable):**\n\n- `tsc --noEmit` (or `vue-tsc --noEmit`) passes cleanly — zero errors, zero suppressed diagnostics you added.\n- `eslint` / project linter passes on changed files.\n- The project's build command (`npm run build` / `pnpm build` / `vite build`) completes without new warnings that you introduced.\n- The project's unit tests pass if they exist and cover the touched area.\n\n**Runtime / browser layer (whenever the change affects rendering, routing, forms, auth, or async flows):**\n\n- Use the **`agent-browser`** tool to actually open the page and reproduce the user-visible flow. Follow `browser-testing.md` for the concrete workflow.\n- Confirm: the target route loads, the interaction you claim to have fixed behaves the way you claim, no new console errors are introduced, and no regression in the adjacent routes you touched.\n- Record what you checked (route, action, expected result, actual result).\n\n**Only after both layers pass** may you say the task is done. If either layer cannot be executed locally (e.g. blocked by credentials, missing backend, paid API), say so explicitly and list exactly which step is still unverified — do not gloss over it.\n\n### 3. Do not paper over failures\n\n- Do not wrap broken logic in `try { ... } catch {}` to make the error go away.\n- Do not delete or skip a failing test to make CI green — fix it, or explain why the test is actually wrong and change the test with justification.\n- Do not mark a task complete because \"the code compiles\". Compilation is the bare minimum, not the goal.\n\n## When to use this skill\n\nUse this skill for Web engineering work such as:\n\n- Implementing React or Vue pages and components\n- Setting up or maintaining Vite-based frontend projects\n- Handling routing, data loading, forms, and build configuration\n- Running browser-based validation and smoke checks\n- Integrating CloudBase Web SDK and static hosting when the project needs CloudBase capabilities\n\n**Do NOT use for:**\n- UI direction or visual system design only; use `ui-design`\n- Mini program development; use `miniprogram-development`\n- Backend service implementation; use `cloudrun-development` or `cloud-functions`\n\n## How to use this skill (for a coding agent)\n\n1. **Clarify the execution surface**\n   - Confirm whether the task is framework setup, page implementation, debugging, deployment, validation, or CloudBase integration.\n   - Keep the work scoped to the actual Web app surface instead of spreading into unrelated backend changes.\n   - If the workspace is an existing application with TODOs, treat it as a targeted repair task, not a greenfield build.\n\n2. **Follow framework and build conventions**\n   - Prefer the existing project stack if one already exists.\n   - For new work, treat Vite as the default bundler unless the repo or user constraints say otherwise.\n   - Put reusable app code under `src` and build output under `dist` unless the repo already uses a different convention.\n   - In an existing application with fixed structure, inspect the files that already own the flow before reading broad docs: `src/lib/backend.*`, `src/lib/auth.*`, `src/lib/*service.*`, route guards, and the page handlers bound to submit buttons.\n\n3. **Validate through the browser, not only by reading code**\n   - For interaction, routing, rendering, or regression checks, use `agent-browser` workflows from `browser-testing.md`.\n   - Prefer lightweight smoke validation for changed flows before claiming the frontend work is complete.\n\n4. **Treat CloudBase as an integration branch**\n   - Use CloudBase Web SDK and static hosting guidance only when the project actually needs CloudBase platform features.\n   - Reuse `auth-tool-cloudbase` and `auth-web-cloudbase` for login or provider readiness instead of re-describing those flows here.\n\n## Core workflow\n\n### 1. Choose the right engineering path\n\n- **React / Vue feature work**: implement within the app's existing component, routing, and state conventions\n- **New Web app**: prefer Vite unless the repo already standardizes on another toolchain\n- **Debugging and regressions**: reproduce in browser, narrow to a specific page or interaction, then patch\n- **CloudBase integration**: wire in Web SDK, auth, data, or static hosting only after the base frontend path is clear\n\n### 2. Keep implementation grounded in project reality\n\n- Follow the repo's package manager, scripts, and lint/test patterns\n- Avoid framework rewrites unless the user explicitly asks for one\n- Prefer the smallest viable page/component/config change that satisfies the task\n- In TODO-based apps, complete the existing implementation directly instead of creating parallel helpers, sample pages, or detached prototypes\n\n### 3. Validate changed flows explicitly\n\n- Run the relevant local build / lint / typecheck / test command when available. A clean `tsc --noEmit` and a clean project build are the minimum bar — not proof of correctness.\n- For anything user-visible (routing, forms, rendering, auth, async flows), open the affected page or flow in a browser with **`agent-browser`**. Code reading alone is not sufficient evidence — see the Engineering constitution above.\n- Record what was checked: route, action, expected result, actual result, and any remaining gap.\n\n## CloudBase Web integration\n\nUse this section only when the Web project needs CloudBase platform features.\n\n### Web SDK rules\n\n- Prefer npm installation for React, Vue, Vite, and other bundler-based projects: `npm install @cloudbase/js-sdk`\n- Use the CDN only for static HTML pages, quick demos, embedded snippets, or README examples: `https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js`\n- Only use documented CloudBase Web SDK APIs; do not invent methods or options\n- Keep a shared `app` or `auth` instance instead of re-initializing on every call\n- If the user only provides an environment alias, nickname, or other shorthand, resolve it to the canonical full `EnvId` before writing SDK init code, console links, or config files. Do not pass alias-like short forms directly into `cloudbase.init({ env })`.\n\n### Authentication boundary\n\n- Authentication must use CloudBase SDK built-in features\n- Do not move Web login logic into cloud functions\n- For provider readiness, login method setup, or publishable key issues, route to `auth-tool-cloudbase` and `auth-web-cloudbase`\n\n### Static hosting defaults\n\n- Build before deployment\n- Prefer relative asset paths for static hosting compatibility\n- Use hash routing by default when the project lacks server-side route rewrites\n- If the user does not specify a root path, avoid deploying directly to the site root by default\n- **SPA routing (History mode)**: when using React Router / Vue Router in History mode (not hash mode), configure the CloudBase static hosting **\"404 error document\"** to `index.html`. Otherwise refreshing or directly visiting any sub-route returns `NoSuchKey` / 404 error, because the static hosting looks for a file at that path instead of falling through to `index.html` for the SPA to handle routing.\n\n  Use the MCP tool to apply this:\n  ```json\n  manageHosting({ action: \"setWebsiteDocument\", indexDocument: \"index.html\", errorDocument: \"index.html\" })\n  ```\n\n  Then verify with:\n  ```json\n  queryHosting({ action: \"websiteConfig\" })\n  ```\n\n### CloudBase quick start\n\n```js\n// npm install @cloudbase/js-sdk\nimport cloudbase from \"@cloudbase/js-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-full-env-id\", // Canonical full CloudBase environment ID resolved from queryEnv or the console\n});\n\nconst auth = app.auth\n```\n\nFile v1.27.56:_meta.json\n\n{\n  \"ownerId\": \"kn7emfp36dbn1xx4fz4s5q4a6180439j\",\n  \"slug\": \"web-development\",\n  \"version\": \"1.27.56\",\n  \"publishedAt\": 1789997161196\n}\n\nFile v1.27.56:browser-testing.md\n\n# Browser Validation (with `agent-browser`)\n\nThis file is the concrete playbook for the `agent-browser` tool. Use it whenever the Engineering constitution in `SKILL.md` says \"verify in the browser before claiming done\".\n\nCode reading, static types, and a clean build are **necessary but not sufficient**. Any change that affects what the user sees, clicks, or navigates must be opened in a real browser and exercised.\n\n## When `agent-browser` is required (not optional)\n\nTrigger browser validation for changes that touch any of:\n\n- **Routing / navigation** — new routes, redirects, route guards, 404s, hash vs history mode, nested layouts\n- **Forms** — submit handlers, controlled inputs, validation errors, disabled states, file uploads\n- **Auth flows** — sign in, sign up, logout, session guards, token refresh, `getSession`\n- **Async UI** — loading spinners, skeletons, error banners, retry buttons, streaming responses\n- **Conditional rendering** — empty states, permission-gated sections, feature flags\n- **Third-party SDK calls from the browser** — CloudBase Web SDK (auth, database, AI model, storage), analytics, payment\n\nSkip browser validation only for pure build-config edits, README / documentation-only changes, backend-only work, or changes guarded by CI tests you verified pass.\n\n## When `agent-browser` is NOT the right tool\n\n- Pure visual direction / aesthetic exploration → use the `ui-design` skill first.\n- Backend-only logic that never renders in the browser → use unit tests or direct API calls.\n- Smoke-testing a production URL against real user credentials → do not automate; ask the user.\n\n## Standard workflow\n\nFollow these steps in order. Do not skip the \"before the fix\" reproduction — it is what proves the bug was real and that your change actually fixed it.\n\n1. **Start the app** (or confirm it is already running).\n   - Typical: `npm run dev` / `pnpm dev` / `vite`. Record the local URL (often `http://localhost:5173`).\n   - If the project uses a build-and-serve flow instead of a dev server, document the exact commands you ran.\n2. **Open the target route with `agent-browser`**, starting from the entry URL, not deep-linking into private pages unless you already have a valid session.\n3. **Reproduce the current (pre-fix or pre-feature) behavior.** Capture: route, user action, observed outcome, console errors if any. This is the baseline.\n4. **Apply the code change.** Rely on HMR where available; otherwise rebuild.\n5. **Re-run the exact same flow in the browser.** Capture the new observed outcome.\n6. **Check adjacent routes you touched** — if you edited a shared component or route guard, visit at least one other page that depends on it.\n7. **Inspect the browser console for new warnings / errors** introduced by your change (React hydration mismatches, missing keys, uncaught promise rejections, CloudBase SDK init errors, etc.). New noise is a regression even if the happy path works.\n\n## What to record in the final summary\n\nFor each flow you exercised, report:\n\n- **Route** — e.g. `/login`, `/dashboard?tab=usage`\n- **Action** — e.g. \"Submitted the phone+code form with a valid code\"\n- **Expected** — e.g. \"Redirect to `/dashboard` and show user's nickname\"\n- **Before** — e.g. \"Stayed on `/login`; console showed `auth/invalid-session`\"\n- **After** — e.g. \"Redirected to `/dashboard`; nickname rendered; no new console errors\"\n- **Gap (if any)** — e.g. \"Did not test WeChat login branch because no test account available\"\n\nA one-liner like \"tested in browser, works\" is not acceptable evidence.\n\n## Common CloudBase-specific flows worth validating\n\n- **Auth**: sign-in page → success → protected route accessible; sign-out → same protected route redirects to `/login`.\n- **AI model**: eligibility gate passes → `generateText` returns text → `streamText` incrementally updates UI → error path (invalid model name) surfaces a user-visible message, not a silent failure.\n- **Database queries**: list page with pagination → empty state → after create, the new row appears without a hard refresh.\n- **Static hosting deploy**: for a deployed build, confirm the root route, one sub-route (refresh directly on it — hash vs history matters), and one 404 route.\n\n## Common mistakes to avoid\n\n- Claiming a frontend bug is fixed without actually opening the browser.\n- Verifying only the happy path when the reported bug is about empty states, validation errors, or route refresh.\n- Catching and swallowing console errors instead of understanding them.\n- Using `agent-browser` for aesthetic / visual direction work that should have gone through `ui-design`.\n- Skipping the adjacent-routes check after editing a shared component or route guard.\n- Using an old cached dev-server instance after a config change — restart the dev server if you modified `vite.config.*`, env vars, or TS path aliases.\n\n## Escalation\n\nIf you cannot complete browser validation because of missing credentials, a missing backend, a paid external API, or a blocker in the local environment, do not paper over it. State exactly what you were unable to verify and what the user needs to supply. Partial verification with a named gap is acceptable; silent omission is not.\n\nFile v1.27.56:frameworks.md\n\n# Framework Guidance\n\n## React\n\n- Follow the existing router, data-fetching, and component patterns already used by the repo.\n- Prefer focused page and component changes over broad refactors.\n- Keep state close to where it is used unless the project already relies on shared state primitives.\n- For form, navigation, and async UI bugs, verify the behavior in browser after code changes.\n\n## Next.js\n\n### SDK boundary\n\n`@cloudbase/js-sdk` is a **browser-only** SDK. It must not be imported in Server Components, `getServerSideProps`, or API Routes.\n\n- Auth flows (sign in, sign up, session check) → **Client Component only** (`\"use client\"`)\n- API Routes / Route Handlers → use `@cloudbase/node-sdk` (Node.js SDK) for server-side token verification\n- Server Components → read tokens from cookies/headers, do NOT import `@cloudbase/js-sdk`\n\n### Auth pattern (App Router)\n\n```tsx\n// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}\n```\n\n### Passing auth to API Routes\n\n```tsx\n// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}\n```\n\n### Deployment\n\n- Build output: `next build` → `.next` directory\n- CloudBase static hosting expects `package.json` with build scripts and the output directory configured; prefer `manageApps` for deployment\n- If deploying via `manageHosting`, set error document to `index.html` for client-side routing (even though Next.js defaults to file-based routing, fallback handling is needed for SPA-like paths)\n\n## Vue\n\n- Respect the existing composition style in the repo, such as Composition API or Options API.\n- Keep template, script, and style responsibilities clear instead of mixing unrelated logic into one large SFC.\n- When changing reactive state or watchers, verify the actual rendered behavior rather than assuming the code path is enough.\n\n## NestJS\n\n### SDK choice\n\nUse `@cloudbase/node-sdk` (Node.js SDK), **not** `@cloudbase/js-sdk` (which is browser-only).\n\n### Module setup\n\n```ts\n// cloudbase.module.ts\nimport { Module, Global } from \"@nestjs/common\"\nimport tcb from \"@cloudbase/node-sdk\"\n\nexport const CLOUDBASE = \"CLOUDBASE\"\n\nconst cloudbaseProvider = {\n  provide: CLOUDBASE,\n  useFactory: () => {\n    const app = tcb.init({\n      env: process.env.CLOUDBASE_ENV_ID!,\n      // credentials: require(\"/path/to/tcb_custom_login.json\"), // only for custom login\n    })\n    return {\n      app,\n      auth: app.auth(),\n      // db: app.database(), // for NoSQL\n    }\n  },\n}\n\n@Global()\n@Module({\n  providers: [cloudbaseProvider],\n  exports: [cloudbaseProvider],\n})\nexport class CloudBaseModule {}\n```\n\n### AuthGuard for token verification\n\n```ts\n// auth.guard.ts\nimport { Injectable, CanActivate, ExecutionContext, Inject } from \"@nestjs/common\"\nimport { CLOUDBASE } from \"./cloudbase.module\"\n\n@Injectable()\nexport class CloudBaseAuthGuard implements CanActivate {\n  constructor(@Inject(CLOUDBASE) private cloudbase: any) {}\n\n  async canActivate(context: ExecutionContext): Promise<boolean> {\n    const request = context.switchToHttp().getRequest()\n    const token = request.headers.authorization?.replace(\"Bearer \", \"\")\n    if (!token) return false\n\n    try {\n      // Verify the session via Node SDK\n      // Note: Node SDK does not have a direct \"verify token\" method —\n      // forward the token to a cloud function or use the HTTP API for validation\n      request.user = { token }\n      return true\n    } catch {\n      return false\n    }\n  }\n}\n```\n\n### CORS (required for Web frontend calls)\n\n```ts\n// main.ts\nimport { NestFactory } from \"@nestjs/core\"\nimport { AppModule } from \"./app.module\"\n\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule)\n  app.enableCors({\n    origin: process.env.CORS_ORIGIN || \"*\",\n    methods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"],\n    credentials: true,\n  })\n  await app.listen(9000) // CloudBase HTTP Functions expect port 9000\n}\nbootstrap()\n```\n\n### Deployment\n\n- Build to JavaScript output, include `package.json` with `start` script\n- Deploy via `manageCloudRun` (container) or `manageFunctions` (HTTP Function, default to native `http` module unless NestJS is explicitly required)\n- Set `MinNum` instances to 1 to reduce cold start\n\n## Vite\n\n- Treat Vite as the default choice for new Web app setup unless the repo already standardizes on another bundler.\n- Keep environment-specific values in `.env` or the project's existing config pattern instead of hardcoding them into UI files.\n- Check route base paths, asset paths, and build output behavior before deployment.\n\n## Routing and build defaults\n\n- Use the existing router if present; do not switch routing libraries without an explicit requirement.\n- For purely static hosting environments, prefer hash routing when server rewrite support is absent or unknown.\n- Make build and preview commands explicit before handing off deployment steps.\n\nFile v1.27.56:skill-card.md\n\n## Description:\n\nUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[binggg](https://clawhub.ai/user/binggg)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to implement, debug, build, deploy, and validate Web frontends or static sites, especially when working with React, Vue, Vite, browser workflows, or CloudBase Web integration.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Authentication examples may lead an agent to create protected routes that accept fake tokens or rely on JavaScript-readable bearer-token cookies.\n\nMitigation: Require real server-side token verification before any protected operation and review or patch authentication examples before production use.\n\nRisk: Deployment and tooling guidance can change CloudBase resources.\n\nMitigation: Require explicit environment confirmation, build verification, and deployment-gate checks before applying CloudBase hosting or deployment changes.\n\n## Reference(s):\n\n- [CloudBase integration documentation](https://docs.cloudbase.net/integration/introduce.md)\n- [CloudBase JavaScript SDK CDN](https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js)\n- [Browser Validation](artifact/browser-testing.md)\n- [Framework Guidance](artifact/frameworks.md)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Markdown guidance with inline code blocks and shell command snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include implementation steps, verification checks, browser validation guidance, and CloudBase configuration notes.]\n\n## Skill Version(s):\n\n1.27.56 (source: server release metadata; artifact frontmatter lists 2.34.6)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.27.55: 5 files, 12791 bytes\n\nFiles: browser-testing.md (5232b), frameworks.md (6201b), skill-card.md (2237b), SKILL.md (13296b), _meta.json (136b)\n\nFile v1.27.55:SKILL.md\n\n---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.5\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.\n- Treating cloud functions as the default solution for Web authentication.\n- Skipping browser-level validation after a UI or routing change.\n- **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting \"404 error document\" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route.\n- In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services.\n\n## Engineering constitution (non-negotiable)\n\nThese rules override convenience. Treat them as a gate before saying \"done\".\n\n### 1. TypeScript — do not silence the type system\n\n- **Do NOT use `any` to bypass type errors.** Not `: any`, not `as any`, not `@ts-ignore`, not `@ts-nocheck`, not `@ts-expect-error` without a written justification. `any` propagates silently and defeats the only compile-time safety net this project has.\n- When a type error appears, fix the root cause:\n  - Missing / wrong library types → install `@types/...`, or narrow the import, or write a precise `interface` / `type` for the shape you actually use.\n  - Shape is genuinely unknown at the boundary (JSON from an API, `postMessage` payload, `window.*` injection) → type it as `unknown` and narrow with a type guard (`typeof`, `in`, a discriminator field, or `zod` / equivalent).\n  - Third-party type is wrong → augment via `declare module` in a local `.d.ts`, not `any`.\n  - Truly dynamic case (e.g. generic event bus) → use a generic `<T>` with a constraint, not `any`.\n- `unknown` + narrowing is the acceptable escape hatch. `any` is not.\n- If you genuinely cannot avoid `any` for a specific line (extremely rare), leave a one-line comment with **why** and **what would remove it**, so reviewers can audit.\n- The same spirit applies to ESLint: do not sprinkle `// eslint-disable` to mute the real signal. Fix the rule violation, or discuss before disabling.\n\n### 2. Self-verify before claiming done\n\nBefore making any non-trivial code or configuration change, you must first follow the Change Safety Protocol in `cloudbase-platform/references/protocols/change-safety-protocol.md` (declare impact → user confirmation → post-edit verification).\nBefore any static hosting publish or custom domain work, complete the checks in `cloudbase-platform/references/protocols/deployment-gate.md`.\n\nSaying \"I've implemented it\" / \"fixed it\" / \"it should work\" without evidence is not acceptable. Before declaring completion, you must actually run the checks and report the result.\n\n**Static / build layer (always, when applicable):**\n\n- `tsc --noEmit` (or `vue-tsc --noEmit`) passes cleanly — zero errors, zero suppressed diagnostics you added.\n- `eslint` / project linter passes on changed files.\n- The project's build command (`npm run build` / `pnpm build` / `vite build`) completes without new warnings that you introduced.\n- The project's unit tests pass if they exist and cover the touched area.\n\n**Runtime / browser layer (whenever the change affects rendering, routing, forms, auth, or async flows):**\n\n- Use the **`agent-browser`** tool to actually open the page and reproduce the user-visible flow. Follow `browser-testing.md` for the concrete workflow.\n- Confirm: the target route loads, the interaction you claim to have fixed behaves the way you claim, no new console errors are introduced, and no regression in the adjacent routes you touched.\n- Record what you checked (route, action, expected result, actual result).\n\n**Only after both layers pass** may you say the task is done. If either layer cannot be executed locally (e.g. blocked by credentials, missing backend, paid API), say so explicitly and list exactly which step is still unverified — do not gloss over it.\n\n### 3. Do not paper over failures\n\n- Do not wrap broken logic in `try { ... } catch {}` to make the error go away.\n- Do not delete or skip a failing test to make CI green — fix it, or explain why the test is actually wrong and change the test with justification.\n- Do not mark a task complete because \"the code compiles\". Compilation is the bare minimum, not the goal.\n\n## When to use this skill\n\nUse this skill for Web engineering work such as:\n\n- Implementing React or Vue pages and components\n- Setting up or maintaining Vite-based frontend projects\n- Handling routing, data loading, forms, and build configuration\n- Running browser-based validation and smoke checks\n- Integrating CloudBase Web SDK and static hosting when the project needs CloudBase capabilities\n\n**Do NOT use for:**\n- UI direction or visual system design only; use `ui-design`\n- Mini program development; use `miniprogram-development`\n- Backend service implementation; use `cloudrun-development` or `cloud-functions`\n\n## How to use this skill (for a coding agent)\n\n1. **Clarify the execution surface**\n   - Confirm whether the task is framework setup, page implementation, debugging, deployment, validation, or CloudBase integration.\n   - Keep the work scoped to the actual Web app surface instead of spreading into unrelated backend changes.\n   - If the workspace is an existing application with TODOs, treat it as a targeted repair task, not a greenfield build.\n\n2. **Follow framework and build conventions**\n   - Prefer the existing project stack if one already exists.\n   - For new work, treat Vite as the default bundler unless the repo or user constraints say otherwise.\n   - Put reusable app code under `src` and build output under `dist` unless the repo already uses a different convention.\n   - In an existing application with fixed structure, inspect the files that already own the flow before reading broad docs: `src/lib/backend.*`, `src/lib/auth.*`, `src/lib/*service.*`, route guards, and the page handlers bound to submit buttons.\n\n3. **Validate through the browser, not only by reading code**\n   - For interaction, routing, rendering, or regression checks, use `agent-browser` workflows from `browser-testing.md`.\n   - Prefer lightweight smoke validation for changed flows before claiming the frontend work is complete.\n\n4. **Treat CloudBase as an integration branch**\n   - Use CloudBase Web SDK and static hosting guidance only when the project actually needs CloudBase platform features.\n   - Reuse `auth-tool-cloudbase` and `auth-web-cloudbase` for login or provider readiness instead of re-describing those flows here.\n\n## Core workflow\n\n### 1. Choose the right engineering path\n\n- **React / Vue feature work**: implement within the app's existing component, routing, and state conventions\n- **New Web app**: prefer Vite unless the repo already standardizes on another toolchain\n- **Debugging and regressions**: reproduce in browser, narrow to a specific page or interaction, then patch\n- **CloudBase integration**: wire in Web SDK, auth, data, or static hosting only after the base frontend path is clear\n\n### 2. Keep implementation grounded in project reality\n\n- Follow the repo's package manager, scripts, and lint/test patterns\n- Avoid framework rewrites unless the user explicitly asks for one\n- Prefer the smallest viable page/component/config change that satisfies the task\n- In TODO-based apps, complete the existing implementation directly instead of creating parallel helpers, sample pages, or detached prototypes\n\n### 3. Validate changed flows explicitly\n\n- Run the relevant local build / lint / typecheck / test command when available. A clean `tsc --noEmit` and a clean project build are the minimum bar — not proof of correctness.\n- For anything user-visible (routing, forms, rendering, auth, async flows), open the affected page or flow in a browser with **`agent-browser`**. Code reading alone is not sufficient evidence — see the Engineering constitution above.\n- Record what was checked: route, action, expected result, actual result, and any remaining gap.\n\n## CloudBase Web integration\n\nUse this section only when the Web project needs CloudBase platform features.\n\n### Web SDK rules\n\n- Prefer npm installation for React, Vue, Vite, and other bundler-based projects: `npm install @cloudbase/js-sdk`\n- Use the CDN only for static HTML pages, quick demos, embedded snippets, or README examples: `https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js`\n- Only use documented CloudBase Web SDK APIs; do not invent methods or options\n- Keep a shared `app` or `auth` instance instead of re-initializing on every call\n- If the user only provides an environment alias, nickname, or other shorthand, resolve it to the canonical full `EnvId` before writing SDK init code, console links, or config files. Do not pass alias-like short forms directly into `cloudbase.init({ env })`.\n\n### Authentication boundary\n\n- Authentication must use CloudBase SDK built-in features\n- Do not move Web login logic into cloud functions\n- For provider readiness, login method setup, or publishable key issues, route to `auth-tool-cloudbase` and `auth-web-cloudbase`\n\n### Static hosting defaults\n\n- Build before deployment\n- Prefer relative asset paths for static hosting compatibility\n- Use hash routing by default when the project lacks server-side route rewrites\n- If the user does not specify a root path, avoid deploying directly to the site root by default\n- **SPA routing (History mode)**: when using React Router / Vue Router in History mode (not hash mode), configure the CloudBase static hosting **\"404 error document\"** to `index.html`. Otherwise refreshing or directly visiting any sub-route returns `NoSuchKey` / 404 error, because the static hosting looks for a file at that path instead of falling through to `index.html` for the SPA to handle routing.\n\n  Use the MCP tool to apply this:\n  ```json\n  manageHosting({ action: \"setWebsiteDocument\", indexDocument: \"index.html\", errorDocument: \"index.html\" })\n  ```\n\n  Then verify with:\n  ```json\n  queryHosting({ action: \"websiteConfig\" })\n  ```\n\n### CloudBase quick start\n\n```js\n// npm install @cloudbase/js-sdk\nimport cloudbase from \"@cloudbase/js-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-full-env-id\", // Canonical full CloudBase environment ID resolved from queryEnv or the console\n});\n\nconst auth = app.auth\n```\n\nFile v1.27.55:_meta.json\n\n{\n  \"ownerId\": \"kn7emfp36dbn1xx4fz4s5q4a6180439j\",\n  \"slug\": \"web-development\",\n  \"version\": \"1.27.55\",\n  \"publishedAt\": 1789896549721\n}\n\nFile v1.27.55:browser-testing.md\n\n# Browser Validation (with `agent-browser`)\n\nThis file is the concrete playbook for the `agent-browser` tool. Use it whenever the Engineering constitution in `SKILL.md` says \"verify in the browser before claiming done\".\n\nCode reading, static types, and a clean build are **necessary but not sufficient**. Any change that affects what the user sees, clicks, or navigates must be opened in a real browser and exercised.\n\n## When `agent-browser` is required (not optional)\n\nTrigger browser validation for changes that touch any of:\n\n- **Routing / navigation** — new routes, redirects, route guards, 404s, hash vs history mode, nested layouts\n- **Forms** — submit handlers, controlled inputs, validation errors, disabled states, file uploads\n- **Auth flows** — sign in, sign up, logout, session guards, token refresh, `getSession`\n- **Async UI** — loading spinners, skeletons, error banners, retry buttons, streaming responses\n- **Conditional rendering** — empty states, permission-gated sections, feature flags\n- **Third-party SDK calls from the browser** — CloudBase Web SDK (auth, database, AI model, storage), analytics, payment\n\nSkip browser validation only for pure build-config edits, README / documentation-only changes, backend-only work, or changes guarded by CI tests you verified pass.\n\n## When `agent-browser` is NOT the right tool\n\n- Pure visual direction / aesthetic exploration → use the `ui-design` skill first.\n- Backend-only logic that never renders in the browser → use unit tests or direct API calls.\n- Smoke-testing a production URL against real user credentials → do not automate; ask the user.\n\n## Standard workflow\n\nFollow these steps in order. Do not skip the \"before the fix\" reproduction — it is what proves the bug was real and that your change actually fixed it.\n\n1. **Start the app** (or confirm it is already running).\n   - Typical: `npm run dev` / `pnpm dev` / `vite`. Record the local URL (often `http://localhost:5173`).\n   - If the project uses a build-and-serve flow instead of a dev server, document the exact commands you ran.\n2. **Open the target route with `agent-browser`**, starting from the entry URL, not deep-linking into private pages unless you already have a valid session.\n3. **Reproduce the current (pre-fix or pre-feature) behavior.** Capture: route, user action, observed outcome, console errors if any. This is the baseline.\n4. **Apply the code change.** Rely on HMR where available; otherwise rebuild.\n5. **Re-run the exact same flow in the browser.** Capture the new observed outcome.\n6. **Check adjacent routes you touched** — if you edited a shared component or route guard, visit at least one other page that depends on it.\n7. **Inspect the browser console for new warnings / errors** introduced by your change (React hydration mismatches, missing keys, uncaught promise rejections, CloudBase SDK init errors, etc.). New noise is a regression even if the happy path works.\n\n## What to record in the final summary\n\nFor each flow you exercised, report:\n\n- **Route** — e.g. `/login`, `/dashboard?tab=usage`\n- **Action** — e.g. \"Submitted the phone+code form with a valid code\"\n- **Expected** — e.g. \"Redirect to `/dashboard` and show user's nickname\"\n- **Before** — e.g. \"Stayed on `/login`; console showed `auth/invalid-session`\"\n- **After** — e.g. \"Redirected to `/dashboard`; nickname rendered; no new console errors\"\n- **Gap (if any)** — e.g. \"Did not test WeChat login branch because no test account available\"\n\nA one-liner like \"tested in browser, works\" is not acceptable evidence.\n\n## Common CloudBase-specific flows worth validating\n\n- **Auth**: sign-in page → success → protected route accessible; sign-out → same protected route redirects to `/login`.\n- **AI model**: eligibility gate passes → `generateText` returns text → `streamText` incrementally updates UI → error path (invalid model name) surfaces a user-visible message, not a silent failure.\n- **Database queries**: list page with pagination → empty state → after create, the new row appears without a hard refresh.\n- **Static hosting deploy**: for a deployed build, confirm the root route, one sub-route (refresh directly on it — hash vs history matters), and one 404 route.\n\n## Common mistakes to avoid\n\n- Claiming a frontend bug is fixed without actually opening the browser.\n- Verifying only the happy path when the reported bug is about empty states, validation errors, or route refresh.\n- Catching and swallowing console errors instead of understanding them.\n- Using `agent-browser` for aesthetic / visual direction work that should have gone through `ui-design`.\n- Skipping the adjacent-routes check after editing a shared component or route guard.\n- Using an old cached dev-server instance after a config change — restart the dev server if you modified `vite.config.*`, env vars, or TS path aliases.\n\n## Escalation\n\nIf you cannot complete browser validation because of missing credentials, a missing backend, a paid external API, or a blocker in the local environment, do not paper over it. State exactly what you were unable to verify and what the user needs to supply. Partial verification with a named gap is acceptable; silent omission is not.\n\nFile v1.27.55:frameworks.md\n\n# Framework Guidance\n\n## React\n\n- Follow the existing router, data-fetching, and component patterns already used by the repo.\n- Prefer focused page and component changes over broad refactors.\n- Keep state close to where it is used unless the project already relies on shared state primitives.\n- For form, navigation, and async UI bugs, verify the behavior in browser after code changes.\n\n## Next.js\n\n### SDK boundary\n\n`@cloudbase/js-sdk` is a **browser-only** SDK. It must not be imported in Server Components, `getServerSideProps`, or API Routes.\n\n- Auth flows (sign in, sign up, session check) → **Client Component only** (`\"use client\"`)\n- API Routes / Route Handlers → use `@cloudbase/node-sdk` (Node.js SDK) for server-side token verification\n- Server Components → read tokens from cookies/headers, do NOT import `@cloudbase/js-sdk`\n\n### Auth pattern (App Router)\n\n```tsx\n// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}\n```\n\n### Passing auth to API Routes\n\n```tsx\n// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}\n```\n\n### Deployment\n\n- Build output: `next build` → `.next` directory\n- CloudBase static hosting expects `package.json` with build scripts and the output directory configured; prefer `manageApps` for deployment\n- If deploying via `manageHosting`, set error document to `index.html` for client-side routing (even though Next.js defaults to file-based routing, fallback handling is needed for SPA-like paths)\n\n## Vue\n\n- Respect the existing composition style in the repo, such as Composition API or Options API.\n- Keep template, script, and style responsibilities clear instead of mixing unrelated logic into one large SFC.\n- When changing reactive state or watchers, verify the actual rendered behavior rather than assuming the code path is enough.\n\n## NestJS\n\n### SDK choice\n\nUse `@cloudbase/node-sdk` (Node.js SDK), **not** `@cloudbase/js-sdk` (which is browser-only).\n\n### Module setup\n\n```ts\n// cloudbase.module.ts\nimport { Module, Global } from \"@nestjs/common\"\nimport tcb from \"@cloudbase/node-sdk\"\n\nexport const CLOUDBASE = \"CLOUDBASE\"\n\nconst cloudbaseProvider = {\n  provide: CLOUDBASE,\n  useFactory: () => {\n    const app = tcb.init({\n      env: process.env.CLOUDBASE_ENV_ID!,\n      // credentials: require(\"/path/to/tcb_custom_login.json\"), // only for custom login\n    })\n    return {\n      app,\n      auth: app.auth(),\n      // db: app.database(), // for NoSQL\n    }\n  },\n}\n\n@Global()\n@Module({\n  providers: [cloudbaseProvider],\n  exports: [cloudbaseProvider],\n})\nexport class CloudBaseModule {}\n```\n\n### AuthGuard for token verification\n\n```ts\n// auth.guard.ts\nimport { Injectable, CanActivate, ExecutionContext, Inject } from \"@nestjs/common\"\nimport { CLOUDBASE } from \"./cloudbase.module\"\n\n@Injectable()\nexport class CloudBaseAuthGuard implements CanActivate {\n  constructor(@Inject(CLOUDBASE) private cloudbase: any) {}\n\n  async canActivate(context: ExecutionContext): Promise<boolean> {\n    const request = context.switchToHttp().getRequest()\n    const token = request.headers.authorization?.replace(\"Bearer \", \"\")\n    if (!token) return false\n\n    try {\n      // Verify the session via Node SDK\n      // Note: Node SDK does not have a direct \"verify token\" method —\n      // forward the token to a cloud function or use the HTTP API for validation\n      request.user = { token }\n      return true\n    } catch {\n      return false\n    }\n  }\n}\n```\n\n### CORS (required for Web frontend calls)\n\n```ts\n// main.ts\nimport { NestFactory } from \"@nestjs/core\"\nimport { AppModule } from \"./app.module\"\n\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule)\n  app.enableCors({\n    origin: process.env.CORS_ORIGIN || \"*\",\n    methods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"],\n    credentials: true,\n  })\n  await app.listen(9000) // CloudBase HTTP Functions expect port 9000\n}\nbootstrap()\n```\n\n### Deployment\n\n- Build to JavaScript output, include `package.json` with `start` script\n- Deploy via `manageCloudRun` (container) or `manageFunctions` (HTTP Function, default to native `http` module unless NestJS is explicitly required)\n- Set `MinNum` instances to 1 to reduce cold start\n\n## Vite\n\n- Treat Vite as the default choice for new Web app setup unless the repo already standardizes on another bundler.\n- Keep environment-specific values in `.env` or the project's existing config pattern instead of hardcoding them into UI files.\n- Check route base paths, asset paths, and build output behavior before deployment.\n\n## Routing and build defaults\n\n- Use the existing router if present; do not switch routing libraries without an explicit requirement.\n- For purely static hosting environments, prefer hash routing when server rewrite support is absent or unknown.\n- Make build and preview commands explicit before handing off deployment steps.\n\nFile v1.27.55:skill-card.md\n\n## Description:\n\nUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[binggg](https://clawhub.ai/user/binggg)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to implement and validate web frontend work in React, Vue, Vite, browser flows, and CloudBase Web integrations after product direction is already clear.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Authentication examples include unsafe token handling and should not be copied directly into production application code.\n\nMitigation: Review and correct authentication examples before use; prefer server-side session or token verification and avoid storing bearer access tokens in JavaScript-set cookies.\n\nRisk: Frontend changes can appear correct from code review while still failing in browser routing, forms, auth, or async flows.\n\nMitigation: Run the skill's static checks and browser validation workflow for affected user-visible flows before treating generated changes as complete.\n\n## Reference(s):\n\n- [ClawHub skill page](https://clawhub.ai/binggg/skills/web-development)\n- [Browser Validation](artifact/browser-testing.md)\n- [Framework Guidance](artifact/frameworks.md)\n- [CloudBase integration documentation](https://docs.cloudbase.net/integration/introduce.md)\n\n## Skill Output:\n\n**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Markdown with inline code and shell commands]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include validation notes, browser-check summaries, and configuration guidance.]\n\n## Skill Version(s):\n\n1.27.55 (source: server release metadata; artifact frontmatter lists 2.34.5)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.27.54: 5 files, 12813 bytes\n\nFiles: browser-testing.md (5232b), frameworks.md (6201b), skill-card.md (2359b), SKILL.md (13296b), _meta.json (136b)\n\nFile v1.27.54:SKILL.md\n\n---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.4\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.\n- Treating cloud functions as the default solution for Web authentication.\n- Skipping browser-level validation after a UI or routing change.\n- **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting \"404 error document\" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route.\n- In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handlers and services.\n\n## Engineering constitution (non-negotiable)\n\nThese rules override convenience. Treat them as a gate before saying \"done\".\n\n### 1. TypeScript — do not silence the type system\n\n- **Do NOT use `any` to bypass type errors.** Not `: any`, not `as any`, not `@ts-ignore`, not `@ts-nocheck`, not `@ts-expect-error` without a written justification. `any` propagates silently and defeats the only compile-time safety net this project has.\n- When a type error appears, fix the root cause:\n  - Missing / wrong library types → install `@types/...`, or narrow the import, or write a precise `interface` / `type` for the shape you actually use.\n  - Shape is genuinely unknown at the boundary (JSON from an API, `postMessage` payload, `window.*` injection) → type it as `unknown` and narrow with a type guard (`typeof`, `in`, a discriminator field, or `zod` / equivalent).\n  - Third-party type is wrong → augment via `declare module` in a local `.d.ts`, not `any`.\n  - Truly dynamic case (e.g. generic event bus) → use a generic `<T>` with a constraint, not `any`.\n- `unknown` + narrowing is the acceptable escape hatch. `any` is not.\n- If you genuinely cannot avoid `any` for a specific line (extremely rare), leave a one-line comment with **why** and **what would remove it**, so reviewers can audit.\n- The same spirit applies to ESLint: do not sprinkle `// eslint-disable` to mute the real signal. Fix the rule violation, or discuss before disabling.\n\n### 2. Self-verify before claiming done\n\nBefore making any non-trivial code or configuration change, you must first follow the Change Safety Protocol in `cloudbase-platform/references/protocols/change-safety-protocol.md` (declare impact → user confirmation → post-edit verification).\nBefore any static hosting publish or custom domain work, complete the checks in `cloudbase-platform/references/protocols/deployment-gate.md`.\n\nSaying \"I've implemented it\" / \"fixed it\" / \"it should work\" without evidence is not acceptable. Before declaring completion, you must actually run the checks and report the result.\n\n**Static / build layer (always, when applicable):**\n\n- `tsc --noEmit` (or `vue-tsc --noEmit`) passes cleanly — zero errors, zero suppressed diagnostics you added.\n- `eslint` / project linter passes on changed files.\n- The project's build command (`npm run build` / `pnpm build` / `vite build`) completes without new warnings that you introduced.\n- The project's unit tests pass if they exist and cover the touched area.\n\n**Runtime / browser layer (whenever the change affects rendering, routing, forms, auth, or async flows):**\n\n- Use the **`agent-browser`** tool to actually open the page and reproduce the user-visible flow. Follow `browser-testing.md` for the concrete workflow.\n- Confirm: the target route loads, the interaction you claim to have fixed behaves the way you claim, no new console errors are introduced, and no regression in the adjacent routes you touched.\n- Record what you checked (route, action, expected result, actual result).\n\n**Only after both layers pass** may you say the task is done. If either layer cannot be executed locally (e.g. blocked by credentials, missing backend, paid API), say so explicitly and list exactly which step is still unverified — do not gloss over it.\n\n### 3. Do not paper over failures\n\n- Do not wrap broken logic in `try { ... } catch {}` to make the error go away.\n- Do not delete or skip a failing test to make CI green — fix it, or explain why the test is actually wrong and change the test with justification.\n- Do not mark a task complete because \"the code compiles\". Compilation is the bare minimum, not the goal.\n\n## When to use this skill\n\nUse this skill for Web engineering work such as:\n\n- Implementing React or Vue pages and components\n- Setting up or maintaining Vite-based frontend projects\n- Handling routing, data loading, forms, and build configuration\n- Running browser-based validation and smoke checks\n- Integrating CloudBase Web SDK and static hosting when the project needs CloudBase capabilities\n\n**Do NOT use for:**\n- UI direction or visual system design only; use `ui-design`\n- Mini program development; use `miniprogram-development`\n- Backend service implementation; use `cloudrun-development` or `cloud-functions`\n\n## How to use this skill (for a coding agent)\n\n1. **Clarify the execution surface**\n   - Confirm whether the task is framework setup, page implementation, debugging, deployment, validation, or CloudBase integration.\n   - Keep the work scoped to the actual Web app surface instead of spreading into unrelated backend changes.\n   - If the workspace is an existing application with TODOs, treat it as a targeted repair task, not a greenfield build.\n\n2. **Follow framework and build conventions**\n   - Prefer the existing project stack if one already exists.\n   - For new work, treat Vite as the default bundler unless the repo or user constraints say otherwise.\n   - Put reusable app code under `src` and build output under `dist` unless the repo already uses a different convention.\n   - In an existing application with fixed structure, inspect the files that already own the flow before reading broad docs: `src/lib/backend.*`, `src/lib/auth.*`, `src/lib/*service.*`, route guards, and the page handlers bound to submit buttons.\n\n3. **Validate through the browser, not only by reading code**\n   - For interaction, routing, rendering, or regression checks, use `agent-browser` workflows from `browser-testing.md`.\n   - Prefer lightweight smoke validation for changed flows before claiming the frontend work is complete.\n\n4. **Treat CloudBase as an integration branch**\n   - Use CloudBase Web SDK and static hosting guidance only when the project actually needs CloudBase platform features.\n   - Reuse `auth-tool-cloudbase` and `auth-web-cloudbase` for login or provider readiness instead of re-describing those flows here.\n\n## Core workflow\n\n### 1. Choose the right engineering path\n\n- **React / Vue feature work**: implement within the app's existing component, routing, and state conventions\n- **New Web app**: prefer Vite unless the repo already standardizes on another toolchain\n- **Debugging and regressions**: reproduce in browser, narrow to a specific page or interaction, then patch\n- **CloudBase integration**: wire in Web SDK, auth, data, or static hosting only after the base frontend path is clear\n\n### 2. Keep implementation grounded in project reality\n\n- Follow the repo's package manager, scripts, and lint/test patterns\n- Avoid framework rewrites unless the user explicitly asks for one\n- Prefer the smallest viable page/component/config change that satisfies the task\n- In TODO-based apps, complete the existing implementation directly instead of creating parallel helpers, sample pages, or detached prototypes\n\n### 3. Validate changed flows explicitly\n\n- Run the relevant local build / lint / typecheck / test command when available. A clean `tsc --noEmit` and a clean project build are the minimum bar — not proof of correctness.\n- For anything user-visible (routing, forms, rendering, auth, async flows), open the affected page or flow in a browser with **`agent-browser`**. Code reading alone is not sufficient evidence — see the Engineering constitution above.\n- Record what was checked: route, action, expected result, actual result, and any remaining gap.\n\n## CloudBase Web integration\n\nUse this section only when the Web project needs CloudBase platform features.\n\n### Web SDK rules\n\n- Prefer npm installation for React, Vue, Vite, and other bundler-based projects: `npm install @cloudbase/js-sdk`\n- Use the CDN only for static HTML pages, quick demos, embedded snippets, or README examples: `https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js`\n- Only use documented CloudBase Web SDK APIs; do not invent methods or options\n- Keep a shared `app` or `auth` instance instead of re-initializing on every call\n- If the user only provides an environment alias, nickname, or other shorthand, resolve it to the canonical full `EnvId` before writing SDK init code, console links, or config files. Do not pass alias-like short forms directly into `cloudbase.init({ env })`.\n\n### Authentication boundary\n\n- Authentication must use CloudBase SDK built-in features\n- Do not move Web login logic into cloud functions\n- For provider readiness, login method setup, or publishable key issues, route to `auth-tool-cloudbase` and `auth-web-cloudbase`\n\n### Static hosting defaults\n\n- Build before deployment\n- Prefer relative asset paths for static hosting compatibility\n- Use hash routing by default when the project lacks server-side route rewrites\n- If the user does not specify a root path, avoid deploying directly to the site root by default\n- **SPA routing (History mode)**: when using React Router / Vue Router in History mode (not hash mode), configure the CloudBase static hosting **\"404 error document\"** to `index.html`. Otherwise refreshing or directly visiting any sub-route returns `NoSuchKey` / 404 error, because the static hosting looks for a file at that path instead of falling through to `index.html` for the SPA to handle routing.\n\n  Use the MCP tool to apply this:\n  ```json\n  manageHosting({ action: \"setWebsiteDocument\", indexDocument: \"index.html\", errorDocument: \"index.html\" })\n  ```\n\n  Then verify with:\n  ```json\n  queryHosting({ action: \"websiteConfig\" })\n  ```\n\n### CloudBase quick start\n\n```js\n// npm install @cloudbase/js-sdk\nimport cloudbase from \"@cloudbase/js-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-full-env-id\", // Canonical full CloudBase environment ID resolved from queryEnv or the console\n});\n\nconst auth = app.auth\n```\n\nFile v1.27.54:_meta.json\n\n{\n  \"ownerId\": \"kn7emfp36dbn1xx4fz4s5q4a6180439j\",\n  \"slug\": \"web-development\",\n  \"version\": \"1.27.54\",\n  \"publishedAt\": 1789551302974\n}\n\nFile v1.27.54:browser-testing.md\n\n# Browser Validation (with `agent-browser`)\n\nThis file is the concrete playbook for the `agent-browser` tool. Use it whenever the Engineering constitution in `SKILL.md` says \"verify in the browser before claiming done\".\n\nCode reading, static types, and a clean build are **necessary but not sufficient**. Any change that affects what the user sees, clicks, or navigates must be opened in a real browser and exercised.\n\n## When `agent-browser` is required (not optional)\n\nTrigger browser validation for changes that touch any of:\n\n- **Routing / navigation** — new routes, redirects, route guards, 404s, hash vs history mode, nested layouts\n- **Forms** — submit handlers, controlled inputs, validation errors, disabled states, file uploads\n- **Auth flows** — sign in, sign up, logout, session guards, token refresh, `getSession`\n- **Async UI** — loading spinners, skeletons, error banners, retry buttons, streaming responses\n- **Conditional rendering** — empty states, permission-gated sections, feature flags\n- **Third-party SDK calls from the browser** — CloudBase Web SDK (auth, database, AI model, storage), analytics, payment\n\nSkip browser validation only for pure build-config edits, README / documentation-only changes, backend-only work, or changes guarded by CI tests you verified pass.\n\n## When `agent-browser` is NOT the right tool\n\n- Pure visual direction / aesthetic exploration → use the `ui-design` skill first.\n- Backend-only logic that never renders in the browser → use unit tests or direct API calls.\n- Smoke-testing a production URL against real user credentials → do not automate; ask the user.\n\n## Standard workflow\n\nFollow these steps in order. Do not skip the \"before the fix\" reproduction — it is what proves the bug was real and that your change actually fixed it.\n\n1. **Start the app** (or confirm it is already running).\n   - Typical: `npm run dev` / `pnpm dev` / `vite`. Record the local URL (often `http://localhost:5173`).\n   - If the project uses a build-and-serve flow instead of a dev server, document the exact commands you ran.\n2. **Open the target route with `agent-browser`**, starting from the entry URL, not deep-linking into private pages unless you already have a valid session.\n3. **Reproduce the current (pre-fix or pre-feature) behavior.** Capture: route, user action, observed outcome, console errors if any. This is the baseline.\n4. **Apply the code change.** Rely on HMR where available; otherwise rebuild.\n5. **Re-run the exact same flow in the browser.** Capture the new observed outcome.\n6. **Check adjacent routes you touched** — if you edited a shared component or route guard, visit at least one other page that depends on it.\n7. **Inspect the browser console for new warnings / errors** introduced by your change (React hydration mismatches, missing keys, uncaught promise rejections, CloudBase SDK init errors, etc.). New noise is a regression even if the happy path works.\n\n## What to record in the final summary\n\nFor each flow you exercised, report:\n\n- **Route** — e.g. `/login`, `/dashboard?tab=usage`\n- **Action** — e.g. \"Submitted the phone+code form with a valid code\"\n- **Expected** — e.g. \"Redirect to `/dashboard` and show user's nickname\"\n- **Before** — e.g. \"Stayed on `/login`; console showed `auth/invalid-session`\"\n- **After** — e.g. \"Redirected to `/dashboard`; nickname rendered; no new console errors\"\n- **Gap (if any)** — e.g. \"Did not test WeChat login branch because no test account available\"\n\nA one-liner like \"tested in browser, works\" is not acceptable evidence.\n\n## Common CloudBase-specific flows worth validating\n\n- **Auth**: sign-in page → success → protected route accessible; sign-out → same protected route redirects to `/login`.\n- **AI model**: eligibility gate passes → `generateText` returns text → `streamText` incrementally updates UI → error path (invalid model name) surfaces a user-visible message, not a silent failure.\n- **Database queries**: list page with pagination → empty state → after create, the new row appears without a hard refresh.\n- **Static hosting deploy**: for a deployed build, confirm the root route, one sub-route (refresh directly on it — hash vs history matters), and one 404 route.\n\n## Common mistakes to avoid\n\n- Claiming a frontend bug is fixed without actually opening the browser.\n- Verifying only the happy path when the reported bug is about empty states, validation errors, or route refresh.\n- Catching and swallowing console errors instead of understanding them.\n- Using `agent-browser` for aesthetic / visual direction work that should have gone through `ui-design`.\n- Skipping the adjacent-routes check after editing a shared component or route guard.\n- Using an old cached dev-server instance after a config change — restart the dev server if you modified `vite.config.*`, env vars, or TS path aliases.\n\n## Escalation\n\nIf you cannot complete browser validation because of missing credentials, a missing backend, a paid external API, or a blocker in the local environment, do not paper over it. State exactly what you were unable to verify and what the user needs to supply. Partial verification with a named gap is acceptable; silent omission is not.\n\nFile v1.27.54:frameworks.md\n\n# Framework Guidance\n\n## React\n\n- Follow the existing router, data-fetching, and component patterns already used by the repo.\n- Prefer focused page and component changes over broad refactors.\n- Keep state close to where it is used unless the project already relies on shared state primitives.\n- For form, navigation, and async UI bugs, verify the behavior in browser after code changes.\n\n## Next.js\n\n### SDK boundary\n\n`@cloudbase/js-sdk` is a **browser-only** SDK. It must not be imported in Server Components, `getServerSideProps`, or API Routes.\n\n- Auth flows (sign in, sign up, session check) → **Client Component only** (`\"use client\"`)\n- API Routes / Route Handlers → use `@cloudbase/node-sdk` (Node.js SDK) for server-side token verification\n- Server Components → read tokens from cookies/headers, do NOT import `@cloudbase/js-sdk`\n\n### Auth pattern (App Router)\n\n```tsx\n// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}\n```\n\n### Passing auth to API Routes\n\n```tsx\n// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}\n```\n\n### Deployment\n\n- Build output: `next build` → `.next` directory\n- CloudBase static hosting expects `package.json` with build scripts and the output directory configured; prefer `manageApps` for deployment\n- If deploying via `manageHosting`, set error document to `index.html` for client-side routing (even though Next.js defaults to file-based routing, fallback handling is needed for SPA-like paths)\n\n## Vue\n\n- Respect the existing composition style in the repo, such as Composition API or Options API.\n- Keep template, script, and style responsibilities clear instead of mixing unrelated logic into one large SFC.\n- When changing reactive state or watchers, verify the actual rendered behavior rather than assuming the code path is enough.\n\n## NestJS\n\n### SDK choice\n\nUse `@cloudbase/node-sdk` (Node.js SDK), **not** `@cloudbase/js-sdk` (which is browser-only).\n\n### Module setup\n\n```ts\n// cloudbase.module.ts\nimport { Module, Global } from \"@nestjs/common\"\nimport tcb from \"@cloudbase/node-sdk\"\n\nexport const CLOUDBASE = \"CLOUDBASE\"\n\nconst cloudbaseProvider = {\n  provide: CLOUDBASE,\n  useFactory: () => {\n    const app = tcb.init({\n      env: process.env.CLOUDBASE_ENV_ID!,\n      // credentials: require(\"/path/to/tcb_custom_login.json\"), // only for custom login\n    })\n    return {\n      app,\n      auth: app.auth(),\n      // db: app.database(), // for NoSQL\n    }\n  },\n}\n\n@Global()\n@Module({\n  providers: [cloudbaseProvider],\n  exports: [cloudbaseProvider],\n})\nexport class CloudBaseModule {}\n```\n\n### AuthGuard for token verification\n\n```ts\n// auth.guard.ts\nimport { Injectable, CanActivate, ExecutionContext, Inject } from \"@nestjs/common\"\nimport { CLOUDBASE } from \"./cloudbase.module\"\n\n@Injectable()\nexport class CloudBaseAuthGuard implements CanActivate {\n  constructor(@Inject(CLOUDBASE) private cloudbase: any) {}\n\n  async canActivate(context: ExecutionContext): Promise<boolean> {\n    const request = context.switchToHttp().getRequest()\n    const token = request.headers.authorization?.replace(\"Bearer \", \"\")\n    if (!token) return false\n\n    try {\n      // Verify the session via Node SDK\n      // Note: Node SDK does not have a direct \"verify token\" method —\n      // forward the token to a cloud function or use the HTTP API for validation\n      request.user = { token }\n      return true\n    } catch {\n      return false\n    }\n  }\n}\n```\n\n### CORS (required for Web frontend calls)\n\n```ts\n// main.ts\nimport { NestFactory } from \"@nestjs/core\"\nimport { AppModule } from \"./app.module\"\n\nasync function bootstrap() {\n  const app = await NestFactory.create(AppModule)\n  app.enableCors({\n    origin: process.env.CORS_ORIGIN || \"*\",\n    methods: [\"GET\", \"POST\", \"PUT\", \"DELETE\", \"OPTIONS\"],\n    credentials: true,\n  })\n  await app.listen(9000) // CloudBase HTTP Functions expect port 9000\n}\nbootstrap()\n```\n\n### Deployment\n\n- Build to JavaScript output, include `package.json` with `start` script\n- Deploy via `manageCloudRun` (container) or `manageFunctions` (HTTP Function, default to native `http` module unless NestJS is explicitly required)\n- Set `MinNum` instances to 1 to reduce cold start\n\n## Vite\n\n- Treat Vite as the default choice for new Web app setup unless the repo already standardizes on another bundler.\n- Keep environment-specific values in `.env` or the project's existing config pattern instead of hardcoding them into UI files.\n- Check route base paths, asset paths, and build output behavior before deployment.\n\n## Routing and build defaults\n\n- Use the existing router if present; do not switch routing libraries without an explicit requirement.\n- For purely static hosting environments, prefer hash routing when server rewrite support is absent or unknown.\n- Make build and preview commands explicit before handing off deployment steps.\n\nFile v1.27.54:skill-card.md\n\n## Description:\n\nUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[binggg](https://clawhub.ai/user/binggg)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to implement, debug, build, deploy, and validate Web frontends and static sites, especially React, Vue, Vite, browser validation, routing, and CloudBase Web integration work.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: CloudBase authentication examples may be copied into production without real server-side token validation.\n\nMitigation: Require backend token validation or an equivalent trusted server-side session check before using generated auth code in production.\n\nRisk: Generated examples may store bearer tokens in JavaScript-readable cookies.\n\nMitigation: Prefer HttpOnly, Secure, SameSite server-set session cookies or an equivalent backend session pattern.\n\nRisk: Credentialed CORS examples may be deployed with an overly broad origin policy.\n\nMitigation: Configure credentialed CORS with an explicit trusted-origin allowlist before deployment.\n\n## Reference(s):\n\n- [Web Development skill page](https://clawhub.ai/binggg/skills/web-development)\n- [Framework Guidance](frameworks.md)\n- [Browser Validation](browser-testing.md)\n- [CloudBase integration documentation](https://docs.cloudbase.net/integration/introduce.md)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with code blocks, shell commands, and configuration snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include browser-validation checklists, build and deployment steps, and CloudBase integration guidance.]\n\n## Skill Version(s):\n\n1.27.54 (source: server release metadata; artifact frontmatter reports 2.34.4)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.27.53: 5 files, 12828 bytes\n\nFiles: browser-testing.md (5232b), frameworks.md (6201b), skill-card.md (2379b), SKILL.md (13296b), _meta.json (136b)\n\nFile v1.27.53:SKILL.md\n\n---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.3\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, and CloudBase integration concerns into one vague change.\n- Treating cloud functions as the default solution for Web authentication.\n- Skipping browser-level validation after a UI or routing change.\n- **History mode SPA with CloudBase static hosting**: deploying a single-page app using History mode (React Router / Vue Router) without configuring the static hosting \"404 error document\" to `index.html`. This causes `NoSuchKey` / 404 errors when users refresh or directly visit any sub-route.\n- In an existing application, detouring into UI redesign or broad repo sweeps before patching the current handl...","readmeExcerpt":"Skill: Web 开发 · CloudBase Web Development Owner: binggg Summary: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration. Tags: latest:1.27.58 Version history: v1.27.58 | 2026-09-30T13:46:05.187Z | user Recent commits / 最近提交: | - fix(clawhub): 🏷️ publish the","codeSnippets":[],"executableExamples":[{"language":"json","snippet":"manageHosting({ action: \"setWebsiteDocument\", indexDocument: \"index.html\", errorDocument: \"index.html\" })"},{"language":"json","snippet":"queryHosting({ action: \"websiteConfig\" })"},{"language":"js","snippet":"// npm install @cloudbase/js-sdk\nimport cloudbase from \"@cloudbase/js-sdk\";\n\nconst app = cloudbase.init({\n  env: \"your-full-env-id\", // Canonical full CloudBase environment ID resolved from queryEnv or the console\n});\n\nconst auth = app.auth"},{"language":"tsx","snippet":"// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}"},{"language":"tsx","snippet":"// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}"},{"language":"ts","snippet":"// cloudbase.module.ts\nimport { Module, Global } from \"@nestjs/common\"\nimport tcb from \"@cloudbase/node-sdk\"\n\nexport const CLOUDBASE = \"CLOUDBASE\"\n\nconst cloudbaseProvider = {\n  provide: CLOUDBASE,\n  useFactory: () => {\n    const app = tcb.init({\n      env: process.env.CLOUDBASE_ENV_ID!,\n      // credentials: require(\"/path/to/tcb_custom_login.json\"), // only for custom login\n    })\n    return {\n      app,\n      auth: app.auth(),\n      // db: app.database(), // for NoSQL\n    }\n  },\n}\n\n@Global()\n@Module({\n  providers: [cloudbaseProvider],\n  exports: [cloudbaseProvider],\n})\nexport class CloudBaseModule {}"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: web-development\ndescription: Use when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\nversion: 2.34.8\nalwaysApply: false\n---\n\n## Sibling skills (local only)\n\nSibling CloudBase skills ship beside this skill. Use local relative paths such as `../auth-tool-cloudbase/SKILL.md`.\n\nIf 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.\n\n**Cross-cutting protocols** (required before code changes or deployments):\n- Change Safety Protocol: `../cloudbase-platform/references/protocols/change-safety-protocol.md`\n- Deployment Gate: `../cloudbase-platform/references/protocols/deployment-gate.md`\n\n# Web Development\n\n## Activation Contract\n\n### Use this first when\n\n- The request is to implement, integrate, debug, build, deploy, or validate a Web frontend or static site.\n- The design direction is already decided, or the user is asking for engineering execution rather than visual exploration.\n- The work involves React, Vue, Vite, routing, browser-based verification, or CloudBase Web integration.\n\n### Read before writing code if\n\n- The task includes project structure, framework conventions, build config, deployment, routing, or frontend test and validation flows.\n- The request includes UI implementation but the visual direction is already fixed; otherwise read `ui-design` first.\n- **⚠️ Any task involving interface styling, layout, color scheme, or font selection — before writing the first line of CSS/Tailwind, you MUST load the `ui-design` skill and output a Design Specification.** Skipping this step causes frontend styling to degrade to generic AI template defaults. The `ui-design` skill must be loaded before any visual implementation begins, not retroactively after the user complains about the appearance.\n\n### Then also read\n\n- General React / Vue / Vite guidance -> `frameworks.md`\n- Browser flow checks or page validation -> `browser-testing.md`\n- Login flow -> `../auth-tool-cloudbase/SKILL.md`, then `../auth-web-cloudbase/SKILL.md`\n- Official Account JSAPI Pay, Native QR-code Pay, or WeChat OAuth on CloudBase -> `../cloudbase-wechat-integration/SKILL.md` (official docs: `https://docs.cloudbase.net/integration/introduce.md`)\n- CloudBase database work -> matching database skill\n\n### Do NOT use for\n\n- Visual direction setting, prototype-first design work, or pure aesthetic exploration.\n- Mini programs, native Apps, or backend-only services.\n- WeChat payment or Official Account OAuth contract details; use `cloudbase-wechat-integration` after identifying the Web surface.\n\n### Common mistakes / gotchas\n\n- Starting implementation before clarifying whether the task is design or engineering execution.\n- Mixing framework setup, deployment, a"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7emfp36dbn1xx4fz4s5q4a6180439j\",\n  \"slug\": \"web-development\",\n  \"version\": \"1.27.58\",\n  \"publishedAt\": 1790775965187\n}"},{"path":"browser-testing.md","content":"# Browser Validation (with `agent-browser`)\n\nThis file is the concrete playbook for the `agent-browser` tool. Use it whenever the Engineering constitution in `SKILL.md` says \"verify in the browser before claiming done\".\n\nCode reading, static types, and a clean build are **necessary but not sufficient**. Any change that affects what the user sees, clicks, or navigates must be opened in a real browser and exercised.\n\n## When `agent-browser` is required (not optional)\n\nTrigger browser validation for changes that touch any of:\n\n- **Routing / navigation** — new routes, redirects, route guards, 404s, hash vs history mode, nested layouts\n- **Forms** — submit handlers, controlled inputs, validation errors, disabled states, file uploads\n- **Auth flows** — sign in, sign up, logout, session guards, token refresh, `getSession`\n- **Async UI** — loading spinners, skeletons, error banners, retry buttons, streaming responses\n- **Conditional rendering** — empty states, permission-gated sections, feature flags\n- **Third-party SDK calls from the browser** — CloudBase Web SDK (auth, database, AI model, storage), analytics, payment\n\nSkip browser validation only for pure build-config edits, README / documentation-only changes, backend-only work, or changes guarded by CI tests you verified pass.\n\n## When `agent-browser` is NOT the right tool\n\n- Pure visual direction / aesthetic exploration → use the `ui-design` skill first.\n- Backend-only logic that never renders in the browser → use unit tests or direct API calls.\n- Smoke-testing a production URL against real user credentials → do not automate; ask the user.\n\n## Standard workflow\n\nFollow these steps in order. Do not skip the \"before the fix\" reproduction — it is what proves the bug was real and that your change actually fixed it.\n\n1. **Start the app** (or confirm it is already running).\n   - Typical: `npm run dev` / `pnpm dev` / `vite`. Record the local URL (often `http://localhost:5173`).\n   - If the project uses a build-and-serve flow instead of a dev server, document the exact commands you ran.\n2. **Open the target route with `agent-browser`**, starting from the entry URL, not deep-linking into private pages unless you already have a valid session.\n3. **Reproduce the current (pre-fix or pre-feature) behavior.** Capture: route, user action, observed outcome, console errors if any. This is the baseline.\n4. **Apply the code change.** Rely on HMR where available; otherwise rebuild.\n5. **Re-run the exact same flow in the browser.** Capture the new observed outcome.\n6. **Check adjacent routes you touched** — if you edited a shared component or route guard, visit at least one other page that depends on it.\n7. **Inspect the browser console for new warnings / errors** introduced by your change (React hydration mismatches, missing keys, uncaught promise rejections, CloudBase SDK init errors, etc.). New noise is a regression even if the happy path works.\n\n## What to record in the final summary\n\nFor each flow you exercised, re"},{"path":"frameworks.md","content":"# Framework Guidance\n\n## React\n\n- Follow the existing router, data-fetching, and component patterns already used by the repo.\n- Prefer focused page and component changes over broad refactors.\n- Keep state close to where it is used unless the project already relies on shared state primitives.\n- For form, navigation, and async UI bugs, verify the behavior in browser after code changes.\n\n## Next.js\n\n### SDK boundary\n\n`@cloudbase/js-sdk` is a **browser-only** SDK. It must not be imported in Server Components, `getServerSideProps`, or API Routes.\n\n- Auth flows (sign in, sign up, session check) → **Client Component only** (`\"use client\"`)\n- API Routes / Route Handlers → use `@cloudbase/node-sdk` (Node.js SDK) for server-side token verification\n- Server Components → read tokens from cookies/headers, do NOT import `@cloudbase/js-sdk`\n\n### Auth pattern (App Router)\n\n```tsx\n// components/auth-guard.tsx — Client Component\n\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport cloudbase from \"@cloudbase/js-sdk\"\n\nconst app = cloudbase.init({\n  env: process.env.NEXT_PUBLIC_CLOUDBASE_ENV_ID!,\n  region: process.env.NEXT_PUBLIC_CLOUDBASE_REGION || \"ap-shanghai\",\n  accessKey: process.env.NEXT_PUBLIC_CLOUDBASE_ACCESS_KEY!,\n  auth: { detectSessionInUrl: true },\n})\nconst auth = app.auth\n\nexport function AuthGuard({ children }: { children: React.ReactNode }) {\n  const [session, setSession] = useState<any>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    auth.getSession().then(({ data }) => {\n      if (data?.session) {\n        setSession(data.session)\n        // Store access_token in cookie for API route verification\n        document.cookie = `cloudbase_token=${data.session.access_token}; path=/; max-age=3600`\n      }\n      setLoading(false)\n    })\n  }, [])\n\n  if (loading) return <div>Loading...</div>\n  if (!session) return <div>Please sign in</div>\n  return <>{children}</>\n}\n```\n\n### Passing auth to API Routes\n\n```tsx\n// app/api/protected/route.ts — Server-side Route Handler\nimport { NextRequest, NextResponse } from \"next/server\"\n\nexport async function GET(request: NextRequest) {\n  const token = request.cookies.get(\"cloudbase_token\")?.value\n  if (!token) {\n    return NextResponse.json({ error: \"Unauthorized\" }, { status: 401 })\n  }\n  // Verify token with Node SDK or forward to your backend\n  return NextResponse.json({ data: \"protected resource\" })\n}\n```\n\n### Deployment\n\n- Build output: `next build` → `.next` directory\n- CloudBase static hosting expects `package.json` with build scripts and the output directory configured; prefer `manageApps` for deployment\n- If deploying via `manageHosting`, set error document to `index.html` for client-side routing (even though Next.js defaults to file-based routing, fallback handling is needed for SPA-like paths)\n\n## Vue\n\n- Respect the existing composition style in the repo, such as Composition API or Options API.\n- Keep template, script, and style responsibilities clear instead of mixing unrel"},{"path":"skill-card.md","content":"## Description:\n\nUse when users need to implement, integrate, debug, build, deploy, or validate a Web frontend after the product direction is already clear, especially for React, Vue, Vite, browser flows, or CloudBase Web integration.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[binggg](https://clawhub.ai/user/binggg)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers use this skill to build, debug, deploy, and validate React, Vue, or Vite web frontends, including browser flows and CloudBase Web integration when needed.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Authentication examples may lead to protected routes accepting unverified tokens.\n\nMitigation: Require authoritative server-side token or session verification and secure cookie or session handling before using generated authentication code in production.\n\n## Reference(s):\n\n- [ClawHub skill release](https://clawhub.ai/binggg/skills/web-development)\n- [Browser validation guidance](artifact/browser-testing.md)\n- [Framework guidance](artifact/frameworks.md)\n- [CloudBase integration documentation](https://docs.cloudbase.net/integration/introduce.md)\n\n## Skill Output:\n\n**Output Type(s):** [Code, Shell commands, Configuration, Guidance]\n\n**Output Format:** [Code and Markdown guidance with commands and configuration examples]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Recommends type, build, and browser validation for changed web flows.]\n\n## Skill Version(s):\n\n1.27.58 (source: server-resolved ClawHub release; artifact frontmatter lists 2.34.8)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":null,"editorialQuality":{"score":100,"threshold":65,"status":"thin","wordCount":2102,"uniquenessScore":42,"reasons":["uniqueness-below-45"]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-09T03:11:47.137Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-09T12:32:16.931Z","emptyReason":null},"items":[{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-10T18:48:31.762Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}