Frontend Patterns

Description

--- name: frontend-patterns description: React, Next.js, 상태 관리, 성능 최적화, UI 모범 사례를 위한 프론트엔드 개발 패턴. --- # 프론트엔드 개발 패턴 React, Next.js, 그리고 성능 좋은 사용자 인터페이스를 위한 현대적인 프론트엔드 패턴. ## 컴포넌트 패턴 ### 상속보다 합성 ```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 }: { chi

Installation

Installs to ~/.claude/skills/revfactory-everything-claude-code-frontend-patterns/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.