Senior Frontend
Frontend development patterns, performance optimization, and automation tools for React/Next.js applications.
Table of Contents
Project Scaffolding
Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations.
Workflow: Create New Frontend Project
-
Run the scaffolder with your project name and template:
python scripts/frontend_scaffolder.py my-app --template nextjs
-
Add optional features (auth, api, forms, testing, storybook):
python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api
-
Navigate to the project and install dependencies:
cd my-app && npm install
-
Start the development server:
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
-
Generate a client component:
python scripts/component_generator.py Button --dir src/components/ui
-
Generate a server component:
python scripts/component_generator.py ProductCard --type server
-
Generate with test and story files:
python scripts/component_generator.py UserProfile --with-test --with-story
-
Generate a custom hook:
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
-
Run the analyzer on your project:
python scripts/bundle_analyzer.py /path/to/project
-
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
-
Apply the recommended fixes by replacing heavy dependencies.
-
Re-run with verbose mode to check import patterns:
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;
<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;
}
const debouncedSearch = useDebounce(searchTerm, 300);
Render Props
Share rendering logic:
function DataFetcher({ url, render }) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
