Senior Frontend

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.

Project Scaffolding

Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.

Scaffolder Options

Option	Description
--template nextjs	Next.js 14+ with App Router and Server Components
--template react	React + Vite with TypeScript
--features auth	Add NextAuth.js authentication
--features api	Add React Query + API client
--features forms	Add React Hook Form + Zod validation
--features testing	Add Vitest + Testing Library

Generated Structure (Next.js)

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

Component Generation

Generate React components with TypeScript, tests, and Storybook stories.

Generator Options

Option	Description
--type client	Client component with 'use client' (default)
--type server	Async server component
--type hook	Custom React hook
--with-test	Include test file
--with-story	Include Storybook story

Bundle Analysis

Analyze package.json and project structure for bundle optimization opportunities.

Heavy Dependencies to Replace