المهارات frontend-patterns
📦

frontend-patterns

آمن

검증된 패턴으로 모던 React 애플리케이션 구축하기

프론트엔드 개발자들은 일관성 없는 코드 아키텍처와 일반적인 문제에 대한 해결책을 재발견하는 데 어려움을 겪습니다. 이 스킬은 컴포넌트, 훅, 상태 관리 및 성능 최적화를 위한 검증된 React 패턴을 제공합니다.

يدعم: Claude Codex Code(CC)
🥉 72 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "frontend-patterns". 접근성 기능을 갖춘 Toggle 스위치 컴포넌트 생성

النتيجة المتوقعة:

키보드 네비게이션, 적절한 ARIA 속성, 포커스 관리, TypeScript 타입 (onChange 콜백 및 checked 상태 props 포함) 을 갖춘 완전히 접근성 가능한 Toggle 컴포넌트.

استخدام "frontend-patterns". 정렬 및 페이지네이션이 있는 데이터 테이블 구축

النتيجة المتوقعة:

인디케이터가 있는 컬럼 정렬, 클라이언트 측 페이지네이션 컨트롤, 대규모 데이터셋을 위한 행 가상화, 컴파운드 컬럼 정의를 통한 커스터마이징 가능한 셀 렌더링 기능을 갖춘 DataTable 컴포넌트.

التدقيق الأمني

آمن
v1 • 2/25/2026

This skill contains educational frontend development patterns for React and Next.js. All static analysis findings were false positives: backtick detections were TypeScript template literals in code examples, dynamic imports are React lazy() patterns for code splitting, and fetch calls are standard browser API usage for data fetching. No security risks identified.

1
الملفات التي تم فحصها
633
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
90
قابلية الصيانة
87
المحتوى
50
المجتمع
100
الأمان
87
الامتثال للمواصفات

ماذا يمكنك بناءه

재사용 가능한 컴포넌트 라이브러리 구축

조직 전체에서 일관된 디자인 패턴을 강제하는 카드, 탭 및 모달을 위한 컴파운드 컴포넌트를 생성합니다.

느린 React 애플리케이션 최적화

데이터 중심 인터페이스의 렌더링 성능을 개선하기 위해 메모이제이션, 코드 스플리팅 및 가상화 패턴을 적용합니다.

클래스 컴포넌트를 훅으로 마이그레이션

레거시 클래스 기반 컴포넌트와 상태 관리를 커스텀 훅을 사용한 모던 함수형 컴포넌트로 변환합니다.

جرّب هذه الموجهات

기본 컴파운드 컴포넌트 생성 
상태 관리를 위해 React 컨텍스트를 사용하여 Select, SelectOption 및 SelectLabel 서브컴포넌트를 포함한 컴파운드 Select 컴포넌트를 생성하세요. TypeScript 인터페이스와 기본 스타일링을 포함하세요.
커스텀 데이터 페칭 훅 생성 
로딩 상태, 에러 처리 및 캐싱을 처리하는 useQuery 훅을 구축하세요. onSuccess 및 onError 콜백 옵션과 수동 refetch 함수를 포함하세요.
성능 최적화 구현 
1000 개 이상의 시장 데이터 행을 표시하는 대시보드 컴포넌트를 최적화하세요. React.memo, 정렬을 위한 useMemo, 리스트 가상화를 위한 useVirtualizer, 무거운 차트 컴포넌트를 위한 lazy loading 과 함께 Suspense 를 적용하세요.
포커스 관리가 있는 접근성 모달 구축 
애니메이션을 위해 Framer Motion 을 사용하고 적절한 포커스 트래핑, 키보드 이스케이프 처리를 구현하며 닫기 시 트리거 요소로 포커스를 복원하는 모달 컴포넌트를 생성하세요. ARIA 속성과 TypeScript 타입을 포함하세요.

أفضل الممارسات

  • children 를 허용하는 작고 집중된 컴포넌트로 UI 를 분할하여 상속보다 합성을 선호하세요
  • 메모이징된 자식 컴포넌트에 전달되는 함수에는 빈 의존성 배열과 함께 useCallback 을 사용하세요
  • 컴포넌트 에러로 인한 전체 애플리케이션 크래시를 방지하기 위해 기능 섹션 주변에 에러 바운더리를 구현하세요

تجنب

  • 여러 컴포넌트 레벨에 걸쳐 prop drilling 을 피하세요 - 대신 Context 또는 컴포넌트 합성을 사용하세요
  • 조건부 또는 루프 내에서 훅을 호출하지 마세요 - 항상 컴포넌트의 최상위 레벨에서 훅을 호출하세요
  • 유도된 상태를 useState 에 저장하지 마세요 - 렌더링 중에 계산하거나 비싼 계산에는 useMemo 를 사용하세요

الأسئلة المتكررة

이러한 패턴에는 어떤 React 버전이 필요한가요?
이러한 패턴은 동시 렌더링과 개선된 훅 동작을 포함하는 React 18+ 에서 가장 잘 작동합니다. 데이터 페칭을 위한 Suspense 와 같은 일부 패턴은 React 18 기능이 필요합니다.
Next.js App Router 에서 이러한 패턴을 사용할 수 있나요?
네, 대부분의 패턴은 Next.js App Router 와 함께 작동합니다. 클라이언트 컴포넌트는 모든 훅과 컨텍스트 패턴을 사용할 수 있습니다. 서버 컴포넌트는 이러한 패턴을 구현하는 클라이언트 컴포넌트에 데이터를 전달할 수 있습니다.
이러한 패턴이 대규모 애플리케이션에 적합한가요?
네, 이러한 패턴은 잘 확장됩니다. 컴파운드 컴포넌트와 Context + Reducer 패턴은 구체적으로 많은 상호 연결된 컴포넌트를 가진 복잡한 애플리케이션을 위해 설계되었습니다.
이러한 패턴을 사용하려면 TypeScript 가 필요한가요?
타입 안전성과 더 나은 IDE 지원을 위해 TypeScript 를 권장하지만, 타입 주석과 인터페이스를 제거하면 JavaScript 로도 패턴을 적용할 수 있습니다.
이러한 패턴을 사용하는 컴포넌트는 어떻게 테스트하나요?
부모를 자식과 함께 렌더링하고 예상 출력을 단정하여 컴파운드 컴포넌트를 테스트하세요. 커스텀 훅은 적절한 래퍼 프로바이더와 함께 React Testing Library 의 renderHook 유틸리티를 사용하여 테스트하세요.
여러 패턴을 함께 조합할 수 있나요?
네, 패턴은 조합 가능하도록 설계되었습니다. 예를 들어, 컴파운드 컴포넌트 내에서 커스텀 훅을 사용하거나, 최적의 성능을 위해 Context 를 사용하는 컴포넌트에 메모이제이션을 적용할 수 있습니다.

تفاصيل المطور

المؤلف

affaan-m

الترخيص

MIT

المستودع

https://github.com/sickn33/antigravity-awesome-skills/tree/main/web-app/public/skills/cc-skill-frontend-patterns

مرجع

main

بنية الملفات

📄 SKILL.md