← ClaudeAtlas

senior-frontendlisted

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.
NaetheraS/claude-skills-pack · ★ 0 · Web & Frontend · score 62
Install: claude install-skill NaetheraS/claude-skills-pack
# 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 Optimiz