Senior Frontend

What This Skill Does

This skill provides frontend development patterns, performance optimization techniques, and automation tools for React/Next.js applications. It helps scaffold new projects, generate components, and analyze bundle sizes. It's designed for frontend developers who need to build and optimize React/Next.js applications.

When to Use

• Scaffold a new Next.js project.
• Generate a React component.
• Analyze the bundle size of a frontend application.
• Implement a React pattern.
• Optimize a Next.js application.
• Add accessibility features to a component.

Key Features

• Scaffolds new Next.js and React projects with TypeScript and Tailwind CSS.
• Generates components with best practice configurations.
• Analyzes bundle sizes to identify optimization opportunities.
• Provides guidance on React patterns.
• Offers Next.js optimization techniques.
• Supports accessibility and testing best practices.

Manual Installation

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

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

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

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

Heavy Dependencies Detected

The analyzer identifies these common heavy packages:

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 productId={product.id} /> {/ Client component /} </div> ); }

// Client Component 'use client'; function AddToCartButton({ productId }) { const [adding, setAdding] = useState(false); return <button onClick={() => addToCart(productId)}>Add</button>; }

Image Optimization

import Image from 'next/image';

// Above the fold - load immediately <Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

// Responsive image with fill

<div className="relative aspect-video"> <Image src="/product.jpg" alt="Product" fill sizes="(max-