web-development
专注于Web前端开发、调试与部署的AI助手技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：web-development。 它的用途是：专注于Web前端开发、调试与部署的AI助手技能。 完整的 Skill 内容见：https://321skill.com/skills/web-development-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我需要一个Vue 3的组合式API组件，用来展示一个可过滤的商品列表，并集成到我的Vite项目中。'，它会生成相应的Vue单文件组件代码，并说明如何在Vite项目中引入和使用。或者，你可以说：'我的React应用在部署到CloudBase后出现了路由404错误，如何解决？'，它会分析可能的原因并提供SPA路由的配置建议。
介绍
本技能旨在解决Web前端开发过程中，在明确产品方向后，从实现到上线的具体技术问题。当开发者需要编写React、Vue组件，集成Vite构建工具，处理浏览器端逻辑，或与CloudBase等云服务进行Web集成时，它可以提供直接的代码实现、调试建议和部署指导。
技能通过解析用户的具体开发需求，直接生成或修改前端代码，提供调试思路，并给出构建、部署和验证的步骤。它尤其擅长处理现代前端框架（React, Vue）和工具链（Vite）相关的技术细节。
该技能主要面向前端开发、全栈开发和需要快速验证Web原型的开发者。对于产品经理或设计师，它也能帮助快速将界面原型转化为可运行的代码片段。
使用建议：在提问时，请尽可能清晰地描述你的技术栈、当前遇到的问题或需要实现的功能模块。对于复杂的部署或集成问题，建议分步骤询问。注意，它不负责产品方向或UI/UX设计层面的决策。
核心特点
与通用编程技能相比，它深度聚焦于现代Web前端技术栈（React, Vue, Vite），并提供从编码、调试到部署（尤其是CloudBase Web集成）的端到端工作流支持，而非泛泛的代码生成。
注意事项
不适合处理服务器端渲染（SSR）的深度配置、底层浏览器引擎问题或未明确技术栈的抽象产品设计讨论。
常见问题
这个技能能帮我写一个React组件吗？
可以，请描述组件功能、所需Props和UI样式偏好。
如何用这个技能调试Vite构建错误？
请提供具体的错误日志、vite.config.js配置和相关代码片段。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/web-development-x-2/raw/index.md 读取 web-development 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/web-development-x-2/raw/index.md（查看排版版本）