Senior Frontend 是一套面向 React/Next.js 应用的前端开发技能，聚焦开发模式、性能优化与自动化工具，帮助脚手架项目、生成组件与 Hook、分析打包体积，并在 React/Next.js 实践中内置无障碍与测试支持。
用途 适用于以下场景：启动需要最佳实践基线的新 React/Next.js 项目；为现有应用添加组件、Hook 或测试/故事脚手架；优化打包体积或诊断过重依赖；实现可访问且高性能的 Server/Client 组件架构；按 React/TypeScript/无障碍最佳实践审查前端代码。
主要能力
- 项目脚手架：生成 Next.js 14+（App Router）或 React+Vite 项目，包含 TypeScript、Tailwind，并可选认证、API、表单、测试、Storybook 等功能。
- 组件生成：生成客户端/服务端组件、自定义 Hook，并附带测试与 Storybook 故事文件，遵循既定模式。
- 打包分析：基于 package.json 与 import 的静态扫描，评估打包健康度，标记过重依赖并给出更轻量替代方案。
- React 模式：复合组件、自定义 Hook、render props，以及可复用的状态共享模式。
- Next.js 优化：Server 与 Client 组件、图片优化、使用 Suspense 的并行/流式数据获取。
- 无障碍与测试：语义化 HTML、ARIA、键盘导航、焦点管理，以及 React Testing Library 的组件与无障碍测试。
使用方式 技能提供三个脚本工具：
- frontend_scaffolder.py：脚手架生成 Next.js 或 React 项目，含 TypeScript + Tailwind 及可选功能。命令示例：python scripts/frontend_scaffolder.py my-app --template nextjs --features auth,api
- component_generator.py：生成组件/Hook，可选测试与 Storybook 故事。命令示例：python scripts/component_generator.py ProductCard --type client --with-test --with-story
- bundle_analyzer.py：从 package.json 与 import 评估打包健康度并标记过重依赖。命令示例：python scripts/bundle_analyzer.py /path/to/project --verbose
在脚手架或生成前，需先确认关键输入，若未知或模糊应询问而非假设：模板（Next.js App Router 还是 React+Vite，会产生不同项目结构）、功能（auth/api/forms/testing/storybook，决定生成内容）、生成目标（新项目还是现有应用中的组件/Hook，决定使用 frontend_scaffolder 还是 component_generator）。若用户表示“直接起草”，则继续并在产物顶部列出假设。
参考资料按需加载：references/tooling-guide.md（完整脚手架/组件生成/打包分析工作流、选项表、生成结构、各脚本标志参考、故障排查表与成功标准）；references/code-patterns.md（内联 React 模式、Next.js 优化、无障碍与测试片段、Next.js 配置/Tailwind/TypeScript 快速参考）；references/react_patterns.md（深度 React 模式库）；references/nextjs_optimization_guide.md（深度 Next.js 性能与渲染指南）；references/frontend_best_practices.md（无障碍、测试与通用前端最佳实践）。
适用场景 新建 React/Next.js 项目基线、为现有应用添加组件与测试、优化打包体积、实现可访问的高性能 Server/Client 组件架构、按最佳实践审查前端代码。
限制 本技能覆盖 React 与 Next.js 项目脚手架（TypeScript、Tailwind）、组件/Hook/测试/Storybook 生成、基于 package.json 与 import 扫描的静态打包分析，以及 Server 组件、图片优化、数据获取与无障碍等前端最佳实践。不覆盖：后端 API 开发、数据库模式设计或服务器基础设施（见 senior-backend 与 senior-fullstack）；Cypress 或 Playwright 端到端测试（见 senior-qa）；CI/CD 流水线配置与 Docker 部署（见 senior-devops）；安全漏洞扫描与渗透测试（见 senior-secops 与 senior-security）。
集成点
- senior-fullstack：脚手架生成的前端项目可接入全栈项目脚手架以设置 API 层；前端项目结构输入 project_scaffolder.py，添加后端、Docker 与 CI/CD 层。
- senior-backend：消费 API 数据的组件遵循后端技能的 REST/GraphQL 约定；后端 API 响应类型导入到本技能生成的 frontend types/ 目录。
- senior-qa：生成的测试文件（--with-test）使用与 QA 技能测试策略相同的 Testing Library 约定；组件测试文件交由 QA 技能扩展集成与 E2E 覆盖。
- senior-devops：打包分析器输出为构建流水线优化决策提供依据；打包健康度评分与依赖警告输入 DevOps 技能配置的 CI 质量门禁。
- senior-secops：依赖分析识别需要安全审计的包；bundle_analyzer.py 的过重/过时依赖警告触发安全审查工作流。
- code-reviewer：生成的组件遵循代码审查技能验证的模式；代码审查者按本技能参考资料中定义的 React/TypeScript 最佳实践检查生成的组件。