frontend-patterns

Files (2)

• SKILL.md
• openai.yaml · agents/

SKILL.md (first lines)

# 前端开发模式

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

## 何时使用

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

## 隐私和数据边界

前端示例应使用合成或通用领域数据。不要收集、记录、持久化或显示凭据、访问令牌、SSN、健康数据、支付详情、私人电子邮件、电话号码或其他敏感个人数据，除非用户明确请求具有适当验证、编辑和访问控制的范围实现。

避免在未经明确批准的情况下添加分析、跟踪像素、第三方脚本或外部数据接收器。处理用户数据时，优先使用最小权限 API、记录前的客户端编辑，以及每个边界的服务端验证。

## 组件模式

### 组合优于继承

```typescript
// 正确：组件组合
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>
```

### 复合组件

```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>
  )
}

// 使用
<Tabs defaultTab="overview">
  <TabList>
    <Tab id="overview">概览</Tab>
    <Tab id="details">详情</Tab>
  </TabList>
</Tabs>
```

### Render Props 模式

```typescript
interface DataLoaderProps<T> {
  url: string
  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode
}

export function DataLoader<T>({ url, children }: DataLoaderProps<T>) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<Error | null>(null)

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false))

From aaione/everything-claude-code-zh, MIT.

More from aaione/everything-claude-code-zh