（10309期）senior-frontend – React 全栈项目脚手架与性能优化专家

React 全栈项目脚手架与性能优化专家 基于 Python 的 React/Next.js 工程化脚手架工具，一键生成项目结构、组件模板及优化建议，显著提升前端开发效率与代码规范性。 使用说明 Senior Frontend 是一款专注于 React 与 Next.js 生态的工程化开发工具，通过 Python 脚本提供项目脚手架、组件生成、包体积分析等全流程支持。该 Skill 旨在帮助开发者快速搭建符合最佳实践的前端项目结构，生成标准化的 TypeScript 组件代码，并提供性能优化建议。 核心用法涵盖三大模块：首先是项目脚手架功能，支持通过命令行一键创建基于 Next.js 14+（App Router）或 React + Vite 的项目模板，并可选配 NextAuth.js、React Query、React Hook Form 等常用功能模块；其次是组件生成器，可自动创建客户端组件、服务端组件或自定义 Hook，并可选生成对应的测试文件与 Storybook 故事文件；最后是包分析工具，能够扫描 package.json 识别 moment、lodash 等重型依赖，提供体积优化建议与替代方案。 该 Skill 的显著优点在于其工程化思维与标准化输出。所有生成的代码均遵循 TypeScript 严格类型检查、Tailwind CSS 原子化样式规范以及现代 React 设计模式（如 Compound Components、Render Props）。特别值得一提的是其 --dry-run 预览模式，允许开发者在实际创建文件前审查操作内容，避免误操作。此外，内置的 Bundle Analyzer 能直观展示项目依赖健康度评分（A-F 等级），帮助团队持续优化构建产物体积。 然而，该 Skill 也存在一定局限性。首先，其功能高度聚焦于 React/Next.js 技术栈，对 Vue、Angular 等其他前端框架无支持。其次，作为 T3 来源（个人开发者维护）的工具，虽然代码本身通过安全审计，但长期维护稳定性与社区支持力度不及官方 CLI 工具（如 create-next-app）。此外，工具依赖本地 Python 运行环境，对于纯前端开发者而言可能需要额外配置 Python 环境。 该 Skill 特别适合以下群体：需要频繁初始化项目的前端技术负责人、希望统一团队代码规范的 React 开发者、以及希望快速上手 Next.js 最佳实践的全栈工程师。对于初学者而言，生成的代码示例也是学习现代 React 模式（如 Server Components、Suspense Streaming）的优质参考。 使用过程中的常规风险主要包括文件系统操作相关事项。尽管工具提供了 dry-run 模式，但在实际执行时若指定已存在目录，仍可能覆盖现有文件（虽然脚本会检查目录存在性，但用户需谨慎确认）。另外，生成的项目模板依赖 npm/yarn 等包管理器下载大量依赖，在网络不稳定环境下可能安装失败。最后，作为代码生成工具，其输出的组件模板仍需开发者根据实际业务逻辑进行定制修改，不应被视为无需审查的"黑盒"代码。 原始说明 Frontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, analyzing bundle sizes, scaffolding frontend projects, implementing accessibility, or reviewing frontend code quality.