Web 应用开发 Skill
使用场景
当用户需要：
-
创建新的 Web 应用项目
-
设计应用架构和数据结构
-
开发前端界面和交互
-
构建后端 API 和服务
-
集成数据库和第三方服务
-
配置部署和 DevOps 流程
-
优化性能和用户体验
开发流程
- 需求分析与规划
-
明确应用的核心功能和目标用户
-
定义功能模块和优先级
-
规划技术栈和架构方案
-
设计数据模型和 API 接口
- 项目初始化
-
选择合适的框架和工具链
-
配置开发环境和构建工具
-
设置代码规范和项目结构
-
初始化版本控制和 CI/CD
- 前端开发
-
设计 UI/UX 界面
-
实现响应式布局
-
开发交互组件和状态管理
-
优化性能和用户体验
- 后端开发
-
设计 API 接口和路由
-
实现业务逻辑和数据验证
-
集成数据库和缓存
-
实现认证和授权机制
- 测试与优化
-
编写单元测试和集成测试
-
进行性能测试和优化
-
修复 bug 和改进代码质量
-
优化 SEO 和可访问性
- 部署与维护
-
配置生产环境
-
设置监控和日志
-
实现持续部署流程
-
制定维护和更新计划
技术栈推荐
前端框架
-
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
注意事项
-
根据项目规模选择合适的架构
-
平衡开发速度和代码质量
-
考虑可扩展性和维护成本
-
遵循安全最佳实践
-
持续优化和改进