mcpField
S
senior-frontend

senior-frontend

github.com/ovachiever开发5656 次安装48 周前更新
代码仓库

关于 senior-frontend

面向现代前端开发者的技能，提供组件生成、打包分析和项目脚手架脚本，并附有 React 与 Next.js 参考资料。

主要功能

  1. 01通过可配置模板生成组件
  2. 02分析打包内容并提供建议
  3. 03搭建前端项目脚手架
  4. 04查阅 React 与 Next.js 指南
  5. 05参考前端质量与性能实践

适用场景

  1. 01搭建前端项目
  2. 02使用模板生成组件
  3. 03检查打包性能
  4. 04查找 React 或 Next.js 模式

安装

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

$npx skills add https://github.com/ovachiever/droid-tings --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