senior-frontend

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](#project-scaffolding)
• [Component Generation](#component-generation)
• [Bundle Analysis](#bundle-analysis)
• [React Patterns](#react-patterns)
• [Next.js Optimization](#nextjs-optimization)
• [Accessibility and Testing](#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

| 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 | | --dry-run | Preview files without creating them |

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

| 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 | | --flat | Create in output dir without subdirectory | | --dry-run | Preview without creating files |

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.

1. Re-run with verbose mode to check import patterns:

``bash python scripts/bundle_analyzer.py . --verbose ``

Bundle Score Interpretation

| Score | Grade | Action | | ------ | ----- | ------------------------------ | | 90-100 | A | Bundle is well-optimized | | 80-89 | B | Minor optimizations available | | 70-79 | C | Replace heavy dependencies | | 60-69 | D | Multiple issues need attention | | 0-59 | F | Critical bundle size problems |

Heavy Dependencies Detected

The analyzer identifies these common heavy packages:

| Package | Size | Alternative | | ------------- | ----- | ------------------------------ | | moment | 290KB | date-fns (12KB) or dayjs (2KB) | | lodash | 71KB | lodash-es with tree-shaking | | axios | 14KB | Native fetch or ky (3KB) | | jquery | 87KB | Native DOM APIs | | @mui/material | Large | shadcn/ui or Radix UI |

React Patterns

Reference: references/react_patterns.md

Compound Components

Share state between related components:

const Tabs = ({ children }) => {
  const [active, setActive] = useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
};

Tabs.List = TabList;
Tabs.Panel = TabPanel;

// Usage
<Tabs>
  <Tabs.List>
    <Tabs.Tab>One</Tabs.Tab>
    <Tabs.Tab>Two</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel>Content 1</Tabs.Panel>
  <Tabs.Panel>Content 2</Tabs.Panel>
</Tabs>;

Custom Hooks

Extract reusable logic:

function useDebounce<T>(value: T, delay = 500): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

// Usage
const debouncedSearch = useDebounce(searchTerm, 300);

Render Props

Share rendering logic:

function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((r) => r.json())
      .then(setData)
      .finally(() => setLoading(false));
  }, [url]);

  return render({ data, loading });
}

// Usage
<DataFetcher
  url="/api/users"
  render={({ data, loading }) =>
    loading ? <Spinner /> : <UserList users={data} />
  }
/>;

Next.js Optimization

Reference: references/nextjs_optimization_guide.md

Server vs Client Components

Use Server Components by default. Add 'use client' only when you need:

• Event handlers (onClick, onChange)
• State (useState, useReducer)
• Effects (useEffect)
• Browser APIs

// Server Component (default) - no 'use client'
async function ProductPage({ params }) {
  const product = await getProduct(params.id); // Server-side fetch

  return (
    <div>
      <h1>{product.name}</h1>
      <AddToCartButton produ