用途
Vibe Coding 是一个 Web 开发与 Claude Code 导师型技能，面向初学者和中级开发者，帮助其学习 Web 开发基础、理解完整技术栈，并掌握使用 Claude Code 进行 AI 辅助开发的工作流。它同时指导用户创建和使用 Claude Skills，以增强开发流程。
主要能力
- 教授 Web 开发基础：HTML（结构与元素）、CSS（布局、间距、设计）、JavaScript（交互与行为），以及 React、Vue、Next.js 等框架用于扩展复杂度。
- 讲解后端基础：后端负责接收请求、应用规则、与数据库通信；入门技术栈包括 Node.js + Express、Python + Flask 或 Django。
- 介绍数据库入门选项：SQLite（本地、简单）、PostgreSQL（生产可用）、Supabase（Postgres + 认证 + 实时）、Firebase（Google 的 BaaS），并建议先聚焦 CRUD 操作。
- 说明部署与托管：前端可用 Netlify、Vercel、GitHub Pages；后端可用 Render、Railway、Fly.io。
- 提供分阶段学习路径：阶段 1 静态网站（多页 HTML/CSS 站点）、阶段 2 交互性（JavaScript 驱动的 UI）、阶段 3 内容站点（CMS 驱动，如 WordPress、Ghost、Contentful）、阶段 4 学习平台（结构化内容系统）、阶段 5 Web 应用（后端 + 数据库集成）、阶段 6 电商与市场（支付、商品列表、用户管理）、阶段 7 部署精通（域名、CI/CD、环境）。
- 指导创建 Claude Skills：在 ~/.claude/skills/<skill-name>/ 创建目录，编写带 YAML frontmatter 和指令的 SKILL.md，添加 templates/、examples/、scripts/、references/ 等支持文件，并通过 /skill-name 调用测试。
- 说明 Skill 结构与 frontmatter 字段：name（斜杠命令名）、description（做什么与何时用，触发自动调用）、version（版本字符串）、disable-model-invocation（为 true 时仅用户可调用）、user-invocable（为 false 时仅 Claude 可调用）、allowed-tools（限制可用工具）。
使用方式
该技能以导师角色运作，核心哲学是“一次一个项目”：在开始新项目前先完成一个完整项目，因为已交付的项目能教会系统思维。它将现代 Web 开发视为四个相互连接的系统：前端代码（浏览器）、后端代码（服务器）、数据库、部署与托管，而非彼此独立的技能。
教学时采用固定输出格式：概念（简要解释）、示例（代码或实际演示）、试一试（可执行的下一步）、常见错误（应避免什么）。构建时采用：计划（要构建什么）、步骤（顺序实现）、代码（带注释的可运行代码）、测试（如何验证其工作）。
适用场景
适合希望系统学习 Web 开发全栈基础、需要 AI 辅助编码工作流指导、或想创建自定义 Claude Skills 的初学者与中级开发者。
限制
该技能强调始终建议在开始新项目前完成当前项目、将复杂主题拆解为可消化步骤、提供可运行代码示例而非仅理论、聚焦交付而非完美、并根据用户当前水平匹配解释。资料未提供该技能的收费、价格、平台支持范围或具体效果数据。