senior-frontend

name	senior-frontend
title	Senior Frontend Skill Package
description	Comprehensive frontend development skill for building modern, performant web applications using React, Next.js, 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.
domain	engineering
subdomain	frontend-development
dependencies	{"scripts":[],"references":[],"assets":[]}
compatibility	{"python-version":"3.8+","platforms":["macos","linux","windows"]}
tech-stack	["React","Next.js","TypeScript","Tailwind CSS","JavaScript","HTML5","CSS3","Webpack","ESLint","Jest"]
examples	[{"title":"Example Usage","input":"TODO: Add example input for senior-frontend","output":"TODO: Add expected output"}]
tags	["analysis","design","development","engineering","frontend","optimization","performance","senior"]

Senior Frontend

Expert frontend development skill with comprehensive tools for building modern, performant, and accessible web applications using React, Next.js, and the latest frontend technologies.

Overview

This skill provides production-ready frontend development capabilities through three Python automation tools and extensive reference documentation. Whether building React components, optimizing Next.js applications, implementing state management, or improving performance, this skill ensures best practices and scalable architecture.

What This Skill Provides:

• Component generation with TypeScript, tests, and stories
• Bundle analysis and optimization recommendations
• Project scaffolding for Next.js and React applications
• Component architecture patterns (Atomic Design, Compound Components)
• State management solutions (Zustand, Context + useReducer)
• Performance optimization techniques (code splitting, memoization)

Use this skill when:

• Developing React/Next.js applications
• Building reusable component libraries
• Optimizing frontend performance and bundle size
• Implementing responsive and accessible UIs
• Managing application state
• Testing and documenting components

Quick Start

Component Generation

# Generate component with tests and stories
python scripts/component_generator.py Button --complete

# Generate compound component
python scripts/component_generator.py Select --type compound --complete

# Generate custom hook
python scripts/component_generator.py useDebounce --type hook --tests

Bundle Analysis

# Analyze Next.js build
npm run build
python scripts/bundle_analyzer.py .next/ --verbose

# Generate HTML report
python scripts/bundle_analyzer.py .next/ --output html --save report.html

Project Scaffolding

# Create Next.js project
python scripts/frontend_scaffolder.py my-app --framework nextjs --complete

# Start development
cd my-app && npm install && npm run dev

Core Workflows

1. Building Component Library