What problem does it solve? Frontend developers repeatedly write the same boilerplate for new projects, components, and hooks, and often ship bloated bundles because heavy dependencies and poor import patterns go unnoticed. This Skill automates project scaffolding, component generation, and bundle analysis for React/Next.js codebases. ## Core Features & Use Cases - Project Scaffolding: Generate complete Next.js 14+ (App Router) or React + Vite projects with TypeScript, Tailwind CSS, and optional features like auth, React Query, forms, testing, and Storybook. - Component Generation: Create client components, server components, or custom hooks with optional test files and Storybook stories following TypeScript best practices. - Bundle Analysis: Score a project's bundle health (0-100), detect heavy dependencies like moment or lodash, flag dev packages in production dependencies, and suggest lighter alternatives. - Use Case: Run the bundle analyzer on an existing Next.js app to discover that moment.js adds 290KB, then scaffold a replacement date utility and regenerate components using the lighter dayjs alternative. ## Quick Start Ask the assistant to scaffold a new Next.js project named my-app with authentication and testing features, then analyze its bundle health.
