Script 3: Frontend Scaffolder

python 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:**
```bash
python scripts/component_generator.py <project-path> [options]

2. Bundle Analyzer

Comprehensive analysis and optimization tool.

Features:

Deep analysis
Performance metrics
Recommendations
Automated fixes

Usage:

python 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:

python 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

# Install dependencies
npm install
# or
pip install -r requirements.txt

# Configure environment
cp .env.example .env

2. Run Quality Checks

# Use the analyzer script
python scripts/bundle_analyzer.py .

# Review recommendations
# 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

# 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/

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

senior-frontend

Senior Frontend

Quick Start

Main Capabilities