Agent Skills
返回列表
💻

现代前端开发专家

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @org-02qudk26/frontend-developer。

技能介绍

解决什么问题

现代 React/Next.js 前端项目里，常见问题不是“能不能写出页面”，而是组件边界、状态与数据方案、服务端渲染、性能预算、可访问性和测试文档容易脱节。这个技能面向工程师，把 React 19+、Next.js 15+、TypeScript 5.x 等约束纳入同一套实现路径，减少临时拼凑和过度设计。

技能如何工作

它按“需求分析 → 结构选择 → 实现验证”的方式组织输出，重点包括：

  • 组件与渲染：Server Components、Client Components、Suspense、Server Actions、并行路由与 ISR。
  • 状态与数据：Zustand、Jotai、React Query、SWR、乐观更新、WebSocket 实时数据。
  • 性能与样式：Core Web Vitals、代码分割、图片优化、Tailwind CSS、设计令牌与响应式。
  • 质量与可访问性：React Testing Library、Playwright、axe-core、ARIA 模式和键盘导航。

关键步骤会要求先明确目标设备与性能目标，再选择组件结构和数据方案，最后用剖析、审计与测试验证 UX。

适用边界

适合需要实现指导的前端任务，例如重构组件、设计数据获取、优化渲染性能、补全无障碍和测试。它不替代后端 API 架构、原生应用开发，也不适合只想要视觉概念而不落地的纯设计场景。若项目没有采用 React/Next.js 生态，其建议需要按技术栈调整。

使用场景

  • 把 Next.js 页面拆成服务端组件，并用 Suspense 流式加载首屏数据。
  • 优化一个 React 列表组件的重渲染，用 useDeferredValue 和代码分割降低 LCP 抖动。
  • 用 React Query 和 WebSocket 实现订单列表实时更新，并补上错误边界与加载状态。
  • 为数据表格补全键盘导航、ARIA 标签和对比度，使 WCAG 2.2 AA 校验通过。

适合人员

  • 负责 Next.js 管理后台的前端工程师，需要把页面拆成服务端组件并优化首屏加载。
  • 维护 React 组件库的资深工程师，需要补全无障碍属性、Storybook 文档和视觉测试。
  • 做电商前台的全栈工程师，需要用 React Query、WebSocket 实现库存实时更新与乐观更新。
  • 需要交付 PWA 的前端组长，要配置 Service Worker、离线缓存和推送通知。