用途
Frontend Developer Skill 的定位是提供完整的现代前端开发能力，用于构建可投入生产环境的 Web 应用。资料描述其覆盖现代框架（React、Vue、Next.js）、工具链搭建、状态管理模式、测试基础设施以及性能优化策略。
主要能力
- 从零构建 React、Vue、Angular 应用，并设置现代前端工具链（Vite、ESLint、Prettier、测试框架）。
- 实现状态管理，支持 Redux Toolkit、Zustand、Context API。
- 配置认证流程，包括令牌管理与受保护路由。
- 优化打包体积与生产部署性能。
- 创建组件库与设计系统。
- 搭建完整的测试体系（单元、集成、E2E）。
使用方式与触发场景
资料给出该技能的调用时机：
应调用的情况：构建 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。
决策框架
框架选择：新项目需要 SEO 与服务器端渲染时，React 团队选 Next.js 14+，Vue 团队选 Nuxt.js 3+，团队无偏好时资料建议 Next.js（生态优势）。纯 SPA 无 SSR 需求时，React 经验选 React 18+（Vite），Vue 经验选 Vue 3（Vite），企业级或复杂表单选 Angular 15+。静态站点（博客、文档）可选 Astro、Next.js SSG 或 Vite + React。既有项目则延续现有框架以保持一致。
状态管理选择：简单本地状态用 useState、useReducer（0 KB）；2-3 个组件共享状态用 Context API（0 KB）；中型应用（少于 10 个 slice）用 Zustand（约 1 KB）；大型应用（10+ slice）用 Redux Toolkit（约 11 KB）；服务端状态用 TanStack Query（约 12 KB）。
样式方案：快速原型用 Tailwind CSS；组件库用 Radix UI + Tailwind；动态主题用 CSS-in-JS（Styled Components、Emotion）；大型团队用 CSS Modules 或 Tailwind + Design Tokens；性能关键场景用原生 CSS / SCSS。
最佳实践与常见模式
最佳实践包括：使用函数组件；优先使用 hooks，尽量避免 class 组件；用 useMemo、useCallback 记忆昂贵操作；懒加载组件以减小初始包体积；使用 TypeScript 类型化；充分测试（单元、集成、E2E）；优化图片并使用现代格式和懒加载；实现错误边界；保证可访问性（ARIA 标签、键盘导航）；监控性能（Core Web Vitals）。
资料收录的常见模式示例，包括自定义 Hook（useFetch）与容器/展示组件拆分。以下为资料中给出的代码示例，未作改动：
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 依赖数组、确认组件是否重新渲染；组件不重新渲染时，检查是否有不必要的重渲染、验证记忆化是否生效、检查 prop 变化；性能问题时，用 React DevTools 进行性能分析、检查包体积、检查不必要的重渲染、实现代码分割；测试失败时，验证测试设置、检查 mock 实现、检查异步处理、确保正确清理。
质量检查清单
架构方面：框架选择有依据；状态管理清晰（服务端与客户端状态分离）；组件结构合理；实现代码分割。
代码质量：启用 TypeScript 严格模式；配置 ESLint + Prettier；关键路径有测试；无 prop drilling（使用状态管理）。
性能：优化包体积（小于 200KB gzip 压缩后）；记忆化昂贵操作；优化图片（懒加载、WebP）；评估第三方库。
测试：配置测试框架；测试关键路径；存在 E2E 测试。
安全：环境变量得到保护；输入净化；认证令牌安全；审计依赖。
集成模式
资料描述了与其它技能的协作方式：
- react-specialist：frontend-developer 搭建工具链，react-specialist 实现复杂组件逻辑；两者都使用 React。
- 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 负责样式；后者加入 Framer Motion、Tailwind design tokens。
适用场景与限制
适用场景为构建 React、Vue、Angular 应用，搭建前端工具链，实现状态管理与认证流程，优化性能与包体积，建立测试体系，创建组件库与设计系统。
限制方面：资料明确该技能不适用于仅需后端 API、数据库优化、仅做 DevOps/部署或仅做 UI/UX 设计不写代码的场景，这些应分别使用 backend-developer、database-optimizer、devops-engineer、ui-designer。资料另提到详细技术参考见 REFERENCE.md，代码示例与模式见 EXAMPLES.md。关于收费、价格、平台与安装命令，资料暂未提供。