web-development
为明确产品方向后的Web前端开发提供全流程支持。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：web-development。 它的用途是：为明确产品方向后的Web前端开发提供全流程支持。 完整的 Skill 内容见：https://321skill.com/skills/web-development-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个Vue 3的组合式API组件，用来展示一个可过滤和分页的用户列表，数据从给定的API端点获取。’，它会生成包含模板、脚本和样式的完整Vue单文件组件代码，并解释关键逻辑。或者
对AI说：‘我的Vite项目在`npm run build`时提示“Failed to resolve import”，该如何排查？’，它会引导你检查导入路径、别名配置或依赖关系，并提供具体的解决步骤。
介绍
当产品方向已经明确，进入具体实现阶段时，本Skill为Web前端开发提供全流程支持。它专注于React、Vue、Vite等现代前端技术栈，以及浏览器流程和腾讯云CloudBase Web集成，帮助开发者将产品设计转化为可运行的Web应用。
Skill通过理解开发者的具体需求，提供针对性的代码实现、问题排查、构建部署等指导。无论是从零开始搭建项目，还是集成第三方服务、调试复杂Bug，它都能提供专业的建议和解决方案。
它非常适合前端开发、全栈开发以及需要快速验证Web原型的项目经理。对于高校学生完成Web相关的课程设计或毕业设计，本Skill也能提供从环境搭建到代码实现的系统性帮助。
使用本Skill时，建议尽可能清晰地描述你遇到的具体技术问题、使用的框架版本和期望的目标。对于复杂的部署或集成问题，提供相关的配置代码或错误日志，能帮助你获得更精准的解答。
核心特点
专注于产品方向明确后的具体实现阶段，提供从编码、调试到构建、部署的端到端Web前端开发支持，尤其深度覆盖React、Vue、Vite及CloudBase Web集成等具体技术栈。
注意事项
不适合产品创意、市场调研、UI/UX设计等方向未明确的前期阶段，也不擅长处理与Web前端无关的后端架构或底层系统问题。
常见问题
这个Skill能帮我写一个完整的React组件吗？
可以，请提供组件的具体功能、所需Props和期望的UI效果，我会生成相应的代码。
如何用这个Skill调试Vite项目的构建错误？
请提供你的vite.config.js配置、具体的错误信息以及项目结构，我会帮你分析原因并提供解决方案。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/web-development-x/raw/index.md 读取 web-development 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/web-development-x/raw/index.md（查看排版版本）