Senior Frontend

高级前端开发 前端开发模式、性能优化和自动化工具，用于React/Next.js应用。

目录 项目脚手架 组件生成 包分析 React模式 Next.js优化 无障碍和测试

项目脚手架 使用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） my-app/ ├── app/ │ ├── layout.tsx # 根布局，包含字体 │ ├── page.tsx # 首页 │ ├── globals.css # Tailwind + CSS变量 │ └── api/health/route.ts ├── components/ │ ├── ui/ # 按钮、输入框、卡片 │ └── layout/ # 标题、页脚、侧边栏 ├── hooks/ # useDebounce、useLocalStorage ├── lib/ # utils（cn）、常量 ├── types/ # TypeScript接口 ├── 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 生成自定义钩子： python scripts/component_generator.py FormValidation --type hook

生成器选项 选项 描述 --type client 客户端组件，具有“use client”（默认） --type server 异步服务器组件 --type hook 自定义React钩子 --with-test 包含测试文件 --with-story 包含Storybook故事 --flat 在输出目录中创建，而不创建子目录 --dry-run 预览而不创建文件

生成组件示例 'use client'; import { useState } from 'react'; import { cn } from '@/lib/utils'; interface ButtonProps { className?: string; children?: React.ReactNode; } export function Button({ className, children }: ButtonProps) { return (

包分析 分析package.json和项目结构以优化包大小。

工作流程： 优化包大小 运行分析器： python scripts/bundle_analyzer.py /path/to/project 查看健康评分和问题： 包健康评分：75/100（C） 重依赖项：moment（290KB） 替代项：date-fns（12KB）或dayjs（2KB） lodash（71KB） 替代项：lodash-es，具有树抖动 应用推荐的修复项，替换重依赖项。 重新运行，使用详细模式检查导入模式： python scripts/bundle_analyzer.py . --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，具有树抖动 axios 14KB 原生fetch或ky（3KB） jquery 87KB 原生DOM API @mui/material 大 shadcn/ui或Radix UI

React模式 参考：references/react_patterns.md

复合组件 在相关组件之间共享状态： const Tabs = ({ children }) => { const [active, setActive] = useState(0); return ( {children} ); }; Tabs.List = TabList; Tabs.Panel = TabPanel; // 使用 One Two Content 1 Content 2

自定义钩子 提取可重用的逻辑： function useDebounce(value: T, delay = 500): T { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const timer = setTimeout(() => setDebouncedValue(value), delay); return () => clearTimeout(timer); }, [value, delay]); return debouncedValue; } // 使用 const debouncedSearch