SuperAPI AI 工具集

senior-frontend

前端与建站

查看项目

更新于 10-15 20:25

技能介绍

用途:面向 React/Next.js 应用的前端开发模式、性能优化与自动化工具,适用于构建 React 组件、优化 Next.js 性能等场景。

主要能力:

  1. 项目脚手架:生成带 TypeScript、Tailwind CSS 与最佳实践配置的 Next.js 或 React 项目。选项包括 --template nextjs(Next.js 14+,App Router 与 Server Components)、--template react(React + Vite + TypeScript)、--features auth(NextAuth.js)、--features api(React Query + API 客户端)、--features forms(React Hook Form + Zod)、--features testing(Vitest + Testing Library)。生成结构含 app/、components/ui、components/layout、hooks/、lib/、types/ 及 tailwind.config.ts、next.config.js、package.json。
  2. 组件生成:生成带 TypeScript、测试与 Storybook 故事的 React 组件。选项有 --type client(默认,含 'use client')、--type server(异步服务端组件)、--type hook(自定义 Hook)、--with-test、--with-story。
  3. 打包分析:分析 package.json 与项目结构,给出体积优化建议,如用 date-fns/dayjs 替代 moment、lodash-es 替代 lodash、原生 fetch 或 ky 替代 axios、原生 DOM API 替代 jquery、shadcn/ui 或 Radix UI 替代 @mui/material。
  4. React 模式:复合组件、自定义 Hook(如 useDebounce)。
  5. Next.js 优化:默认使用 Server Components,仅在需要事件处理、状态、副作用或浏览器 API 时加 'use client';使用 next/image 做图片优化(priority、fill、sizes)。
  6. 可访问性清单:语义化 HTML、键盘导航、ARIA 标签、颜色对比度至少 4.5:1、可见焦点指示。

使用方式:资料未提供具体安装命令或调用方式,暂未提供。

适用场景:React/Next.js 项目搭建、组件开发、性能与打包优化、可访问性改进。

限制:资料未说明收费、价格、平台支持范围与效果保证,暂未提供。