Senior Frontend
- 1.8k installs
- 29.9k repo stars
- Updated July 27, 2026
- davila7/claude-code-templates
senior-frontend is an agent skill for Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performan
About
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code. The senior-frontend skill documents workflows and patterns from the repository SKILL.md. --- name: senior-frontend description: Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code. --- # 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 # Script 1: Component Generator python scripts/component_generator.py [options] # Script 2: Bundle Analyzer python.
- Script 1: Component Generator
- Script 2: Bundle Analyzer
- Script 3: Frontend Scaffolder
- Automated scaffolding
- Best practices built-in
Senior Frontend by the numbers
- 1,808 all-time installs (skills.sh)
- +42 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #199 of 1,041 Cloud & Infrastructure skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
senior-frontend capabilities & compatibility
- Capabilities
- script 1: component generator · script 2: bundle analyzer · script 3: frontend scaffolder · automated scaffolding · best practices built in
- Use cases
- documentation
What senior-frontend says it does
--- name: senior-frontend description: Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS.
Includes component scaffolding, performance optimization, bundle analysis, and UI best practices.
Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
--- # Senior Frontend Complete toolkit for senior frontend with modern tools and best practices.
npx skills add https://github.com/davila7/claude-code-templates --skill senior-frontendAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.8k |
|---|---|
| repo stars | ★ 29.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 27, 2026 |
| Repository | davila7/claude-code-templates ↗ |
What problem does senior-frontend solve for developers using the documented workflows?
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bun
Who is it for?
Developers working with senior-frontend patterns described in the skill documentation.
Skip if: Skip when docs are empty or the task is outside the skill documented scope.
When should I use this skill?
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bun
What you get
Grounded guidance and workflows from SKILL.md for senior-frontend.
- Pattern implementations
- Frontend architecture guidance
Files
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
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]Core Capabilities
1. Component Generator
Automated tool for component generator tasks.
Features:
- Automated scaffolding
- Best practices built-in
- Configurable templates
- Quality checks
Usage:
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 .env2. Run Quality Checks
# Use the analyzer script
python scripts/bundle_analyzer.py .
# Review recommendations
# Apply fixes3. 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
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
Frontend Best Practices
Overview
This reference guide provides comprehensive information for senior frontend.
Patterns and Practices
Pattern 1: Best Practice Implementation
Description: Detailed explanation of the pattern.
When to Use:
- Scenario 1
- Scenario 2
- Scenario 3
Implementation:
// Example code implementation
export class Example {
// Implementation details
}Benefits:
- Benefit 1
- Benefit 2
- Benefit 3
Trade-offs:
- Consider 1
- Consider 2
- Consider 3
Pattern 2: Advanced Technique
Description: Another important pattern for senior frontend.
Implementation:
// Advanced example
async function advancedExample() {
// Code here
}Guidelines
Code Organization
- Clear structure
- Logical separation
- Consistent naming
- Proper documentation
Performance Considerations
- Optimization strategies
- Bottleneck identification
- Monitoring approaches
- Scaling techniques
Security Best Practices
- Input validation
- Authentication
- Authorization
- Data protection
Common Patterns
Pattern A
Implementation details and examples.
Pattern B
Implementation details and examples.
Pattern C
Implementation details and examples.
Anti-Patterns to Avoid
Anti-Pattern 1
What not to do and why.
Anti-Pattern 2
What not to do and why.
Tools and Resources
Recommended Tools
- Tool 1: Purpose
- Tool 2: Purpose
- Tool 3: Purpose
Further Reading
- Resource 1
- Resource 2
- Resource 3
Conclusion
Key takeaways for using this reference guide effectively.
Nextjs Optimization Guide
Overview
This reference guide provides comprehensive information for senior frontend.
Patterns and Practices
Pattern 1: Best Practice Implementation
Description: Detailed explanation of the pattern.
When to Use:
- Scenario 1
- Scenario 2
- Scenario 3
Implementation:
// Example code implementation
export class Example {
// Implementation details
}Benefits:
- Benefit 1
- Benefit 2
- Benefit 3
Trade-offs:
- Consider 1
- Consider 2
- Consider 3
Pattern 2: Advanced Technique
Description: Another important pattern for senior frontend.
Implementation:
// Advanced example
async function advancedExample() {
// Code here
}Guidelines
Code Organization
- Clear structure
- Logical separation
- Consistent naming
- Proper documentation
Performance Considerations
- Optimization strategies
- Bottleneck identification
- Monitoring approaches
- Scaling techniques
Security Best Practices
- Input validation
- Authentication
- Authorization
- Data protection
Common Patterns
Pattern A
Implementation details and examples.
Pattern B
Implementation details and examples.
Pattern C
Implementation details and examples.
Anti-Patterns to Avoid
Anti-Pattern 1
What not to do and why.
Anti-Pattern 2
What not to do and why.
Tools and Resources
Recommended Tools
- Tool 1: Purpose
- Tool 2: Purpose
- Tool 3: Purpose
Further Reading
- Resource 1
- Resource 2
- Resource 3
Conclusion
Key takeaways for using this reference guide effectively.
React Patterns
Overview
This reference guide provides comprehensive information for senior frontend.
Patterns and Practices
Pattern 1: Best Practice Implementation
Description: Detailed explanation of the pattern.
When to Use:
- Scenario 1
- Scenario 2
- Scenario 3
Implementation:
// Example code implementation
export class Example {
// Implementation details
}Benefits:
- Benefit 1
- Benefit 2
- Benefit 3
Trade-offs:
- Consider 1
- Consider 2
- Consider 3
Pattern 2: Advanced Technique
Description: Another important pattern for senior frontend.
Implementation:
// Advanced example
async function advancedExample() {
// Code here
}Guidelines
Code Organization
- Clear structure
- Logical separation
- Consistent naming
- Proper documentation
Performance Considerations
- Optimization strategies
- Bottleneck identification
- Monitoring approaches
- Scaling techniques
Security Best Practices
- Input validation
- Authentication
- Authorization
- Data protection
Common Patterns
Pattern A
Implementation details and examples.
Pattern B
Implementation details and examples.
Pattern C
Implementation details and examples.
Anti-Patterns to Avoid
Anti-Pattern 1
What not to do and why.
Anti-Pattern 2
What not to do and why.
Tools and Resources
Recommended Tools
- Tool 1: Purpose
- Tool 2: Purpose
- Tool 3: Purpose
Further Reading
- Resource 1
- Resource 2
- Resource 3
Conclusion
Key takeaways for using this reference guide effectively.
#!/usr/bin/env python3
"""
Bundle Analyzer
Automated tool for senior frontend tasks
"""
import os
import sys
import json
import argparse
from pathlib import Path
from typing import Dict, List, Optional
class BundleAnalyzer:
"""Main class for bundle analyzer functionality"""
def __init__(self, target_path: str, verbose: bool = False):
self.target_path = Path(target_path)
self.verbose = verbose
self.results = {}
def run(self) -> Dict:
"""Execute the main functionality"""
print(f"🚀 Running {self.__class__.__name__}...")
print(f"📁 Target: {self.target_path}")
try:
self.validate_target()
self.analyze()
self.generate_report()
print("✅ Completed successfully!")
return self.results
except Exception as e:
print(f"❌ Error: {e}")
sys.exit(1)
def validate_target(self):
"""Validate the target path exists and is accessible"""
if not self.target_path.exists():
raise ValueError(f"Target path does not exist: {self.target_path}")
if self.verbose:
print(f"✓ Target validated: {self.target_path}")
def analyze(self):
"""Perform the main analysis or operation"""
if self.verbose:
print("📊 Analyzing...")
# Main logic here
self.results['status'] = 'success'
self.results['target'] = str(self.target_path)
self.results['findings'] = []
# Add analysis results
if self.verbose:
print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
def generate_report(self):
"""Generate and display the report"""
print("\n" + "="*50)
print("REPORT")
print("="*50)
print(f"Target: {self.results.get('target')}")
print(f"Status: {self.results.get('status')}")
print(f"Findings: {len(self.results.get('findings', []))}")
print("="*50 + "\n")
def main():
"""Main entry point"""
parser = argparse.ArgumentParser(
description="Bundle Analyzer"
)
parser.add_argument(
'target',
help='Target path to analyze or process'
)
parser.add_argument(
'--verbose', '-v',
action='store_true',
help='Enable verbose output'
)
parser.add_argument(
'--json',
action='store_true',
help='Output results as JSON'
)
parser.add_argument(
'--output', '-o',
help='Output file path'
)
args = parser.parse_args()
tool = BundleAnalyzer(
args.target,
verbose=args.verbose
)
results = tool.run()
if args.json:
output = json.dumps(results, indent=2)
if args.output:
with open(args.output, 'w') as f:
f.write(output)
print(f"Results written to {args.output}")
else:
print(output)
if __name__ == '__main__':
main()
#!/usr/bin/env python3
"""
Component Generator
Automated tool for senior frontend tasks
"""
import os
import sys
import json
import argparse
from pathlib import Path
from typing import Dict, List, Optional
class ComponentGenerator:
"""Main class for component generator functionality"""
def __init__(self, target_path: str, verbose: bool = False):
self.target_path = Path(target_path)
self.verbose = verbose
self.results = {}
def run(self) -> Dict:
"""Execute the main functionality"""
print(f"🚀 Running {self.__class__.__name__}...")
print(f"📁 Target: {self.target_path}")
try:
self.validate_target()
self.analyze()
self.generate_report()
print("✅ Completed successfully!")
return self.results
except Exception as e:
print(f"❌ Error: {e}")
sys.exit(1)
def validate_target(self):
"""Validate the target path exists and is accessible"""
if not self.target_path.exists():
raise ValueError(f"Target path does not exist: {self.target_path}")
if self.verbose:
print(f"✓ Target validated: {self.target_path}")
def analyze(self):
"""Perform the main analysis or operation"""
if self.verbose:
print("📊 Analyzing...")
# Main logic here
self.results['status'] = 'success'
self.results['target'] = str(self.target_path)
self.results['findings'] = []
# Add analysis results
if self.verbose:
print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
def generate_report(self):
"""Generate and display the report"""
print("\n" + "="*50)
print("REPORT")
print("="*50)
print(f"Target: {self.results.get('target')}")
print(f"Status: {self.results.get('status')}")
print(f"Findings: {len(self.results.get('findings', []))}")
print("="*50 + "\n")
def main():
"""Main entry point"""
parser = argparse.ArgumentParser(
description="Component Generator"
)
parser.add_argument(
'target',
help='Target path to analyze or process'
)
parser.add_argument(
'--verbose', '-v',
action='store_true',
help='Enable verbose output'
)
parser.add_argument(
'--json',
action='store_true',
help='Output results as JSON'
)
parser.add_argument(
'--output', '-o',
help='Output file path'
)
args = parser.parse_args()
tool = ComponentGenerator(
args.target,
verbose=args.verbose
)
results = tool.run()
if args.json:
output = json.dumps(results, indent=2)
if args.output:
with open(args.output, 'w') as f:
f.write(output)
print(f"Results written to {args.output}")
else:
print(output)
if __name__ == '__main__':
main()
#!/usr/bin/env python3
"""
Frontend Scaffolder
Automated tool for senior frontend tasks
"""
import os
import sys
import json
import argparse
from pathlib import Path
from typing import Dict, List, Optional
class FrontendScaffolder:
"""Main class for frontend scaffolder functionality"""
def __init__(self, target_path: str, verbose: bool = False):
self.target_path = Path(target_path)
self.verbose = verbose
self.results = {}
def run(self) -> Dict:
"""Execute the main functionality"""
print(f"🚀 Running {self.__class__.__name__}...")
print(f"📁 Target: {self.target_path}")
try:
self.validate_target()
self.analyze()
self.generate_report()
print("✅ Completed successfully!")
return self.results
except Exception as e:
print(f"❌ Error: {e}")
sys.exit(1)
def validate_target(self):
"""Validate the target path exists and is accessible"""
if not self.target_path.exists():
raise ValueError(f"Target path does not exist: {self.target_path}")
if self.verbose:
print(f"✓ Target validated: {self.target_path}")
def analyze(self):
"""Perform the main analysis or operation"""
if self.verbose:
print("📊 Analyzing...")
# Main logic here
self.results['status'] = 'success'
self.results['target'] = str(self.target_path)
self.results['findings'] = []
# Add analysis results
if self.verbose:
print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
def generate_report(self):
"""Generate and display the report"""
print("\n" + "="*50)
print("REPORT")
print("="*50)
print(f"Target: {self.results.get('target')}")
print(f"Status: {self.results.get('status')}")
print(f"Findings: {len(self.results.get('findings', []))}")
print("="*50 + "\n")
def main():
"""Main entry point"""
parser = argparse.ArgumentParser(
description="Frontend Scaffolder"
)
parser.add_argument(
'target',
help='Target path to analyze or process'
)
parser.add_argument(
'--verbose', '-v',
action='store_true',
help='Enable verbose output'
)
parser.add_argument(
'--json',
action='store_true',
help='Output results as JSON'
)
parser.add_argument(
'--output', '-o',
help='Output file path'
)
args = parser.parse_args()
tool = FrontendScaffolder(
args.target,
verbose=args.verbose
)
results = tool.run()
if args.json:
output = json.dumps(results, indent=2)
if args.output:
with open(args.output, 'w') as f:
f.write(output)
print(f"Results written to {args.output}")
else:
print(output)
if __name__ == '__main__':
main()
Related skills
Azure AiIntegrates Azure AI Content Safety, Document Intelligence, Speech, and Search services into Java-based agents and applications.479k1.3kAzure PrepareGenerate the exact Azure infrastructure files, Dockerfiles, and azure.yaml configuration needed before deploying any new or modernized application.479k1.3kAzure StorageConnect agents and applications to Azure Blob Storage, File Shares, Queues, Tables, and Data Lake without leaving the coding environment.478k1.3kAppinsights InstrumentationAutomatically instrument web applications running on Azure App Service with Application Insights for observability without manual configuration.478k1.3kAzure Resource LookupInstantly list, query, and discover any Azure resources across subscriptions without leaving the agent chat.478k1.3kAzure AigatewayConfigure Azure API Management as a secure, governed gateway for routing traffic to LLMs, MCP servers, and agent tools.478k1.3kForks & variants (1)
Senior Frontend has 1 known copy in the catalog totaling 53 installs. They canonicalize to this original listing.
- ovachiever - 53 installs
FAQ
Who is Senior Frontend for?
Developers and software engineers working with senior-frontend patterns from the skill documentation.
When should I use Senior Frontend?
Comprehensive frontend development skill for building modern, performant web applications using ReactJS, NextJS, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI
Is Senior Frontend safe to install?
Review the Security Audits panel on this page before installing in production.