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:

1# Script 1: Component Generator
2python scripts/component_generator.py [options]
3
4# Script 2: Bundle Analyzer
5python scripts/bundle_analyzer.py [options]
6
7# Script 3: Frontend Scaffolder
8python scripts/frontend_scaffolder.py [options]

Core Capabilities

1. Component Generator

Automated tool for component generator tasks.

Features:

• Automated scaffolding
• Best practices built-in
• Configurable templates
• Quality checks

Usage:

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

2. Bundle Analyzer

Comprehensive analysis and optimization tool.

Features:

• Deep analysis
• Performance metrics
• Recommendations
• Automated fixes

Usage:

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

3. Frontend Scaffolder

Advanced tooling for specialized tasks.

Features:

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

Usage:

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

Reference Documentation

React Patterns

Comprehensive guide available in references/react_patterns.md:

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

Nextjs Optimization Guide

Complete workflow documentation in references/nextjs_optimization_guide.md:

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

Frontend Best Practices

Technical reference guide in references/frontend_best_practices.md:

• Technology stack details
• Configuration examples
• Integration patterns
• Security considerations
• Scalability guidelines

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

Development Workflow

1. Setup and Configuration

1# Install dependencies
2npm install
3# or
4pip install -r requirements.txt
5
6# Configure environment
7cp .env.example .env

2. Run Quality Checks

1# Use the analyzer script
2python scripts/bundle_analyzer.py .
3
4# Review recommendations
5# Apply fixes

3. Implement Best Practices

Follow the patterns and practices documented in:

• 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

 1# Development
 2npm run dev
 3npm run build
 4npm run test
 5npm run lint
 6
 7# Analysis
 8python scripts/bundle_analyzer.py .
 9python scripts/frontend_scaffolder.py --analyze
10
11# Deployment
12docker build -t app:latest .
13docker-compose up -d
14kubectl apply -f k8s/

Troubleshooting

Common Issues

Check the comprehensive troubleshooting section in 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