senior-frontend

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Senior Frontend

高级前端开发

Complete toolkit for senior frontend with modern tools and best practices.

这是一套面向高级前端开发者的完整工具集，包含现代工具与最佳实践。

Quick Start

快速开始

Main Capabilities

核心功能

This skill provides three core capabilities through automated scripts:

bash

undefined

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

bash

undefined

Script 1: Component Generator

脚本1：组件生成器

python scripts/component_generator.py [options]

Script 2: Bundle Analyzer

脚本2：包分析工具

python scripts/bundle_analyzer.py [options]

Script 3: Frontend Scaffolder

脚本3：前端脚手架工具

python scripts/frontend_scaffolder.py [options]

undefined

python scripts/frontend_scaffolder.py [options]

undefined

Core Capabilities

核心功能详情

1. Component Generator

1. 组件生成器

Automated tool for component generator tasks.

Features:

Automated scaffolding
Best practices built-in
Configurable templates
Quality checks

Usage:

bash

python scripts/component_generator.py <project-path> [options]

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

特性：

自动化脚手架搭建
内置最佳实践
可配置模板
质量检查

使用方式：

bash

python scripts/component_generator.py <project-path> [options]

2. Bundle Analyzer

2. 包分析工具

Comprehensive analysis and optimization tool.

Features:

Deep analysis
Performance metrics
Recommendations
Automated fixes

Usage:

bash

python scripts/bundle_analyzer.py <target-path> [--verbose]

全面的分析与优化工具。

特性：

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

使用方式：

bash

python scripts/bundle_analyzer.py <target-path> [--verbose]

3. Frontend Scaffolder

3. 前端脚手架工具

Advanced tooling for specialized tasks.

Features:

Expert-level automation
Custom configurations
Integration ready
Production-grade output

Usage:

bash

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

面向专业任务的高级工具集。

特性：

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

使用方式：

bash

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

Reference Documentation

参考文档

React Patterns

React 模式

Comprehensive guide available in

references/react_patterns.md

Detailed patterns and practices
Code examples
Best practices
Anti-patterns to avoid
Real-world scenarios

完整指南位于

references/react_patterns.md

：

详细的模式与实践
代码示例
最佳实践
需要避免的反模式
真实场景案例

Nextjs Optimization Guide

Next.js 优化指南

Complete workflow documentation in

references/nextjs_optimization_guide.md

Step-by-step processes
Optimization strategies
Tool integrations
Performance tuning
Troubleshooting guide

完整工作流文档位于

references/nextjs_optimization_guide.md

：

分步流程
优化策略
工具集成
性能调优
故障排除指南

Frontend Best Practices

前端最佳实践

Technical reference guide in

references/frontend_best_practices.md

Technology stack details
Configuration examples
Integration patterns
Security considerations
Scalability guidelines

技术参考指南位于

references/frontend_best_practices.md

：

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

Tech Stack

技术栈

Languages: TypeScript, JavaScript, Python, Go, Swift, Kotlin Frontend: React, Next.js, React Native, Flutter Backend: Node.js, Express, GraphQL, REST APIs Database: PostgreSQL, Prisma, NeonDB, Supabase DevOps: Docker, Kubernetes, Terraform, GitHub Actions, CircleCI Cloud: AWS, GCP, Azure

编程语言： 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

Development Workflow

开发工作流

1. Setup and Configuration

1. 环境搭建与配置

bash

undefined

bash

undefined

Install dependencies

安装依赖

npm install

or

或

pip install -r requirements.txt

Configure environment

配置环境变量

cp .env.example .env

undefined

cp .env.example .env

undefined

2. Run Quality Checks

2. 运行质量检查

bash

undefined

bash

undefined

Use the analyzer script

使用分析脚本

python scripts/bundle_analyzer.py .

Review recommendations

查看优化建议

Apply fixes

应用修复方案

undefined

undefined

3. Implement Best Practices

3. 遵循最佳实践

Follow the patterns and practices documented in:

```
references/react_patterns.md
```
```
references/nextjs_optimization_guide.md
```
```
references/frontend_best_practices.md
```

参考以下文档中的模式与实践：

```
references/react_patterns.md
```
```
references/nextjs_optimization_guide.md
```
```
references/frontend_best_practices.md
```

Best Practices Summary

最佳实践总结

Code Quality

代码质量

Follow established patterns
Write comprehensive tests
Document decisions
Review regularly

遵循既定模式
编写全面测试
记录决策过程
定期评审代码

Performance

性能优化

Measure before optimizing
Use appropriate caching
Optimize critical paths
Monitor in production

先测量再优化
使用合适的缓存策略
优化关键路径
生产环境持续监控

Security

安全防护

Validate all inputs
Use parameterized queries
Implement proper authentication
Keep dependencies updated

验证所有输入
使用参数化查询
实现正确的认证机制
保持依赖更新

Maintainability

可维护性

Write clear code
Use consistent naming
Add helpful comments
Keep it simple

编写清晰的代码
使用一致的命名规范
添加有用的注释
保持代码简洁

Common Commands

常用命令

bash

undefined

bash

undefined

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/

undefined

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

undefined

Troubleshooting

故障排除

Common Issues

常见问题

Check the comprehensive troubleshooting section in

references/frontend_best_practices.md

查看

references/frontend_best_practices.md

中的完整故障排除章节。

Getting Help

获取帮助

Review reference documentation
Check script output messages
Consult tech stack documentation
Review error logs

查阅参考文档
查看脚本输出信息
参考技术栈官方文档
检查错误日志

Resources

资源

Pattern Reference:
```
references/react_patterns.md
```
Workflow Guide:
```
references/nextjs_optimization_guide.md
```
Technical Guide:
```
references/frontend_best_practices.md
```
Tool Scripts:
```
scripts/
```
directory

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