---
name: web-app-builder
description: 全栈 Web 应用开发辅助技能。当用户需要创建、开发、构建 Web 应用时使用此技能。涵盖前端、后端、数据库设计、API 开发、部署等全流程。支持现代 Web 技术栈（React、Vue、Next.js、Node.js、Python、数据库等），帮助用户快速搭建生产就绪的 Web 应用。
---

# Web 应用开发 Skill

## 使用场景

当用户需要：
- 创建新的 Web 应用项目
- 设计应用架构和数据结构
- 开发前端界面和交互
- 构建后端 API 和服务
- 集成数据库和第三方服务
- 配置部署和 DevOps 流程
- 优化性能和用户体验

## 开发流程

### 1. 需求分析与规划
- 明确应用的核心功能和目标用户
- 定义功能模块和优先级
- 规划技术栈和架构方案
- 设计数据模型和 API 接口

### 2. 项目初始化
- 选择合适的框架和工具链
- 配置开发环境和构建工具
- 设置代码规范和项目结构
- 初始化版本控制和 CI/CD

### 3. 前端开发
- 设计 UI/UX 界面
- 实现响应式布局
- 开发交互组件和状态管理
- 优化性能和用户体验

### 4. 后端开发
- 设计 API 接口和路由
- 实现业务逻辑和数据验证
- 集成数据库和缓存
- 实现认证和授权机制

### 5. 测试与优化
- 编写单元测试和集成测试
- 进行性能测试和优化
- 修复 bug 和改进代码质量
- 优化 SEO 和可访问性

### 6. 部署与维护
- 配置生产环境
- 设置监控和日志
- 实现持续部署流程
- 制定维护和更新计划

## 技术栈推荐

### 前端框架
- **React** + Next.js：服务端渲染和静态生成
- **Vue** + Nuxt.js：渐进式框架
- **Svelte**：编译时优化
- **Angular**：企业级应用

### 后端框架
- **Node.js** + Express/Fastify：JavaScript 全栈
- **Python** + FastAPI/Django：快速开发和数据科学
- **Go** + Gin/Echo：高性能 API
- **Rust** + Actix：系统级性能

### 数据库
- **PostgreSQL**：关系型数据库
- **MongoDB**：文档数据库
- **Redis**：缓存和会话存储
- **SQLite**：轻量级开发

### 工具和库
- **TypeScript**：类型安全
- **Tailwind CSS**：实用优先的 CSS
- **Prisma/TypeORM**：ORM 工具
- **Jest/Vitest**：测试框架

## 最佳实践

### 代码质量
- 使用 TypeScript 提供类型安全
- 遵循代码规范和最佳实践
- 编写清晰的注释和文档
- 保持代码模块化和可复用

### 性能优化
- 实现代码分割和懒加载
- 优化图片和资源加载
- 使用 CDN 和缓存策略
- 监控和分析性能指标

### 安全性
- 实施输入验证和清理
- 使用 HTTPS 和安全的认证
- 防止常见安全漏洞（XSS、CSRF、SQL 注入）
- 定期更新依赖和补丁

### 用户体验
- 实现响应式设计
- 优化加载时间和交互反馈
- 提供清晰的错误提示
- 确保可访问性（a11y）

## 项目结构建议

```
project/
├── frontend/          # 前端代码
│   ├── src/
│   ├── public/
│   └── package.json
├── backend/           # 后端代码
│   ├── src/
│   ├── tests/
│   └── package.json
├── shared/            # 共享代码和类型
├── docs/              # 文档
├── docker/            # Docker 配置
└── README.md
```

## 注意事项

- 根据项目规模选择合适的架构
- 平衡开发速度和代码质量
- 考虑可扩展性和维护成本
- 遵循安全最佳实践
- 持续优化和改进