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