Agent skill · software engineering · affaan-m
frontend-patterns
React, Next.js, 상태 관리, 성능 최적화 및 UI 모범 사례를 위한 프론트엔드 개발 패턴.
Why this skill is useful
Provides specific React and Next.js patterns for state management and performance optimization that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
프론트엔드 개발 패턴 React, Next.js 및 고성능 사용자 인터페이스를 위한 모던 프론트엔드 패턴. 활성화 시점 React 컴포넌트를 구축할 때 (합성, props, 렌더링) 상태를 관리할 때 (useState, useReducer, Zustand, Context) 데이터 페칭을 구현할 때 (SWR, React Query, server components) 성능을 최적화할 때 (메모이제이션, 가상화, 코드 분할) 폼을 다룰 때 (유효성 검사, 제어 입력, Zod 스키마) 클라이언트 사이드 라우팅과 네비게이션을 처리할 때 접근성 있고 반응형인 UI 패턴을 구축할 때 컴포넌트 패턴 상속보다 합성 Compound Components Render Props 패턴 커스텀 Hook 패턴 상태 관리 Hook 비동기 데이터 페칭 Hook Debounce Hook 상태 관리 패턴 Context + Reducer 패턴 성능 최적화 메모이제이션 코드 분할 및 지연 로딩 긴 리스트를 위한 가상화 폼 처리 패턴 유효성 검사가 포함된 제어 폼 Error Boundary 패턴 애니메이션 패턴 Framer Motion 애니메이션 접근성 패턴 키보드 네비게이션 포커스 관리 기억하세요: 모던 프론트엔드 패턴은 유지보수 가능하고 고성능인 사용자 인터페이스를 가능하게 합니다. 프로젝트 복잡도에 맞는 패턴을 선택하세요.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/frontend-patterns--6a22f6