SkillRouter

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 等包管理器下载大量依赖，在网络不稳定环境下可能安装失败。最后，作为代码生成工具，其输出的组件模板仍需开发者根据实际业务逻辑进行定制修改，不应被视为无需审查的"黑盒"代码。