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

注意事项

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