web-development
专注于Web前端开发、构建、调试与部署的AI助手技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：web-development。 它的用途是：专注于Web前端开发、构建、调试与部署的AI助手技能。 完整的 Skill 内容见：https://321skill.com/skills/web-development/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个Vue 3的组合式API组件，用来展示一个可过滤的商品列表，并且要支持分页。’，它会提供完整的Vue 3 `<script setup>` 代码示例，包括响应式数据、计算属性和分页逻辑。或者，
对AI说：‘我的Vite项目在生产环境构建后，CSS文件体积过大，如何优化？’，它会分析可能的原因并提供具体的vite.config.js配置修改建议，如启用CSS代码分割、压缩等。
介绍
当产品方向明确后，本技能旨在帮助用户高效完成Web前端的具体实现工作。它专注于解决从编码到上线的全链路问题，包括React、Vue等框架的组件开发、代码调试、项目构建、自动化部署以及功能验证，尤其适用于需要与云开发平台（如CloudBase Web）集成的场景。
使用时，您可以直接提出具体的前端开发任务，例如编写一个Vue 3组件、调试浏览器中的样式问题、配置Vite项目的构建优化，或者将React应用部署到云端。本技能会基于最佳实践和具体技术栈，提供代码片段、配置建议和分步指导。
本技能最适合前端开发工程师、全栈开发工程师以及需要快速搭建或验证Web原型的产品经理。对于高校学生完成前端课程作业或毕业设计，以及求职者准备前端技术面试的实践部分，同样有显著帮助。
建议在使用时，尽可能清晰地描述您使用的技术栈（如React 18 + TypeScript）和当前遇到的问题或具体需求。对于复杂的部署或集成任务，请提前准备好相关的云服务账号或环境配置信息，以便获得更精准的指导。
核心特点
与通用编程技能相比，它深度聚焦于现代Web前端技术栈（React/Vue/Vite）和浏览器环境的特定问题；与单纯的教学技能相比，它更强调“动手实现”，直接提供可操作的代码、配置和调试方案，并能指导与腾讯云CloudBase Web等具体云服务的集成。
注意事项
不适合用于产品方向探索、UI/UX设计、后端API开发或与前端无关的纯算法研究。
常见问题
能帮我写一个React函数组件吗？
可以，请描述组件功能、需要的Props和UI样式偏好。
如何用Vite优化我的项目构建速度？
可以提供具体的配置优化建议，如代码分割、依赖预构建等。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/web-development/raw/index.md 读取 web-development 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/web-development/raw/index.md（查看排版版本）