ReddRadar
Agent skill
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 best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.
Install this agent skill to your Project
npx add-skill https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/development/senior-frontend
SKILL.md
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 .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.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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
davila7/claude-code-templates
verl-rl-training
Provides guidance for training LLMs with reinforcement learning using verl (Volcano Engine RL). Use when implementing RLHF, GRPO, PPO, or other RL algorithms for LLM post-training at scale with flexible infrastructure backends.
davila7/claude-code-templates
openrlhf-training
High-performance RLHF framework with Ray+vLLM acceleration. Use for PPO, GRPO, RLOO, DPO training of large models (7B-70B+). Built on Ray, vLLM, ZeRO-3. 2× faster than DeepSpeedChat with distributed architecture and GPU resource sharing.
davila7/claude-code-templates
gguf-quantization
GGUF format and llama.cpp quantization for efficient CPU/GPU inference. Use when deploying models on consumer hardware, Apple Silicon, or when needing flexible quantization from 2-8 bit without GPU requirements.
davila7/claude-code-templates
Claude Code Guide
Master guide for using Claude Code effectively. Includes configuration templates, prompting strategies "Thinking" keywords, debugging techniques, and best practices for interacting with the agent.
davila7/claude-code-templates
qdrant-vector-search
High-performance vector similarity search engine for RAG and semantic search. Use when building production RAG systems requiring fast nearest neighbor search, hybrid search with filtering, or scalable vector storage with Rust-powered performance.
davila7/claude-code-templates
behavioral-modes
AI operational modes (brainstorm, implement, debug, review, teach, ship, orchestrate). Use to adapt behavior based on task type.
Didn't find tool you were looking for?