ngxtm 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:
# Script 1: Component Generator
python3 ~/.{TOOL}/skills/senior-frontend/scripts/component_generator.py [options]
# Script 2: Bundle Analyzer
python3 ~/.{TOOL}/skills/senior-frontend/scripts/bundle_analyzer.py [options]
# Script 3: Frontend Scaffolder
python3 ~/.{TOOL}/skills/senior-frontend/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:
python3 ~/.{TOOL}/skills/senior-frontend/scripts/component_generator.py <project-path> [options]
2. Bundle Analyzer
Comprehensive analysis and optimization tool.
Features:
- Deep analysis
- Performance metrics
- Recommendations
- Automated fixes
Usage:
python3 ~/.{TOOL}/skills/senior-frontend/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:
python3 ~/.{TOOL}/skills/senior-frontend/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
python3 ~/.{TOOL}/skills/senior-frontend/scripts/bundle_analyzer.py .
# Review recommendations
# Apply fixes
3. Implement Best Practices
Follow the patterns and practices documented in:
references/react_patterns.mdreferences/nextjs_optimization_guide.mdreferences/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
python3 ~/.{TOOL}/skills/senior-frontend/scripts/bundle_analyzer.py .
python3 ~/.{TOOL}/skills/senior-frontend/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