vercel-react-best-practices
정보
이 스킬은 Vercel의 React 및 Next.js 성능 최적화 가이드라인을 8개 카테고리, 총 57개의 우선순위 규칙으로 제공합니다. 재렌더링, 번들 크기, 데이터 페칭 패턴과 같은 성능 문제를 해결하기 위해 코드 작성, 리뷰 또는 리팩터링 시 활용하세요. 서버/클라이언트 컴포넌트, Suspense, React 훅을 포함한 주요 최적화 영역을 다룹니다.
빠른 설치
Claude Code
추천npx skills add TechNickAI/ai-coding-config -a claude-code/plugin add https://github.com/TechNickAI/ai-coding-configgit clone https://github.com/TechNickAI/ai-coding-config.git ~/.claude/skills/vercel-react-best-practicesClaude Code에서 이 명령을 복사하여 붙여넣어 스킬을 설치하세요
GitHub 저장소
연관 스킬
chatbot-widget-creator
기타이 스킬은 프론트엔드 통합용으로 제작 준비가 완료된 ChatGPT 스타일 챗봇 위젯을 생성합니다. 무한 재렌더링 방지, 텍스트 선택 "Ask AI" 기능, RAG 백엔드 및 SSE 스트리밍과의 즉시 통합 등 핵심 기능을 포함합니다. 검증되고 모니터링되는 채팅 인터페이스를 신속하게 배포하는 데 사용하세요.
chatbot-widget-creator
기타이 스킬은 일반적인 프론트엔드 문제에 대한 내장 솔루션을 갖춘 프로덕션 준비 완료 ChatGPT 스타일 챗봇 위젯을 생성합니다. 무한 재렌더링 방지, 텍스트 선택 "Ask AI" 기능, 스트리밍 SSE 및 RAG 백엔드에 대한 통합 지원을 제공합니다. 웹 애플리케이션에서 모니터링 가능한 고성능 채팅 인터페이스를 신속하게 구현할 수 있습니다.
typescript-docs
기타이 스킬은 JSDoc과 TypeDoc을 활용해 API 레퍼런스, 아키텍처 결정 기록(ADR), 프레임워크별 예제를 포함한 포괄적인 TypeScript 문서를 생성합니다. 모듈 자동 문서화, 다양한 대상에 맞는 다층적 문서 작성, NestJS, Express, React, Angular, Vue 프로젝트의 문서 구축에 활용할 수 있습니다.
react-patterns
기타이 스킬은 React 19의 최신 패턴인 서버 컴포넌트, 액션, `useOptimistic`과 같은 훅에 대한 전문적인 안내를 제공합니다. 현대적인 React 애플리케이션을 구축할 때 컴포넌트 아키텍처, 상태 관리, 성능 최적화에 활용하세요. 동시성 기능, Suspense, TypeScript 개발 구현을 적극적으로 지원합니다.