Senior Frontend

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

When to Use

• Use when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS.
• Use when generating new components or custom hooks.
• Use when analyzing and optimizing bundle sizes for frontend applications.
• Use to implement or review advanced React patterns like Compound Components or Render Props.
• Use to ensure accessibility compliance and implement robust testing strategies.

Table of Contents

• Project Scaffolding
• Component Generation
• Bundle Analysis
• React Patterns
• Next.js Optimization
• Accessibility and Testing

Project Scaffolding

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

Workflow: Create New Frontend Project

1. Run the scaffolder with your project name and template:

bash python scripts/frontend_scaffolder.py my-app --template nextjs

1. Add optional features (auth, api, forms, testing, storybook):

bash python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api

1. Navigate to the project and install dependencies:

bash cd my-app && npm install

1. Start the development server: bash npm run dev

Scaffolder Options

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.

Workflow: Create a New Component

1. Generate a client component:

bash python scripts/component_generator.py Button --dir src/components/ui

1. Generate a server component:

bash python scripts/component_generator.py ProductCard --type server

1. Generate with test and story files:

bash python scripts/component_generator.py UserProfile --with-test --with-story

1. Generate a custom hook: bash python scripts/component_generator.py FormValidation --type hook

Generator Options

Generated Component Example

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

interface ButtonProps {
  className?: string;
  children?: React.ReactNode;
}

export function Button({ className, children }: ButtonProps) {
  return <div className={cn("", className)}>{children}</div>;
}

Bundle Analysis

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

Workflow: Optimize Bundle Size

1. Run the analyzer on your project:

bash python scripts/bundle_analyzer.py /path/to/project

1. Review the health score and issues:

``` Bundle Health Score: 75/100 (C)

HEAVY DEPENDENCIES: moment (290KB) Alternative: date-fns (12KB) or dayjs (2KB)

 lodash (71KB)
   Alternative: lodash-es with tree-shaking

```

1. Apply the recommended fixes by replacing heavy dependencies.

2. Re-run with verbose mode to check import