React

repo-scan은 파일을 분류하고, 내장된 서드파티 라이브러리를 찾아내며, 무엇이 핵심이고 무엇이 중복되거나 불필요한지 판단하는 데 도움을 주는 크로스스택 소스 감사 skill입니다. Code Review, 레거시 마이그레이션, 리팩터링 계획 수립에 특히 유용합니다. skill 안에서 repo-scan install 및 repo-scan usage 가이드를 확인할 수 있습니다.

remotion-video-creation은 React 기반 영상 작업을 위한 Remotion 중심 스킬입니다. 애니메이션, 에셋, 오디오, 캡션, 차트, 컴포지션, 전환 등 29개 규칙으로 렌더링 실수를 줄이는 데 도움이 됩니다. Video Editing 워크플로, 템플릿형 설명 영상, 소셜 클립, 데이터 기반 모션 그래픽에 적합합니다.

frontend-patterns는 React와 Next.js 프론트엔드 개발에 실용적인 스킬로, 컴포넌트, 상태, 폼, 라우팅, 접근성, 성능에 대해 유지보수하기 좋은 패턴을 선택하도록 도와줍니다. 단순한 일반 모범 사례가 아니라 명확한 구현 가이드와 패턴 선택이 필요할 때 frontend-patterns 가이드를 활용하세요.

click-path-audit 스킬은 모든 상태 변화를 따라 UI 핸들러 흐름을 추적해, 리팩터링 이후나 코드 리뷰 중에 발생하는 순서 버그, 공유 상태 충돌, 최종 상태 불일치를 찾아내는 데 도움을 줍니다.

shadcn 스킬을 사용해 프로젝트 컨텍스트를 점검하고, 적절한 CLI 명령을 실행하며, 컴포넌트를 설치하고, base vs radix, 폼, 테마, 레지스트리에 대한 문서화된 패턴으로 UI를 구성할 수 있습니다.

frontend-design은 막연한 UI 아이디어를 실제 프론트엔드 코드와 뚜렷한 미적 방향성으로 구현해, 생산 단계에 바로 쓸 수 있는 개성 있는 인터페이스를 만들고 흔한 AI 스타일링을 줄여줍니다.

fullstack-developer skill은 React, Next.js, Node.js, API, 데이터베이스, 인증, 배포까지 아우르는 현대적 JavaScript·TypeScript 웹 앱 작업용 재사용 프롬프트 패키지입니다. 스크립트나 템플릿을 제공하기보다는, 단일 SKILL.md 파일로 적용 범위와 작업 흐름을 정의하는 방식이며, 여러 레이어를 함께 고려해야 하는 기획·구현 작업에 특히 잘 맞습니다.

prototype 스킬은 실제 구현에 들어가기 전에, 한 가지 구체적인 질문에 답해 주는 버릴 코드를 만들 때 도움이 됩니다. 로직, 상태 전환, 데이터 형태, 또는 UI 방향을 검증해야 할 때, 호스트 저장소의 규칙을 따르는 실행 가능한 프로토타입으로 빠르게 확인해 보세요. 최종 기능이 아니라 빠른 프로토타입 가이드가 필요할 때 가장 잘 맞습니다.

ui-ux-pro-max는 AI 기반 UI/UX 디자인을 위한 종합 스킬입니다. 웹과 모바일 프로젝트의 레이아웃, 스타일, 컬러 시스템, 타이포그래피, UX 규칙에 대해 체계적으로 안내하며, React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter, HTML/CSS 등 다양한 환경에서 실무 디자인 결정을 지원합니다. UI 기획, 리뷰, 개선에 활용할 수 있는 큐레이션된 디자인 인텔리전스를 제공합니다.

ckm:ui-styling은 shadcn/ui, Tailwind CSS, 캔버스 기반 비주얼 디자인을 활용해 접근성 높고 실전용 UI를 손쉽게 구현할 수 있도록 돕습니다. React 프로젝트에서 구조화된 반응형 레이아웃, 접근성 컴포넌트, 다크 모드, 일관된 디자인 시스템이 필요할 때 적합합니다. UI 디자인, 테마 적용, 빠른 프로토타이핑에 실용적이고 스택별 맞춤 가이드를 제공합니다.

design-system-patterns는 디자인 시스템과 컴포넌트 라이브러리를 위해 토큰 구조, 테마 아키텍처, 재사용 가능한 컴포넌트 API 패턴을 정리해 확장 가능한 UI 기반을 설계할 수 있도록 돕는 스킬입니다.

interaction-design 스킬은 팀이 목적 있는 UI 모션, 마이크로인터랙션, 전환, 로딩 상태, 피드백 패턴을 설계하고 구현할 수 있도록 실용적인 React 중심 참고 자료와 활용 가이드를 제공합니다.

web-component-design 스킬은 팀이 React, Vue, Svelte에서 재사용 가능한 UI 컴포넌트를 설계할 수 있도록 돕습니다. 디자인 시스템에 맞는 탄탄한 API 패턴, 접근성 가이드, 스타일링 선택지별 트레이드오프 참고 정보를 제공합니다.

react-state-management는 상태 유형, 앱 규모, 마이그레이션 필요성에 따라 Redux Toolkit, Zustand, Jotai, React Query, SWR, RTK Query 같은 React 상태 관리 도구를 선택하고 활용할 수 있게 돕는 실용적인 스킬입니다.

nextjs-app-router-patterns는 개발자가 Next.js 14+ App Router 아키텍처를 설계할 때 도움이 되는 스킬로, Server Components, streaming, caching, route handlers, Server Actions는 물론 전체 스택 개발과 Pages Router 마이그레이션까지 폭넓게 다룹니다.

react-native-architecture는 프로덕션용 React Native 및 Expo 앱을 설계할 때 라우팅, 상태 경계, 네이티브 모듈, 오프라인 우선 흐름, Expo와 bare 방식의 트레이드오프를 함께 검토할 수 있도록 돕습니다.

react-modernization은 React 16/17 앱을 18+로 업그레이드하고, 클래스 컴포넌트를 hooks로 전환하며, root API를 업데이트하고, codemod를 고려한 안내로 단계적 리팩터링을 계획할 때 유용한 마이그레이션 중심 스킬입니다.

vercel-react-native-skills는 성능을 중시하는 프런트엔드 개발을 위한 React Native 및 Expo 스킬입니다. 리스트 렌더링, 애니메이션, 네비게이션, UI 패턴, 상태 관리, 네이티브 모듈 설정을 개선하는 데 활용할 수 있습니다. 모바일 앱의 병목을 더 적은 시행착오로 다루도록 실용적인 규칙, 설치 가이드, 사용 패턴을 제공합니다.

vercel-composition-patterns는 프런트엔드 개발을 위한 React 컴포지션 스킬로, boolean prop이 난립하는 구조를 compound components, 명시적 variants, 상태 끌어올리기, 그리고 React 19-safe APIs로 대체하는 데 도움을 줍니다. 컴포넌트 아키텍처를 점검하고, 재사용 가능한 UI API를 개선하고, 확장 가능한 프런트엔드 코드에 맞는 컴포지션 패턴을 고를 때 활용하세요.

vercel-react-best-practices는 Vercel Engineering에서 만든 스킬로, AI 에이전트가 React와 Next.js 성능을 최적화하도록 워터폴, 번들 크기, 렌더링 관련 우선순위 규칙을 안내합니다.

overdrive는 맥락 파악, 제안 우선 계획, 뛰어난 인터랙션 품질을 중시하는 야심찬 UI 디자인 작업을 위한 GitHub 스킬입니다. 시네마틱 전환, 반응형 인터페이스, 임팩트 있는 제품 경험에 overdrive를 설치하고 적용할 때 사용하세요.

optimize 스킬은 로딩 속도, 렌더링, 애니메이션, 이미지, 번들 크기 전반의 UI 성능 문제를 진단하고 개선합니다. 느리거나 버벅이거나 끊기는 웹 경험을 측정부터 체계적으로 점검해야 할 때, 성능 최적화를 위한 구조화된 optimize 가이드로 활용하기 좋습니다.

source-driven-development 스킬은 공식 문서를 기준점으로 삼아 프레임워크별 코드를 작성하도록 도와주며, 구현 전에 패턴을 먼저 검증할 수 있게 해줍니다. 정확성, 출처 근거, 버전별 판단이 중요한 React, Vue, Next.js, Svelte, Angular 같은 스택에서 source-driven-development 활용에 특히 적합합니다.

performance-optimization 스킬은 먼저 측정하고, 실제 병목을 찾아 수정한 뒤, 결과를 검증하도록 돕습니다. 성능 요구사항이 있거나 회귀가 의심될 때, 또는 Core Web Vitals, 로딩 시간, 상호작용 지연 개선이 필요할 때 사용하세요.