senior-frontend

# Senior Frontend Frontend development patterns, performance optimization, and automation tools for React/Next.js applications. ## Project Scaffolding Generate a new Next.js or React project with TypeScript, Tailwind CSS, and best practice configurations. ### Scaffolder Options | Option | Description | |--------|-------------| | `--template nextjs` | Next.js 14+ with App Router and Server Components | | `--template react` | React + Vite with TypeScript | | `--features auth` | Add NextAuth.js authentication | | `--features api` | Add React Query + API client | | `--features forms` | Add React Hook Form + Zod validation | | `--features testing` | Add Vitest + Testing Library | ### 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. ### Generator Options | Option | Description | |--------|-------------| | `--type client` | Client component with 'use client' (default) | | `--typ...