首页 / 技能 / Web Development — Web 前端开发指南

📦 Web Development — Web 前端开发指南

v1.5.0

用于指导 Web 前端开发、调试、构建、部署和验证，尤其适用于 React、Vue、Vite、浏览器流程或 CloudBase Web 集成的场景。该技能提供了一个一致的指南，涵盖了前端工程的各个方面，包括项目结构、框架约定、构建配置、部署、路由和前端测试流程。它确保开发过程中的安全性和合理性，避免了额外的权限和安装要求。

0· 362·1 当前·1 累计
binggg 头像by @binggg (Booker Zhao)·MIT-0
开发工具浏览器自动化自动化工作流安全
下载技能包
License
MIT-0
最后更新
2026/4/11
0
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
该技能是一个仅包含指令的 Web 前端工程指南，内部逻辑一致，符合其声明的目的，不要求额外的凭证、安装或特权。
评估建议
该技能是一个用于前端工程的指令指南，似乎是连贯且合理的。在启用之前，请考虑：(1) 代理是否有访问代码仓库的权限——该技能预计会读取项目文件（src/、路由等）；(2) 该技能引用其他技能（agent-browser、auth-tool）——在使用它们之前，请审查这些技能的权限和所需的任何凭证；(3) 文档包括指向第三方原始主机（cnb.cool）的回退链接——这些仅为文档链接，但您可能希望确认您信任这些资源。该技能本身不需要额外的凭证或安装程序。...
详细分析 ▾
✓ 用途与能力
名称和描述与内容匹配：为实现、调试、验证和部署 Web 前端（React、Vue、Vite、CloudBase）提供指导。所引用文件和描述的操作（检查 src、运行浏览器检查、集成 CloudBase）适合此用途。
✓ 指令范围
SKILL.md 和伴随文档保持在前端工程范围内：它们指示代理检查源文件、遵循框架约定，并使用 `agent-browser` 工作流进行基于浏览器的验证。没有指令读取无关的系统秘密或泄露数据。
ℹ 安装机制
没有安装规格和代码文件，因此没有写入磁盘。文档包括托管在第三方域名 (cnb.cool) 的原始 URL 作为独立参考；这仅用于文档，不是安装程序，但如果您对远程引用谨慎，可以验证这些链接。
✓ 凭证需求
该技能声明没有所需的环境变量、凭证或配置路径。指令引用项目本地文件（例如，src/*）这对于编码代理是预期的；没有请求无关的凭证或秘密。
✓ 持久化与权限
always:false 和默认自动调用已设置（正常）。该技能不请求持久或修改其他技能或系统范围设置。
安全有层次，运行前请审查代码。

License

MIT-0

可自由使用、修改和再分发，无需署名。

运行时依赖

无特殊依赖

版本

latestv1.5.02026/4/4

最近提交：- fix(release): 修复 v2.17.0-beta.2 版本的 app-auth 构建 - chore: 从源同步 claude 技能镜像 - chore(release): 升级版本到 v2.17.0-beta.1 - chore: 从源同步 claude 技能镜像 - 合并 pull 请求 #505 从 TencentCloudBase/feature/update-skills-and-configs

● 无害

安装命令

点击复制
官方npx clawhub@latest install web-development
镜像加速npx clawhub@latest install web-development --registry https://cn.longxiaskill.com

技能文档

激活合约

首先使用此技能当

  • 请求是实现、集成、调试、构建、部署或验证 Web 前端或静态站点。
  • 设计方向已经确定，或者用户是在询问工程执行而非视觉探索。
  • 工作涉及 React、Vue、Vite、路由、基于浏览器的验证或 CloudBase Web 集成。

编写代码前阅读如果

  • 任务包括项目结构、框架约定、构建配置、部署、路由或前端测试和验证流程。
  • 请求包括 UI 实现但视觉方向已经固定；否则先阅读 ui-design。

然后也阅读

  • 通用 React / Vue / Vite 指导 -> frameworks.md
  • 浏览器流程检查或页面验证 -> browser-testing.md
  • 登录流程 -> ../auth-tool/SKILL.md，然后 ../auth-web/SKILL.md
  • CloudBase 数据库工作 -> 匹配的数据库技能

不要用于

  • 视觉方向设置、原型优先的设计工作或纯美学探索。
  • 小程序、原生 Apps 或仅后端服务。

常见错误/陷阱

  • 在澄清任务是设计还是工程执行之前就开始实现。
  • 将框架设置、部署和 CloudBase 集成 concerns 混合到一个模糊的更改中。
  • 将云函数视为 Web 身份验证的默认解决方案。
  • 在 UI 或路由更改后跳过浏览器级验证。

何时使用此技能

将此技能用于 Web 工程工作，例如：

  • 实现 React 或 Vue 页面和组件
  • 设置或维护基于 Vite 的前端项目
  • 处理路由、数据加载、表单和构建配置
  • 运行基于浏览器的验证和冒烟检查
  • 集成 CloudBase Web SDK 和静态托管，当项目需要 CloudBase 功能时

不要用于：

  • 仅 UI 方向或视觉系统设计；使用 ui-design
  • 小程序开发；使用 miniprogram-development
  • 后端服务实现；使用 cloudrun-development 或 cloud-functions

如何使用此技能（对于编码代理）

  • 澄清执行范围
- 确认任务是框架设置、页面实现、调试、部署、验证还是 CloudBase 集成。 - 将工作限制在实际的 Web 应用表面，而不是扩展到无关的后端更改。

  • 遵循框架和构建约定
- 如果项目已存在，优先使用现有项目栈。 - 对于新工作，除非 repo 或用户约束另有说明，否则将 Vite 视为默认打包器。 - 将可复用应用代码放在 src 下，构建输出放在 dist 下，除非 repo 已经使用不同约定。

  • 通过浏览器验证，而不仅仅是读取代码
- 对于交互、路由、渲染或回归检查，使用 browser-testing.md 中的 agent-browser 工作流。 - 在声称前端工作完成之前，优先对更改的流程进行轻量级冒烟验证。

  • 将 CloudBase 视为集成分支
- 仅当项目实际需要 CloudBase 平台功能时才使用 CloudBase Web SDK 和静态托管指导。 - 对于登录或 provider 就绪状态，重用 auth-tool 和 auth-web 而非在此重新描述这些流程。

核心工作流

1. 选择正确的工程路径

  • React / Vue 功能工作：在应用的现有组件、路由和状态约定内实现
  • 新 Web 应用脚手架：除非 repo 已经标准化其他工具链，否则优先使用 Vite
  • 调试和回归：在浏览器中重现，缩小到特定页面或交互，然后修补
  • CloudBase 集成：仅在基础前端路径清晰后接入 Web SDK、auth、数据或静态托管

2. 将实现扎根于项目现实

  • 遵循 repo 的包管理器、脚本和 lint/test 模式
  • 除非用户明确要求，否则避免框架重写
  • 优先满足任务的最小可行页面/组件/配置更改

3. 明确验证更改的流程

  • 在可用时运行相关本地构建或测试命令
  • 当行为依赖于渲染、交互或导航时，在浏览器中打开受影响的页面或流程
  • 记录检查了什么：路由、操作、预期结果和任何剩余差距

CloudBase Web 集成

仅当 Web 项目需要 CloudBase 平台功能时使用本节。

Web SDK 规则

  • 对于 React、Vue、Vite 和其他基于打包器的项目，优先使用 npm 安装
  • 仅对于静态 HTML 页面、快速演示、嵌入片段或 README 示例使用 CDN
  • 仅使用已记录的 CloudBase Web SDK API；不要发明方法或选项
  • 共享 app 或 auth 实例，而不是每次调用时重新初始化

身份验证边界

  • 身份验证必须使用 CloudBase SDK 内置功能
  • 不要将 Web 登录逻辑移入云函数
  • 对于 provider 就绪状态、登录方法设置或发布密钥问题，路由到 auth-tool 和 auth-web

静态托管默认值

  • 部署前构建
  • 为静态托管兼容性优先使用相对资产路径
  • 当项目缺少服务器端路由重写时，默认使用 hash 路由
  • 如果用户未指定根路径，默认避免直接部署到站点根

CloudBase 快速开始

import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({
  env: "xxxx-yyy",
});
const auth = app.auth();

数据来源：ClawHub ↗ · 中文优化：龙虾技能库