Frontend Developer
최신 React 및 Next.js 애플리케이션 구축
프런트엔드 개발은 React, 성능 최적화, 접근성 표준에 대한 깊은 전문 지식이 필요합니다. 이 스킬은 최신 도구와 모범 사례를 사용하여 확장 가능한 웹 애플리케이션을 구축하기 위한 프로덕션 준비 가이드를 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"Frontend Developer" 사용 중입니다. 접근 가능한 모달 대화상자 컴포넌트 생성
예상 결과:
- 포커스 트랩 및 키보드 내비게이션이 포함된 모달 컴포넌트
- 스크린 리더 호환성을 위한 ARIA 속성
- 배경 클릭 처리 및 Esc 키 닫기
- 모달 props 및 구성을 위한 TypeScript 인터페이스
"Frontend Developer" 사용 중입니다. 렌더링이 느린 제품 목록 최적화
예상 결과:
- 대규모 데이터셋을 위한 가상 스크롤 구현
- React.memo를 사용한 메모이제이션된 제품 카드 컴포넌트
- 디바운스된 검색 및 필터 핸들러
- 이미지�� 많은 컴포넌트를 위한 코드 분할
보안 감사
안전This is a prompt-only skill containing only instructional text in SKILL.md. Static analysis scanned 0 files with 0 lines of executable code and detected no security patterns. The skill provides frontend development guidance for React and Next.js without any code execution, network access, or file system operations. No malicious patterns or prompt injection attempts detected.
품질 점수
만들 수 있는 것
React 컴포넌트 개발
확장 가능한 애플리케이션을 위한 TypeScript, 적절한 hooks 사용, 최적화된 렌더링 패턴으로 프로덕션 준비 React 컴포넌트를 구축합니다.
Next.js 애플리케이션 아키텍처
Server Components, Server Actions, 최적의 데이터 가져오기 전략으로 풀스택 Next.js 애플리케이션을 설계합니다.
성능 최적화
코드 분할, 지연 로딩, Core Web Vitals 최적화 기법을 통해 프런트엔드 성능을 분석하고 개선합니다.
이 프롬프트를 사용해 보세요
TypeScript props를 사용하여 재사용 가능한 React 버튼 컴포넌트를 생성하세요. variants (primary, secondary), 크기, disabled 상태를 지원하고 Tailwind CSS 클래스와 적절한 접근성 속성을 포함하세요.
API에서 제품 데이터를 가져오는 Next.js 15 Server Component를 구축하세요. 스트리밍을 위한 Suspense 경계를 구현하고 로딩 및 오류 상태를 우아하게 처리하세요.
Zod 검증을 사용하는 Next.js Server Actions로 연락처 양식을 구현하세요. useOptimistic을 사용한 낙관적 업데이트와 사용자 피드백이 포함된 적절한 오류 처리를 구현하세요.
성능 문제에 대해 이 React 컴포넌트를 분석하세요. 불필요한 재렌더링을 식별하고 메모이제이션 전략을 제안하며 적절한 곳에 useMemo, useCallback, React.memo를 사용하여 최적화된 코드를 제공하세요.
모범 사례
- 초기에 오류를 catch하려면 props, state, API 응답에 항상 TypeScript 타입을 포함하세요
- 모든 비동기 작업에 적절한 로딩 상태와 오류 경계를 구��하세요
- 접근성 준수를 보장하려면 시맨틱 HTML 요소와 ARIA 속성을 사용하세요
피하기
- React Query 또는 Server Components를 사용할 수 있는 경우 데이터 가져오기에 useEffect를 사용하지 마세요
- 전용 데이터 가져오기 라이브러리가 있는 경우 서버 상태를 React state에 저장하지 마세요
- 접근성 테스트를 건너뛰거나 기본 HTML 동작으로 충분하다고 가단하지 마세요