---

name: senior-frontend description: 用于 React、Next.js、TypeScript 和 Tailwind CSS 应用的前端开发技能。用于构建 React 组件、优化 Next.js 性能、分析包体积、搭建前端项目、实现无障碍访问或审查前端代码质量。 risk: safe source: https://github.com/alirezarezvani/claude-skills date_added: "2026-03-07"

高级前端

React/Next.js 应用的前端开发模式、性能优化和自动化工具。

使用场景

• 使用 TypeScript 和 Tailwind CSS 搭建新的 React 或 Next.js 项目时。
• 生成新组件或自定义 hooks 时。
• 分析和优化前端应用的包体积时。
• 实现或审查高级 React 模式（如复合组件或 Render Props）时。
• 确保无障碍合规性和实现健壮的测试策略时。

目录

• 项目搭建
• 组件生成
• 包分析
• React 模式
• Next.js 优化
• 无障碍和测试

---

项目搭建

使用 TypeScript、Tailwind CSS 和最佳实践配置生成新的 Next.js 或 React 项目。

工作流：创建新前端项目

1. 使用项目名称和模板运行脚手架：

   python scripts/frontend_scaffolder.py my-app --template nextjs
   

2. 添加可选功能（auth、api、forms、testing、storybook）：

   python scripts/frontend_scaffolder.py dashboard --template nextjs --features auth,api
   

3. 进入项目并安装依赖：

   cd my-app && npm install
   

4. 启动开发服务器：

   npm run dev
   

脚手架选项

| 选项 | 描述 | | ---- | ---- | | --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 | | --dry-run | 预览文件而不创建 |

生成的结构（Next.js）

my-app/
├── app/
│   ├── layout.tsx        # Root layout with fonts
│   ├── page.tsx          # Home page
│   ├── globals.css       # Tailwind + CSS variables
│   └── api/health/route.ts
├── components/
│   ├── ui/               # Button, Input, Card
│   └── layout/           # Header, Footer, Sidebar
├── hooks/                # useDebounce, useLocalStorage
├── lib/                  # utils (cn), constants
├── types/                # TypeScript interfaces
├── tailwind.config.ts
├── next.config.js
└── package.json

---

组件生成

生成带 TypeScript、测试和 Storybook stories 的 React 组件。

工作流：创建新组件

1. 生成客户端组件：

   python scripts/component_generator.py Button --dir src/components/ui
   

2. 生成服务端组件：

   python scripts/component_generator.py ProductCard --type server
   

3. 生成带测试和 story 文件：

   python scripts/component_generator.py UserProfile --with-test --with-story
   

4. 生成自定义 hook：

   python scripts/component_generator.py FormValidation --type hook
   

生成器选项

| 选项 | 描述 | | ---- | ---- | | --type client | 带 'use client' 的客户端组件（默认） | | --type server | 异步服务端组件 | | --type hook | 自定义 React hook | | --with-test | 包含测试文件 | | --with-story | 包含 Storybook story | | --flat | 在输出目录中创建而不建子目录 | | --dry-run | 预览而不创建文件 |

生成的组件示例

"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

interface ButtonProps {
  className?: string;
  children?: React.ReactNode;
}

export function Button({ className, children }: ButtonProps) {
  return <div className={cn("", className)}>{children}</div>;
}

---

包分析

分析 package.json 和项目结构以寻找包体积优化机会。

工作流：优化包体积

1. 在项目上运行分析器：

   python scripts/bundle_analyzer.py ./package.json