【用途】 该技能定位为现代前端开发专家，主要用于构建 React 与 Next.js 的用户界面组件和页面、修复前端性能/可访问性/状态问题，以及设计客户端数据获取与交互流程。当需求仅涉及后端 API 架构、非 Web 技术栈的原生应用，或只需要纯视觉设计而无需实现指导时，不适合使用该技能。
【主要能力】 核心 React：涵盖 React 19 特性（Actions、Server Components、异步过渡）、并发渲染与 Suspense、高级 Hooks（useActionState、useOptimistic、useTransition、useDeferredValue）、组件架构与性能优化（React.memo、useMemo、useCallback）、自定义 Hooks 与组合、错误边界以及 React DevTools 性能分析。 Next.js 与全栈集成：Next.js 15 App Router 的服务端与客户端组件、React Server Components 与流式渲染、Server Actions、并行路由/拦截路由/路由处理器、ISR 与动态渲染、Edge 运行时与中间件、图片优化与 Core Web Vitals、API 路由与无服务器函数。 前端架构：原子设计驱动的组件开发、微前端与模块联邦、设计系统与组件库集成、Webpack 5/Turbopack/Vite 构建优化、打包分析与代码分割、PWA、Service Worker 与离线优先。 状态管理与数据请求：Zustand、Jotai、Valtio，TanStack Query/React Query，SWR，Context API 优化，Redux Toolkit，WebSocket 与 Server-Sent Events 实时数据，乐观更新与冲突处理。 样式与设计系统：Tailwind CSS、CSS-in-JS（emotion、styled-components、vanilla-extract）、CSS Modules 与 PostCSS、设计令牌与主题、容器查询与响应式设计、CSS Grid/Flexbox、动画库（Framer Motion、React Spring）、暗色模式。 性能优化：Core Web Vitals（LCP、FID、CLS）、代码分割与动态导入、图片与字体优化、内存泄漏防护、打包分析与 tree shaking、关键资源优先级、Service Worker 缓存。 测试与质量：React Testing Library、Jest、Playwright/Cypress 端到端测试、Storybook 视觉回归、Lighthouse CI、axe-core 可访问性测试、TypeScript 5.x 类型安全。 可访问性：WCAG 2.1/2.2 AA、ARIA 与语义 HTML、键盘导航与焦点管理、屏幕阅读器优化、颜色对比、可访问表单与校验。 工程化工具：热重载工作流、ESLint/Prettier、Husky 与 lint-staged、Storybook、Chromatic、GitHub Actions 与 CI/CD、Nx/Turbo/Lerna 单体仓库管理。 第三方集成：NextAuth.js/Auth0/Clerk 认证、Stripe/PayPal 支付、Google Analytics 4/Mixpanel 分析、Contentful/Sanity/Strapi CMS、Prisma/Drizzle 数据库、邮件与通知、CDN 与资源优化。
【使用方式】 技能给出的执行思路为：先澄清需求、目标设备与性能目标；再选择组件结构以及状态或数据方案；随后以兼顾可访问性与响应式的方式实现 UI；最后通过性能分析与审计验证性能与用户体验。响应时倾向于分析是否符合现代 React/Next.js 模式，给出带 TypeScript 类型的生产级代码，并纳入可访问性、SEO、错误边界、加载状态、Core Web Vitals 优化以及 Storybook 文档。示例交互包括构建带 Suspense 边界的流式服务端组件、基于 Server Actions 与乐观更新的表单、Tailwind + TypeScript 设计系统组件、渲染性能优化、认证与路由中间件、可排序筛选的无障碍数据表格、WebSocket + React Query 实时更新、带离线与推送通知的 PWA。
【适用场景】 适用于构建或修复 React/Next.js 界面、优化前端性能与可访问性、设计客户端数据获取与交互流程，以及需要现代前端架构与工程化实践的项目。
【限制】 资料未提供具体的定价、安装命令、运行平台或效果数据；仅后端 API 架构、非 Web 原生应用、无实现需求的纯视觉设计不适用。其他缺失事实暂未提供。