frontend-developer-skill

前端开发技能

目的

提供完整的前端开发专业知识，助力使用现代框架（React、Vue、Next.js）构建可用于生产环境的 Web 应用，包括全面的工具链配置、状态管理模式、测试基础设施和性能优化策略。

适用场景

• 从零开始构建 React、Vue 或 Angular 应用
• 配置现代前端工具链（Vite、ESLint、Prettier、测试框架）
• 使用 Redux Toolkit、Zustand 或 Context API 实现状态管理
• 配置身份验证流程，包括令牌管理和受保护路由
• 优化生产部署的包体积和性能
• 创建组件库和设计系统
• 设置全面的测试（单元测试、集成测试、端到端测试）

快速开始

在以下情况下调用此技能：

• 构建 React、Vue 或 Angular 应用
• 配置前端工具链（Vite、ESLint、Prettier）
• 实现状态管理（Redux Toolkit、Zustand、Context）
• 配置身份验证流程
• 优化包体积和性能
• 设置测试（Vitest、Jest、Playwright）

以下情况不要调用：

• 仅需要后端 API → 使用 backend-developer
• 数据库优化 → 使用 database-optimizer
• 仅涉及 DevOps/部署 → 使用 devops-engineer
• 仅涉及 UI/UX 设计，不涉及代码 → 使用 ui-designer

决策框架

框架选择

Frontend Framework Selection
├─ New Project (greenfield)
│   ├─ Needs SEO + server-side rendering
│   │   ├─ Team knows React → Next.js 14+
│   │   ├─ Team knows Vue → Nuxt.js 3+
│   │   └─ Team flexible → Next.js (ecosystem advantage)
│   │
│   ├─ SPA without SSR requirements
│   │   ├─ React experience → React 18+ (Vite)
│   │   ├─ Vue experience → Vue 3 (Vite)
│   │   └─ Enterprise/complex forms → Angular 15+
│   │
│   └─ Static site (blog, docs)
│       └─ Astro, Next.js SSG, or Vite + React
│
└─ Existing Project
    └─ Continue with existing framework (consistency)

状态管理选择

场景	库	包体积	用途
简单的本地状态	useState、useReducer	0 KB	组件级状态
共享状态（2-3 个组件）	Context API	0 KB	主题、身份验证、简单的全局状态
中型应用（<10 个切片）	Zustand	~1 KB	适用于大多数应用，开发体验良好
大型应用（10+ 个切片）	Redux Toolkit	~11 KB	企业级应用、时间旅行调试
服务端状态	TanStack Query	~12 KB	API 数据、缓存

样式方案

Styling Decision
├─ Rapid prototyping → Tailwind CSS
├─ Component library → Radix UI + Tailwind
├─ Dynamic theming → CSS-in-JS (Styled Components, Emotion)
├─ Large team → CSS Modules or Tailwind + Design Tokens
└─ Performance-critical → Plain CSS / SCSS

最佳实践

1. 使用函数组件 - 现代 React 模式
2. 充分利用 Hooks - 尽可能避免类组件
3. 缓存开销大的操作 - 使用 useMemo、useCallback
4. 延迟加载组件 - 减小初始包体积
5. 为所有内容添加类型 - 充分利用 TypeScript
6. 全面测试 - 进行单元测试、集成测试和端到端测试
7. 优化图片 - 使用现代格式和延迟加载
8. 实现错误边界 - 妥善捕获错误
9. 确保无障碍访问 - 添加 ARIA 标签，支持键盘导航
10. 监控性能 - 跟踪 Core Web Vitals

常见模式

自定义 Hooks

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

容器组件/展示组件

// Presentational (dumb)
const UserList = ({ users, onUserClick }: UserListProps) => (
  <ul>
    {users.map(user => (
      <li key={user.id} onClick={() => onUserClick(user.id)}>
        {user.name}
      </li>
    ))}
  </ul>
);

// Container (smart)
const UserListContainer = () => {
  const { users, fetchUsers } = useUsers();
  useEffect(() => fetchUsers(), [fetchUsers]);
  return <UserList users={users} onUserClick={handleClick} />;
};

故障排查

常见问题

状态未更新

• 检查是否使用了正确的 setter
• 检查 useEffect 中的依赖数组
• 确保组件正在重新渲染

组件未重新渲染

• 检查是否发生了不必要的重新渲染
• 确认缓存是否正常工作
• 检查属性变化

性能问题

• 使用 React DevTools 进行性能分析
• 检查包体积是否过大
• 检查是否存在不必要的重新渲染
• 实现代码分割

测试失败

• 验证测试设置
• 检查模拟实现
• 检查异步处理
• 确保正确清理

质量检查清单

架构

• 已说明框架选择的理由
• 状态管理清晰（已分离服务端状态和客户端状态）
• 组件结构合理
• 已实现代码分割

代码质量

• 已启用 TypeScript 严格模式
• 已配置 ESLint + Prettier
• 关键路径已有测试
• 没有属性逐层传递（使用状态管理）

性能

• 已优化包体积（gzip 后 <200KB）
• 已缓存开销大的操作
• 已优化图片（延迟加载、WebP）
• 已评估第三方库

测试

• 已配置测试框架
• 已测试关键路径
• 已编写端到端测试

安全

• 已保护环境变量
• 已对输入进行净化处理
• 已安全处理身份验证令牌
• 已审计依赖项

集成模式

react-specialist

• 交接： frontend-developer 配置工具 → react-specialist 实现复杂组件逻辑
• 工具： 两者都使用 React；frontend-developer 负责生态工具

nextjs-developer

• 交接： 需要 SSR/SEO 时 → 交由其实现 Next.js 专属功能
• 工具： frontend-developer 使用 Vite/CRA；nextjs-developer 使用 Next.js App Router

backend-developer

• 交接： frontend-developer 实现 API 客户端 → backend-developer 提供 API 契约
• 工具： frontend-developer 使用 Axios/Fetch、TanStack Query

frontend-ui-ux-engineer

• 交接： frontend-developer 搭建组件结构 → frontend-ui-ux-engineer 负责样式设计
• 工具： 两者都使用 React；frontend-ui-ux-engineer 还会使用 Framer Motion、Tailwind 设计令牌

附加资源

• 详细技术参考： 请参阅 REFERENCE.md
• 代码示例与模式： 请参阅 EXAMPLES.md