senior-frontend

Automate component generation, bundle analysis, and scaffolding for React projects.

Updated Oct 27, 2025
One-click install
npx skills add https://github.com/alex-tgk/claude-init --skill senior-frontend-alex-tgk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/alex-tgk/claude-init/tree/main/.claude/skills/senior-frontend
Command: npx skills add https://github.com/alex-tgk/claude-init --skill senior-frontend-alex-tgk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill streamlines modern frontend development, automating tasks like component generation, performance optimization, and bundle analysis. It helps developers build performant, maintainable web applications faster and with fewer errors.

Core Features & Use Cases

  • Component Generator: Automatically scaffold new UI components following best practices.
  • Bundle Analyzer: Deeply analyze application bundles for performance bottlenecks and provide optimization recommendations.
  • Frontend Scaffolder: Rapidly set up new frontend projects with expert-level configurations.
  • Use Case: Generate a new React component, then analyze your application's bundle size to identify large dependencies, and get recommendations to reduce load times.

Quick Start

Use the senior-frontend skill to analyze the bundle size of the 'my-react-app' project.

Frequently Asked Questions about senior-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I analyze bundle size in a React or Next.js application?

Bundle analysis identifies large dependencies and performance bottlenecks in your React or Next.js application. This skill performs deep analysis on your application bundles, reports optimization opportunities, and recommends ways to reduce load times and improve performance.

Can I automate component generation for TypeScript React projects?

Component generation automates scaffolding of new UI components following best practices. This skill generates React components with TypeScript support, following industry conventions and reducing manual setup time for feature development and refactoring tasks.

What's the best way to set up a performant frontend project with React and Next.js?

Frontend scaffolding rapidly sets up new projects with expert-level configurations and best practices. This skill handles project initialization, configuration, and structural setup for React and Next.js applications, ensuring performance optimization from the start.

How do I identify which dependencies are slowing down my frontend application?

Bundle analysis deeply examines your application's dependencies to pinpoint performance bottlenecks and large packages. The skill generates detailed reports with specific optimization recommendations to reduce bundle size and improve load times.

Does this work with existing React and Next.js projects, or only new ones?

This skill applies to both new and existing modern frontend projects using React, Next.js, and TypeScript. It accepts a target path to validate and analyze your project, making it suitable for feature development, refactoring, and performance optimization on established codebases.