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: React, Next.js, 상태 관리, 성능 최적화 및 UI 모범 사례를 위한 프론트엔드 개발 패턴.
origin: ECC
---

# 프론트엔드 개발 패턴

React, Next.js 및 고성능 사용자 인터페이스를 위한 모던 프론트엔드 패턴.

## 활성화 시점

- React 컴포넌트를 구축할 때 (합성, props, 렌더링)
- 상태를 관리할 때 (useState, useReducer, Zustand, Context)
- 데이터 페칭을 구현할 때 (SWR, React Query, server components)
- 성능을 최적화할 때 (메모이제이션, 가상화, 코드 분할)
- 폼을 다룰 때 (유효성 검사, 제어 입력, Zod 스키마)
- 클라이언트 사이드 라우팅과 네비게이션을 처리할 때
- 접근성 있고 반응형인 UI 패턴을 구축할 때

## 컴포넌트 패턴

### 상속보다 합성

```typescript
// PASS: GOOD: 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>
}

// Usage
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</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 must be used within Tabs')

  return (
    <button
      className={context.activeTab === id ? 'active'

Use this skill

{
  "model": "gpt-4o-mini",
  "skill": "imp-9a35fc0d-47c1-4236-8413-804d1f220ba3",
  "messages": [{ "role": "user", "content": "…" }]
}

More skills