senior-frontend

Run the frontend_scaffolder.py script with your project name and the nextjs template flag. It generates the App Router structure, UI components, hooks, Tailwind config, and package.json. Add --features auth,api to include NextAuth and React Query setup.

Use component_generator.py with the component name and the --with-test and --with-story flags. It creates a TypeScript component file, a Testing Library test file, and a Storybook story, plus an index.ts barrel export.

Replace moment (290KB) with date-fns (12KB) or dayjs (2KB), and replace lodash with lodash-es using tree-shaking or individual imports like lodash/get. The bundle analyzer script detects these packages and suggests alternatives automatically.

The analyzer works with any project containing a package.json, including Vite-based React apps. Next.js-specific checks like next.config.js suggestions are skipped gracefully when no config file is found.

Use Server Components by default for data-heavy, non-interactive content. Add 'use client' only when you need event handlers, useState, useEffect, or browser APIs. The references guide covers mixing both patterns in one page.

The scaffolder returns an error if the target project directory already exists to prevent overwriting files. Use --dry-run first to preview the generated structure, or choose a different project name or output directory.