mcpField
S
senior-frontend

senior-frontend

github.com/davila7开发33.0k2.1k 次安装1 天前更新
代码仓库

关于 senior-frontend

面向前端开发人员的技能包，包含组件生成、Bundle 分析和前端脚手架脚本，并提供 React、Next.js 优化及前端实践参考文档。

主要功能

  1. 01生成组件脚手架
  2. 02分析 Bundle 并提供优化建议
  3. 03创建前端项目脚手架
  4. 04提供 React 模式参考
  5. 05提供 Next.js 优化指南

适用场景

  1. 01按模板搭建前端组件
  2. 02检查项目 Bundle 性能
  3. 03创建前端项目初始结构

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/davila7/claude-code-templates --skill senior-frontend

安装后在 Claude Code 中输入/senior-frontend确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
frontend_best_practices.md
nextjs_optimization_guide.md
react_patterns.md
scripts/
bundle_analyzer.py
component_generator.py
frontend_scaffolder.py

详细介绍

资深前端开发

面向资深前端开发的完整工具包，采用现代工具与最佳实践。

快速入门

主要功能

此技能通过自动化脚本提供三项核心功能：

# Script 1: Component Generator
python scripts/component_generator.py [options]

# Script 2: Bundle Analyzer
python scripts/bundle_analyzer.py [options]

# Script 3: Frontend Scaffolder
python scripts/frontend_scaffolder.py [options]

核心功能

1. 组件生成器

用于组件生成任务的自动化工具。

功能：

  • 自动搭建
  • 内置最佳实践
  • 可配置模板
  • 质量检查

用法：

python scripts/component_generator.py <project-path> [options]
2. 打包分析器

全面的分析与优化工具。

功能：

  • 深度分析
  • 性能指标
  • 优化建议
  • 自动修复

用法：

python scripts/bundle_analyzer.py <target-path> [--verbose]
3. 前端脚手架工具

用于专门任务的高级工具。

功能：

  • 专家级自动化
  • 自定义配置
  • 可直接集成
  • 生产级输出

用法：

python scripts/frontend_scaffolder.py [arguments] [options]

参考文档

React 模式

references/react_patterns.md 中提供了全面指南：

  • 详细模式与实践
  • 代码示例
  • 最佳实践
  • 应避免的反模式
  • 真实场景
Nextjs 优化指南

references/nextjs_optimization_guide.md 中提供了完整的工作流文档：

  • 分步流程
  • 优化策略
  • 工具集成
  • 性能调优
  • 故障排除指南
前端最佳实践

references/frontend_best_practices.md 中提供了技术参考指南：

  • 技术栈详情
  • 配置示例
  • 集成模式
  • 安全注意事项
  • 可扩展性指南

技术栈

语言： TypeScript、JavaScript、Python、Go、Swift、Kotlin 前端： React、Next.js、React Native、Flutter 后端： Node.js、Express、GraphQL、REST API 数据库： PostgreSQL、Prisma、NeonDB、Supabase DevOps： Docker、Kubernetes、Terraform、GitHub Actions、CircleCI 云： AWS、GCP、Azure

开发工作流

1. 设置与配置
# Install dependencies
npm install
# or
pip install -r requirements.txt

# Configure environment
cp .env.example .env
2. 运行质量检查
# Use the analyzer script
python scripts/bundle_analyzer.py .

# Review recommendations
# Apply fixes
3. 实施最佳实践

遵循以下文档中记录的模式与实践：

  • references/react_patterns.md
  • references/nextjs_optimization_guide.md
  • references/frontend_best_practices.md

最佳实践概要

代码质量
  • 遵循既定模式
  • 编写全面的测试
  • 记录决策
  • 定期审查
性能
  • 优化前先测量
  • 使用适当的缓存
  • 优化关键路径
  • 在生产环境中监控
安全
  • 验证所有输入
  • 使用参数化查询
  • 实施适当的身份验证
  • 保持依赖项更新
可维护性
  • 编写清晰的代码
  • 使用一致的命名
  • 添加有用的注释
  • 保持简洁

常用命令

# Development
npm run dev
npm run build
npm run test
npm run lint

# Analysis
python scripts/bundle_analyzer.py .
python scripts/frontend_scaffolder.py --analyze

# Deployment
docker build -t app:latest .
docker-compose up -d
kubectl apply -f k8s/

故障排除

常见问题

请查看 references/frontend_best_practices.md 中全面的故障排除部分。

获取帮助
  • 查阅参考文档
  • 检查脚本输出消息
  • 查阅技术栈文档
  • 查看错误日志

资源

  • 模式参考：references/react_patterns.md
  • 工作流指南：references/nextjs_optimization_guide.md
  • 技术指南：references/frontend_best_practices.md
  • 工具脚本：scripts/ 目录

评论

支持 Markdown