Senior Frontend 是一个完整的前端开发技能工具包，专为使用现代工具和最佳实践进行前端开发而设计。
用途
该技能面向需要构建现代、高性能 Web 应用的前端开发场景。核心方向是基于 ReactJS、NextJS、TypeScript 和 Tailwind CSS 进行开发，并通过自动化脚本与参考文档帮助开发者遵循成熟模式与最佳实践。
主要能力
该技能通过自动化脚本提供三项核心能力：
- 组件生成器（Component Generator）：用于自动生成组件相关任务，具备自动化脚手架、内置最佳实践、可配置模板和质量检查等特性。使用方式为：
python scripts/component_generator.py <project-path> [options]
- 打包分析器（Bundle Analyzer）：综合性分析与优化工具，具备深度分析、性能指标、优化建议和自动修复等特性。使用方式为：
python scripts/bundle_analyzer.py <target-path> [--verbose]
- 前端脚手架（Frontend Scaffolder）：面向专业化任务的高级工具，具备专家级自动化、自定义配置、集成就绪和生产级输出等特性。使用方式为：
python scripts/frontend_scaffolder.py [arguments] [options]
使用方式
初始化与配置
安装依赖：
npm install
# 或
pip install -r requirements.txt
配置环境：
cp .env.example .env
运行质量检查
python scripts/bundle_analyzer.py .
随后查看建议并应用修复。
实现最佳实践
参照以下文档中的模式与实践：
- references/react_patterns.md
- references/nextjs_optimization_guide.md
- references/frontend_best_practices.md
常用命令
开发相关：
npm run dev
npm run build
npm run test
npm run lint
分析相关：
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze
部署相关：
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/
参考文档
- React Patterns：references/react_patterns.md，包含详细模式与实践、代码示例、最佳实践、应避免的反模式以及真实场景。
- Next.js Optimization Guide：references/nextjs_optimization_guide.md，包含分步流程、优化策略、工具集成、性能调优和故障排查指南。
- Frontend Best Practices：references/frontend_best_practices.md，包含技术栈细节、配置示例、集成模式、安全考量和可扩展性指南。
技术栈
- 语言：TypeScript、JavaScript、Python、Go、Swift、Kotlin
- 前端：React、Next.js、React Native、Flutter
- 后端：Node.js、Express、GraphQL、REST APIs
- 数据库：PostgreSQL、Prisma、NeonDB、Supabase
- DevOps：Docker、Kubernetes、Terraform、GitHub Actions、CircleCI
- 云平台：AWS、GCP、Azure
最佳实践摘要
- 代码质量：遵循既定模式、编写全面的测试、为决策编写文档、定期审查。
- 性能：优化前先测量、使用合适的缓存、优化关键路径、在生产环境中监控。
- 安全：校验所有输入、使用参数化查询、实现恰当的身份认证、保持依赖更新。
- 可维护性：编写清晰的代码、使用一致的命名、添加有用的注释、保持简单。
适用场景
适用于需要以 React、Next.js、TypeScript、Tailwind CSS 等现代前端技术构建高性能 Web 应用的开发工作，以及需要进行组件搭建、打包体积分析优化和前端项目初始化的场景。
限制
关于该技能的收费、价格、平台限制、具体效果等详细信息暂未提供。故障排查方面，文档指向 references/frontend_best_practices.md 中的综合性排查章节。