frontend-patterns

What this skill does

When applied, it prepends a system prompt before your request is sent — no extra calls and no change to how you are billed beyond the added tokens.

---
name: frontend-patterns
description: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
---

# 前端開發模式

用於 React、Next.js 和高效能使用者介面的現代前端模式。

## 元件模式

### 組合優於繼承

```typescript
// PASS: 良好：元件組合
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 must be used within 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> {

Use this skill

{
  "model": "gpt-4o-mini",
  "skill": "imp-91315e69-bcb8-4230-9ea8-4eb1d65e52a7",
  "messages": [{ "role": "user", "content": "…" }]
}

More skills