# Frontend Patterns

React、Next.js、状态管理（State Management）、性能优化（Performance Optimization）及 UI 最佳实践的前端开发模式。

- Repository: https://github.com/xu-xiang/everything-claude-code-zh (2012 stars)
- Category: Design
- License: MIT
- Last updated: 2026-03-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-patterns -g -a claude-code -y`
Codex: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-patterns -g -a codex -y`
Cursor: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-patterns -g -a cursor -y`
Gemini CLI: `npx skills add xu-xiang/everything-claude-code-zh --skill frontend-patterns -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add xu-xiang/everything-claude-code-zh`

## Description

React、Next.js、状态管理（State Management）、性能优化（Performance Optimization）及 UI 最佳实践的前端开发模式。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 前端开发模式 (Frontend Development Patterns)

适用于 React、Next.js 和高性能用户界面的现代前端模式。

## 何时激活 (When to Activate)

- 构建 React 组件（组合、Props、渲染）时
- 管理状态（useState、useReducer、Zustand、Context）时
- 实现数据获取（SWR、React Query、服务端组件）时
- 优化性能（记忆化、虚拟化、代码分割）时
- 处理表单（验证、受控输入、Zod 模式）时
- 处理客户端路由和导航时
- 构建具备可访问性（Accessible）且响应式的 UI 模式时

## 组件模式 (Component Patterns)

### 组合优于继承 (Composition Over Inheritance)

```typescript
// ✅ 推荐：组件组合 (Component composition)
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// 使用示例
<Card>
  <CardHeader>标题</CardHeader>
  <CardBody>内容</CardBody>
</Card>
```

### 复合组件 (Compound Components)

```typescript
interface TabsContextValue {
  activeTab: string
  setActiveTab: (tab: string) => void
}

const TabsContext = createContext<TabsContextValue | undefined>(undefined)

export function Tabs({ children, defaultTab }: {
  children: React.ReactNode
  defaultTab: string
}) {
  const [activeTab, setActiveTab] = useState(defaultTab)

  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  )
}

export function TabList({ children }: { children: React.ReactNode }) {
  return <div className="tab-list">{children}</div>
}

export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
  const context = useContext(TabsContext)
  if (!context) throw new Error('Tab 必须在 Tabs 内部使用')

  return (
    <button
      className={context.activeTab === id ? 'active' : ''}
      onClick={() => context.setActiveTab(id)}
    >
      {children}
    </button>
  )
}

The rest: https://github.com/xu-xiang/everything-claude-code-zh/blob/HEAD/.agents/skills/frontend-patterns/SKILL.md