senior-frontend
React로 최신 프론트엔드 앱 구축하기
Également disponible depuis: alirezarezvani
복잡한 프론트엔드 애플리케이션을 구축하려면 React 패턴, 성능 최적화 및 상태 관리에 대한 깊은 전문 지식이 필요합니다. 이 스킬은 컴포넌트 아키텍처, 번들 최적화 및 업계 모범 사례를 사용한 프로덕션 준비 UI 시스템 구현에 대한 시니어 수준의 가이드를 제공합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "senior-frontend". 로딩 상태가 있는 Button 컴포넌트 만들기
Résultat attendu:
- 적절한 TypeScript 인터페이스를 가진 컴포넌트 구조
- 스피너 통합을 통한 로딩 상태 처리
- 접근성 속성 (aria-disabled, 키보드 네비게이션)
- 변형을 위한 Tailwind CSS 클래스 (primary, secondary, outline)
- export 문 및 barrel 파일 업데이트 권장 사항
Utilisation de "senior-frontend". Next.js 번들 크기를 어떻게 줄이나요?
Résultat attendu:
- 번들 애널라이저를 사용하여 큰 의존성 식별
- 라우트 기반 코드 스플리팅을 위한 동적 import 구현
- 자동 이미지 최적화를 위한 next/image 구성
- 컴포넌트 수준 지연 로딩을 위한 React.lazy() 사용
- ES 모듈 사용으로 트리 쉐이킹 활성화
Utilisation de "senior-frontend". 피해야 할 일반적인 React 안티 패턴은 무엇인가요?
Résultat attendu:
- 여러 레이어를 통한 prop 드릴링 - 대신 컨텍스트 사용
- 컴포넌트 내 비즈니스 로직 - 커스텀 훅으로 추출
- 대형 모놀리식 컴포넌트 - 기능별로 분할
- 에러 바운더리 누락 - ErrorBoundary로 컴포넌트 래핑
- 직접적인 상태 변경 - 항상 setState 또는 상태 관리자 사용
Audit de sécurité
Risque faibleThis skill consists of 3 Python CLI scripts for frontend development tasks and 3 reference guides. All static findings are FALSE POSITIVES caused by pattern-matching errors. The scanner misidentified markdown code block delimiters as Ruby backtick execution, section numbers as weak crypto algorithms, and standard dev workflow documentation as credential access. No actual code execution, network access, or credential handling exists in this skill.
Facteurs de risque
⚡ Contient des scripts (3)
📁 Accès au système de fichiers (3)
Score de qualité
Ce que vous pouvez construire
컴포넌트 아키텍처
적절한 TypeScript 타입, 훅 및 폴더 구조로 React 컴포넌트를 설계하고 스캐폴딩합니다.
번들 최적화
번들 크기를 분석하고 더 나은 성능을 위해 JavaScript 페이로드를 줄일 수 있는 기회를 식별합니다.
코드 리뷰 가이드
코드 리뷰 중에 일관된 프론트엔드 패턴을 적용하고 안티 패턴을 식별합니다.
Essayez ces prompts
TypeScript를 사용하여 [component name]에 대한 React 컴포넌트를 만듭니다. 적절한 props 인터페이스, 에러 처리를 포함하고 최신 훅 패턴을 따릅니다. 스타일링에는 Tailwind CSS를 사용합니다.
React 애플리케이션의 번들 크기를 분석하고 큰 의존성을 식별합니다. 초기 로드 시간을 줄이기 위한 코드 스플리팅 전략과 지연 로딩 접근 방식을 제안합니다.
React에서 전역 상태를 관리하기 위한 [specific pattern] 구현을 도와주세요. 이 사용 사례에 대해 React Context, Zustand 및 Jotai를 비교하고 트레이드오프를 설명합니다.
내 프로젝트에 App Router를 사용한 Next.js를 설정합니다. 적절한 SSR 구성, 이미지 최적화를 포함하고 서버 컴포넌트와 클라이언트 컴포넌트를 언제 사용해야 하는지 설명합니다.
Bonnes pratiques
- 컴파일 타임에 오류를 잡기 위해 모든 컴포넌트에 TypeScript 사용
- 앱 크래시를 방지하기 위한 적절한 에러 바운더리 구현
- 초기 번들 크기를 줄이기 위해 라우트 및 무거운 컴포넌트를 지연 로딩
Éviter
- 여러 레이어를 통한 prop 드릴링 방지; 컨텍스트 또는 상태 관리 사용
- 비즈니스 로직을 컴포넌트에 직접 넣지 않기; 커스텀 훅으로 추출
- 대형 모놀리식 컴포넌트 방지; 기능과 책임별로 분할