Frontend Builder 是一个面向现代 React 与 Next.js 前端开发的技能，目标是帮助构建可维护、高性能的前端应用。它适用于创建 Web 应用、选择前端技术栈、组织组件结构以及实现 UI/UX 设计等场景。
核心原则 该技能提出四项核心原则：组件组合，将 UI 拆分为小型、可复用、单一职责的组件；状态就近，让状态尽可能靠近使用它的位置；默认性能，优化渲染、代码分割与资源加载；开发者体验，强调清晰命名、一致模式与有用的错误提示。
框架选择 在 React（Vite）与 Next.js 之间，技能给出了明确的取舍建议。使用 React + Vite 的场景包括：仅客户端应用、无 SEO 需求、简单部署（静态托管）、初始搭建更快。使用 Next.js 的场景包括：SEO 重要（营销站点、博客、电商）、需要服务端渲染、需要 API 路由、偏好基于文件的路由、图片优化关键。技能推荐大多数项目使用 Next.js（App Router）。
组件架构 技能将组件分为三类：页面组件（路由入口点）、功能组件（承载业务逻辑）、UI 组件（可复用、无业务逻辑）。最佳实践强调组件应小型、聚焦、有类型标注，避免出现体积庞大、无类型、职责不清的组件。
状态管理 技能提供了一棵决策树：只有一个组件需要该状态时使用 useState；父组件与子组件之间使用 props 或 useState + props；兄弟组件之间提升到共同父级；广泛使用（主题、认证）使用 Context API；复杂应用状态使用 Zustand 或 Redux。文中给出了 useState、Context API 与 Zustand 的代码示例，并推荐 Zustand 用于复杂状态。
数据获取 推荐使用 React Query（@tanstack/react-query）处理服务端状态，示例涵盖查询（GET）与变更（POST、PUT、DELETE），并通过 invalidateQueries 在变更成功后刷新数据。对于 Next.js App Router，技能说明了服务端组件（在服务端获取数据）与客户端组件（用于交互，需 'use client'）的区分与配合方式。
表单处理 推荐 React Hook Form 配合 Zod 进行校验，示例展示了登录表单的 schema 定义、类型推导、register、handleSubmit 以及错误与提交中状态的处理。
样式方案 推荐 Tailwind CSS，并提到可配合 @shadcn/ui 组件库；同时给出 CSS Modules 作为替代方案，示例展示了按钮组件的变体样式写法。
性能优化 React 侧包括：用 useMemo 缓存昂贵计算、用 useCallback 缓存回调、用 memo 缓存组件。Next.js 侧包括：使用 next/image 进行图片优化（含 priority 用于首屏）、使用 next/font 进行字体优化、使用 dynamic 进行动态导入与代码分割。
错误处理 介绍了 React 错误边界（ErrorBoundary 类组件，含 getDerivedStateFromError 与 fallback）以及 Next.js 的 app/error.tsx 错误处理方式（提供 error 与 reset）。
目录结构 给出了 Next.js App Router 的推荐目录结构，包括 app/ 下的路由组（(auth)、(dashboard)）、api 路由、根布局，以及 components/（ui、features、layouts）、lib/、hooks/、stores/ 等目录的组织方式。
TypeScript 最佳实践 强调为组件 props、API 响应与状态添加类型，示例包括 ButtonProps 联合类型、User 接口与 fetchUsers 的返回类型、useState 的泛型标注。
总结要点 技能总结认为优秀前端应：大多数项目使用 Next.js；将 UI 拆分为小型、有类型的组件；选择合适的状管理方式（useState → Context → Zustand）；使用 React Query 管理服务端状态；使用 Tailwind CSS + shadcn/ui 进行样式；通过记忆化与代码分割进行优化；用错误边界优雅处理错误；遵循一致的目录结构。
相关资源 技能列出了相关技能（api-designer、ux-designer、deployment-advisor）、相关模式（META/DECISION-FRAMEWORK.md、STANDARDS/architecture-patterns/component-patterns.md）以及相关手册（PLAYBOOKS/setup-nextjs-project.md、PLAYBOOKS/optimize-frontend-performance.md），其中部分标注为“when created”（尚未创建）。
限制 资料未提供该技能的收费、价格、平台支持范围、安装命令或具体使用步骤等信息，这些内容暂未提供。