web-development
专注于产品方向明确后的Web前端实现与部署，尤其擅长React、Vue、Vite等技术栈。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：web-development。 它的用途是：专注于产品方向明确后的Web前端实现与部署，尤其擅长React、Vue、Vite等技术栈。 完整的 Skill 内容见：https://321skill.com/skills/web-development-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我正在开发一个React + Vite的电商后台，现在需要实现一个可筛选、分页的商品列表组件，并且要把它部署到腾讯云CloudBase上。'，它会先帮你设计组件结构、编写核心逻辑代码，然后指导你配置Vite构建选项，最后提供将构建产物部署到CloudBase Web托管的详细步骤和注意事项。
介绍
本Skill旨在解决产品方向确定后，Web前端的具体实现、集成、调试、构建、部署和验证等一系列工程化问题。它特别适用于使用React、Vue、Vite等现代前端框架，或涉及浏览器流程、腾讯云CloudBase Web集成的项目。
当用户需要将清晰的产品设计转化为可运行、可部署的Web前端应用时，可以使用此Skill。它能协助处理从编写组件、调试样式、构建打包到配置部署环境的完整流程，并提供相关的最佳实践建议。
该Skill非常适合前端开发、全栈开发以及需要快速搭建Web应用原型的产品经理。对于高校学生完成Web相关的课程设计或毕业设计，以及求职者准备前端技术面试的实践项目，也有很大帮助。
使用建议：在启动对话时，请尽可能清晰地描述你的技术栈（如React 18 + Vite）、当前遇到的问题（如构建报错、部署失败）以及期望达成的目标。提供关键代码片段或错误日志能显著提升问题解决的效率。
核心特点
与通用编程助手相比，它深度聚焦于Web前端工程化的全链路，尤其对React、Vue、Vite、CloudBase等生态有针对性优化；与单一框架的辅助工具相比，它覆盖了从编码、调试到构建、部署的完整生命周期，更像一个经验丰富的Web开发搭档。
注意事项
不适合产品方向尚不明确的需求探索、UI/UX设计、后端API开发或非Web平台（如移动原生、桌面应用）的开发。
常见问题
能帮我用Vue 3和Vite搭建一个新项目吗？
可以，我能指导你初始化项目、安装依赖、配置开发环境，并推荐项目结构和常用插件。
我的React应用部署到CloudBase后出现白屏，如何排查？
可以帮你分析构建产物路径是否正确、静态资源加载是否失败、路由配置是否匹配，并提供常见的CloudBase部署问题排查步骤。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/web-development-x-4/raw/index.md 读取 web-development 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/web-development-x-4/raw/index.md（查看排版版本）