senior-frontend

高级前端

面向 React/Next.js 应用的前端开发模式、性能优化和自动化工具。搭建项目脚手架、生成组件和 Hook、分析包体积，并应用内置无障碍和测试支持的 React/Next.js 模式。

核心能力

• 项目脚手架 — 生成 Next.js 14+（App Router）或 React+Vite 项目，支持 TypeScript、Tailwind，以及可选的身份验证/API/表单/测试/Storybook 功能。
• 组件生成 — 生成客户端/服务端组件、自定义 Hook，并按照既定模式创建测试和 Storybook 故事文件。
• 包体积分析 — 静态扫描 package.json 和导入内容，评估包体健康状况，标记体积较大的依赖并提供更轻量的替代方案。
• React 模式 — 复合组件、自定义 Hook、渲染属性，以及可复用的状态共享模式。
• Next.js 优化 — 服务端与客户端组件、图片优化，以及使用 Suspense 的并行/流式数据获取。
• 无障碍与测试 — 语义化 HTML、ARIA、键盘导航、焦点管理，以及 React Testing Library 组件/无障碍测试。

适用场景

• 启动需要最佳实践基础的新 React/Next.js 项目。
• 为现有应用添加组件、Hook 或测试/故事脚手架。
• 优化包体积或诊断体积较大的依赖。
• 实现无障碍、高性能的服务端/客户端组件架构。
• 根据 React/TypeScript/无障碍最佳实践审查前端代码。

请先明确

在搭建脚手架或生成内容之前，请先确定以下输入。如果某项缺失或含糊，且会影响结果，请询问；如果不会影响结果，则使用合理的默认值并说明所用默认值。

• 模板： Next.js（App Router）还是 React+Vite（--template；会生成不同的项目结构）。
• 功能： 身份验证 / API / 表单 / 测试 / Storybook（--features；决定生成哪些内容）。
• 生成目标： 新项目，还是现有应用中的组件/Hook（决定使用 frontend_scaffolder 还是 component_generator）。

只询问对本次请求最重要的两三项输入，不要问遍整个列表。如果用户希望立即得到结果，请直接生成，并在开头说明你的假设。

工具

工具	用途	命令
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 和导入内容评估包体健康状况，并标记体积较大的依赖	python scripts/bundle_analyzer.py /path/to/project --verbose

参考资料

加载与任务匹配的参考资料 — 保持此文件精简，按需查阅详细内容：

• references/tooling-guide.md — 完整的脚手架搭建、组件生成和 Bundle 分析工作流、选项表、生成的结构、各脚本标志参考、故障排除表和成功标准。运行工具或配置 CLI 标志时阅读。
• references/code-patterns.md — React 内联模式（复合组件、Hooks、渲染属性）、Next.js 优化（服务端/客户端、图像、数据获取）、无障碍功能与测试代码片段，以及 Next.js 配置 / Tailwind / TypeScript 快速参考。编写组件或优化页面时阅读。
• references/react_patterns.md — 深入的 React 模式库。设计组件 / 状态架构时阅读。
• references/nextjs_optimization_guide.md — 深入的 Next.js 性能与渲染指南。调优 Next.js 应用时阅读。
• references/frontend_best_practices.md — 无障碍功能、测试和前端通用最佳实践指南。发布组件前阅读。

范围与限制

此技能涵盖的内容：

• 使用 TypeScript 和 Tailwind CSS 搭建 React 和 Next.js 项目脚手架
• 遵循既定模式生成组件、Hook、测试和 Storybook 故事
• 基于 package.json 依赖检查和导入模式扫描进行静态 Bundle 分析
• 针对服务端组件、图像优化、数据获取和无障碍功能的前端最佳实践

此技能不涵盖的内容：

• 后端 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 响应类型导入到此技能生成的前端 types/ 目录中
senior-qa	生成的测试文件（--with-test）采用与 QA 技能测试策略相同的 Testing Library 约定	组件测试文件交由 QA 技能，以扩展集成测试和 E2E 测试覆盖范围
senior-devops	Bundle 分析器的输出为构建流水线优化决策提供参考	Bundle 健康评分和依赖警告传入由 DevOps 技能配置的 CI 质量门禁
senior-secops	依赖分析可识别需要进行安全审计的软件包	bundle_analyzer.py 发出的重型 / 过时依赖警告会触发安全审查工作流
code-reviewer	生成的组件遵循代码审查技能所验证的模式	代码审查员会根据此技能参考资料中定义的 React/TypeScript 最佳实践检查生成的组件