What problem does it solve? Frontend teams waste time on inconsistent project setup, bloated bundles, and framework decisions made without measurable targets. This Skill standardizes React/Next.js scaffolding, component generation, and bundle analysis while forcing explicit performance budgets and accessibility targets before any recommendation. ## Core Features & Use Cases - Project Scaffolding: Generate complete Next.js 14+ App Router or React+Vite projects with TypeScript, Tailwind CSS, and optional features (auth, API client, forms, testing, Storybook) via frontend_scaffolder.py. - Component Generation: Create client/server components, custom hooks, tests, and Storybook stories with component_generator.py. - Bundle Analysis: Score dependency health (0-100), flag heavy packages like moment or lodash with lighter alternatives, and detect dev dependencies leaking into production via bundle_analyzer.py. - Decision Engine: Match constraints (device, LCP target, SEO, team size) against built-in profiles to recommend a stack with bundle budgets and CI gates using frontend_decision_engine.py. - Use Case: Before starting a new SaaS dashboard, run the decision engine with your device and LCP constraints, scaffold the recommended Next.js profile, then audit the bundle as dependencies are added. ## Quick Start Ask the assistant to scaffold a new Next.js project with authentication and then analyze its bundle health using the senior-frontend skill.
