Build Web Apps 插件
Build Web Apps 插件专注于前端应用的开发，从概念设计到实现、测试和优化。它提供了一套完整的技能来帮助你在前端项目中遵循最佳实践。
功能概述
- 🎨 从图像生成的概念设计构建前端应用
- 🧪 前端测试与调试
- ⚛️ React/Next.js 性能优化
- 🎨 shadcn/ui 组件管理
- 💳 Stripe 支付集成
- 🗄️ Supabase/Postgres 性能优化
包含的技能
技能列表
| 技能名称 | 描述 |
|---|---|
frontend-app-builder | 从干净的、高保真的概念设计构建新的前端应用 |
frontend-testing-debugging | 测试、调试和改进已渲染的前端应用 |
react-best-practices | React 和 Next.js 性能优化指南（来自 Vercel 工程团队） |
shadcn | shadcn/ui 组件和项目管理 |
stripe-best-practices | Stripe 集成决策指南 |
supabase-postgres-best-practices | Postgres 性能优化最佳实践（来自 Supabase） |
前端应用构建器 (frontend-app-builder)
当需要创建新的前端应用、仪表盘、游戏、创意网站或视觉驱动的 UI 时使用此技能。支持从空白开始构建或重新设计/改造现有应用。
触发时机
- 创建新的前端应用或仪表盘
- 构建游戏或创意网站的 Hero Section
- 用户明确要求重新设计/改造/现代化
工作流程
- 生成图像驱动的概念设计（干净、通风、高品味）
- 为特定部分生成参考图片
- 忠实实现设计
- 在浏览器中测试
示例提示词
创建一个新的仪表盘应用，展示销售数据分析为我的 SaaS 产品构建一个落地页使用 --preset 创建一个新的 Next.js 应用前端测试与调试 (frontend-testing-debugging)
当需要测试、调试或改进已渲染的前端应用时使用。
触发时机
- 本地开发服务器测试
- UI 回归测试
- 交互 Bug 修复
- 控制台错误排查
- 响应式布局检查
- 视觉 QA
示例提示词
测试我的本地开发服务器上的登录流程在移动端视口下检查这个页面的布局修复这个按钮点击没有反应的问题React 最佳实践 (react-best-practices)
来自 Vercel 工程团队的 React 和 Next.js 性能优化指南。
触发时机
- 涉及 React 组件的编写、审查或重构
- Next.js 页面优化
- 数据获取模式优化
- Bundle 优化
- 性能改进
示例提示词
审查这个 React 组件的性能问题优化这个 Next.js 页面的数据获取逻辑shadcn/ui (shadcn)
管理 shadcn/ui 组件和项目，包括添加、搜索、修复、调试、样式设计和组合 UI。
触发时机
- 使用 shadcn/ui 组件
- 组件注册表管理
- 使用
--preset创建应用 - 有
components.json文件的项目
示例提示词
在我的项目中添加一个 Dialog 组件搜索可用的表格组件使用 --preset 切换到新的预设Stripe 最佳实践 (stripe-best-practices)
指导 Stripe 集成决策，包括 API 选择和平台设置。
触发时机
- 接受支付
- 构建市场平台
- 集成 Stripe
- 设置订阅
- 创建关联账户
- 从已弃用的 Stripe API 迁移
示例提示词
集成 Stripe Checkout 来处理一次性付款设置 Stripe Connect 来处理市场付款Supabase/Postgres 最佳实践 (supabase-postgres-best-practices)
来自 Supabase 的 Postgres 性能优化指南。
触发时机
- 编写、审查或优化 Postgres 查询
- 数据库 schema 设计
- 数据库配置优化
示例提示词
优化这个 Postgres 查询的性能审查这个数据库 schema 设计