senior-frontend

Original：🇺🇸 English
Not Translated
3 scriptsChecked / no sensitive code detected

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.

4installs
Sourceatalovesyou/claude-skills-pack
Added on

NPX Install

npx skill4agent add atalovesyou/claude-skills-pack senior-frontend

SKILL.md Content

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

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

# Configure environment
cp .env.example .env

2. Run Quality Checks

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

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