Senior Frontend 是一个前端开发技能，聚焦 React/Next.js 应用的开发模式、性能优化与自动化工具。其内容涵盖项目脚手架、组件生成、打包体积分析、React 模式、Next.js 优化、无障碍与测试等主题。
一、用途与适用时机 该技能适用于以下场景：使用 TypeScript 与 Tailwind CSS 搭建新的 React 或 Next.js 项目；生成新组件或自定义 Hook；分析并优化前端应用的打包体积；实现或审查 Compound Components、Render Props 等高级 React 模式；确保无障碍合规并实施稳健的测试策略。技能说明中提示：仅在任务明确匹配上述范围时使用，不应将输出视为环境特定验证、测试或专家评审的替代；若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。
二、项目脚手架 可通过脚手架脚本生成带 TypeScript、Tailwind CSS 与最佳实践配置的 Next.js 或 React 项目。工作流为：运行脚手架并指定项目名与模板，例如 python scripts/frontend_scaffolder.py my-app --template nextjs；可添加可选功能（auth、api、forms、testing、storybook），例如 python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api；随后进入项目目录并安装依赖（cd my-app && npm install），再启动开发服务器（npm run dev）。 脚手架选项包括：--template nextjs（Next.js 14+，含 App Router 与 Server Components）、--template react（React + Vite 与 TypeScript）、--features auth（添加 NextAuth.js 认证）、--features api（添加 React Query + API 客户端）、--features forms（添加 React Hook Form + Zod 校验）、--features testing（添加 Vitest + Testing Library）、--dry-run（预览文件而不创建）。生成的 Next.js 结构包含 app/（layout.tsx、page.tsx、globals.css、api/health/route.ts）、components/（ui/、layout/）、hooks/、lib/、types/、tailwind.config.ts、next.config.js 与 package.json。
三、组件生成 可生成带 TypeScript、测试与 Storybook 故事的 React 组件。工作流示例：生成客户端组件 python scripts/component_generator.py Button --dir src/components/ui；生成服务端组件 python scripts/component_generator.py ProductCard --type server；生成带测试与故事文件 python scripts/component_generator.py UserProfile --with-test --with-story；生成自定义 Hook python scripts/component_generator.py FormValidation --type hook。 生成器选项包括：--type client（带 'use client' 的客户端组件，默认）、--type server（异步服务端组件）、--type hook（自定义 React Hook）、--with-test（包含测试文件）、--with-story（包含 Storybook 故事）、--flat（在输出目录中创建而不建子目录）、--dry-run（预览而不创建文件）。
四、打包体积分析 可分析 package.json 与项目结构，寻找打包优化机会。工作流为：运行分析器 python scripts/bundle_analyzer.py /path/to/project；查看健康评分与问题（例如 Bundle Health Score: 75/100 (C)，并列出重型依赖如 moment 290KB、lodash 71KB 及替代建议）；按建议替换重型依赖；使用 --verbose 重新运行以检查导入模式。评分含义：90-100 为 A（打包已良好优化）、80-89 为 B（有少量优化空间）、70-79 为 C（替换重型依赖）、60-69 为 D（多个问题需处理）、0-59 为 F（严重的打包体积问题）。分析器识别的常见重型包包括 moment（290KB，替代 date-fns 12KB 或 dayjs 2KB）、lodash（71KB，替代 lodash-es 配合 tree-shaking）、axios（14KB，替代原生 fetch 或 ky 3KB）、jquery（87KB，替代原生 DOM API）、@mui/material（体积大，替代 shadcn/ui 或 Radix UI）。
五、React 模式 参考 references/react_patterns.md。包括 Compound Components（在相关组件间共享状态，如 Tabs 示例）、自定义 Hook（抽取可复用逻辑，如 useDebounce 示例）、Render Props（共享渲染逻辑，如 DataFetcher 示例）。
六、Next.js 优化 参考 references/nextjs_optimization_guide.md。默认使用 Server Components，仅在需要事件处理器、状态、副作用或浏览器 API 时添加 'use client'。图像优化使用 next/image，首屏图像加 priority，响应式图像使用 fill 与 sizes。数据获取模式包括并行获取（Promise.all）与使用 Suspense 的流式渲染。
七、无障碍与测试 参考 references/frontend_best_practices.md。无障碍清单包括：语义化 HTML、键盘导航、ARIA 标签、颜色对比度（普通文本至少 4.5:1）、焦点指示器。测试策略示例使用 React Testing Library 与 user-event 进行组件测试与无障碍测试。
八、快速参考与资源 包含常见 Next.js 配置（images.remotePatterns、formats、experimental.optimizePackageImports）、Tailwind CSS 工具（cn() 条件类名）、TypeScript 模式（带 children 的 Props、泛型组件）。资源文档包括 React 模式、Next.js 优化与最佳实践三份参考文件。
九、限制 技能说明明确：仅在任务明确匹配上述范围时使用；不应将输出视为环境特定验证、测试或专家评审的替代；若缺少必要输入、权限、安全边界或成功标准，应停止并请求澄清。关于收费、价格、平台支持范围等信息，资料中暂未提供。