Generate and Optimize React/Next.js Frontend Projects

Frontend development patterns, performance optimization, and automation tools for React/Next.js applications, covering project scaffolding, component generation, bundle analysis, advanced React patterns, Next.js optimization, and accessibility/testing.

Use this when scaffolding a new React or Next.js project with TypeScript and Tailwind CSS, generating components or custom hooks, analyzing and optimizing bundle sizes, implementing or reviewing patterns like Compound Components or Render Props, or ensuring accessibility compliance and testing coverage.

Not needed for backend-only work, or for frontend stacks outside React/Next.js where these scripts and patterns don't apply.

scripts/frontend_scaffolder.py <name> --template nextjs|react generates a project - Next.js 14+ with App Router and Server Components, or React + Vite with TypeScript - with optional --features auth,api,forms,testing,storybook and a --dry-run preview, producing a structured layout (app/, components/ui, components/layout, hooks/, lib/, types/). scripts/component_generator.py <Name> generates client (default) or server components, or custom hooks, with --with-test/--with-story flags for accompanying test and Storybook files, --flat to skip the subdirectory, and --dry-run to preview. scripts/bundle_analyzer.py <path> scores bundle health 0-100 with an A-F grade (90-100 well-optimized, 70-79 replace heavy dependencies, 0-59 critical problems) and flags heavy dependencies with lighter alternatives: moment (290KB) for date-fns/dayjs, lodash (71KB) for lodash-es, axios (14KB) for native fetch or ky, jquery (87KB) for native DOM APIs, and @mui/material for shadcn/ui or Radix UI; a --verbose re-run checks actual import patterns after fixes are applied.

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

Documents React patterns - Compound Components sharing state via context, custom hooks like a generic useDebounce, and Render Props for shared rendering logic - and Next.js optimization: Server Components by default, adding 'use client' only for event handlers, state, effects, or browser APIs; next/image with priority for above-the-fold images and fill/sizes for responsive images; and parallel data fetching with Promise.all alongside streaming with Suspense. A quick-reference section covers next.config.js image and experimental settings, Tailwind's cn() utility for conditional classes, and generic TypeScript component prop patterns. Accessibility guidance covers semantic HTML elements (<button>, <nav>, <main>), full keyboard-navigability of interactive elements, ARIA labels for icons and complex widgets, a minimum 4.5:1 color-contrast ratio for normal text, and visible focus indicators; testing guidance includes ARIA-attribute assertions, such as checking a dialog has aria-labelledby. Detailed references live in references/react_patterns.md, references/nextjs_optimization_guide.md, and references/frontend_best_practices.md.

Frontend engineers building React or Next.js applications who want scaffolding and component-generation scripts, bundle-size diagnostics with concrete lighter alternatives, and reference patterns for Server/Client Components, advanced React composition, and accessibility testing - rather than assembling all of this tooling and guidance by hand from scratch.