Vue 애플리케이션은 종종 반응성 손실, 초기화 오류, 디버깅 도전과 같은 상태 관리 문제를 직면합니다. 이 기술은 Vue 3 애플리케이션에서 Pinia 스토어를 올바르게 구현하기 위한 검증된 패턴과 솔루션을 제공합니다.

Vue.js 프로젝트는 종종 불명확한 데이터 흐름과 반응성 오류로 인해 어려움을 겪습니다. 이 스킬은 올바른 상태 관리, 컴포넌트 패턴 및 데이터 흐름 아키텍처를 포함하여 Vue 3 및 Nuxt 3 개발을 위한 포괄적인 모범 사례를 제공합니다.

Vue 3 애플리케이션은 디버깅이 어려운 런타임 오류, 경고 메시지, 비동기 실패 및 SSR 하이드레이션 문제에 직면합니다. 이 스킬은 100개 이상의 일반적인 Vue 3 개발 문제에 대한 포괄적인 디버깅 가이드와 솔루션을 제공합니다.

유연한 입력 유형으로 Vue 컴저저블을 만드는 것은 어렵습니다. 이 스킬은 MaybeRef 및 MaybeRefOrGetter 타입을 사용하여 반응형과 비반응형 입력을 모두 허용하는 라이브러리급 컴저저블을 구축하기 위한 패턴을 제공합니다.

개발자는 복잡한 오디오 인프라를 관리하지 않고도 애플리케이션에 음성 출력을 추가할 간단한 방법이 필요합니다. 이 스킬은 간단한 API 호출을 통해 OpenAI의 TTS-1-HD 모델에 직접 접근할 수 있도록 합니다.

오디오 녹음을 수동으로 텍스트로 변환하는 것은 느리고 오류가 발생하기 쉽습니다. 이 스킬은 OpenAI Whisper를 사용하여 오디오 파일을 전사하는 간단한 API를 제공하여 몇 초 만에 정확한 텍스트를 반환합니다.

Monorepo 빌드 시스템은 구성하기 복잡할 수 있습니다. 이 스킬은 JavaScript와 TypeScript 프로젝트의 Turborepo 파이프라인, 태스크 의존성, 캐싱 전략, CI 통합 설정을 위한 전문적인 가이드를 제공합니다.

React 앱에 부드러운 페이지 전환과 공유 요소 애니메이션을 추가하려면 View Transitions API와 통합 패턴을 이해해야 합니다. 이 스킬은 Vercel Labs의 단계별 안내, CSS 레시피, Next.js 패턴을 제공합니다.

성능 높은 React Native 앱 구축에는 리스트, 애니메이션, 상태 관리에 관한 플랫폼별 패턴을 따라야 합니다. 이 스킬은 최적화된 모바일 개발을 위한 35개 이상의 AI 에이전트 규칙을 제공합니다.

React 애플리케이션은 불필요한 재렌더링, 큰 번들 크기, 순차적 데이터 가져오기 워터폴과 같은 성능 문제를 자주 발생시킵니다. 이 스킬은 Vercel 엔지니어링의 45가지 우선순위 규칙을 제공하여 이러한 병목 현상을 제거하고 고성능 웹 애플리케이션을 구축하는 데 도움을 줍니다.

불리언 props로 React 컴포넌트를 구축하면 유지보수가 어려운 코드가 됩니다. 이 기술은 복합 컴포넌트 사용, 상태 끌어올리기, 내부 컴포지션을 통해 확장 가능한 컴포넌트 아키텍처를 생성하기 위한 AI 준비 가이드라인을 제공합니다.

사용자는 Claude Code용 효과적인 스킬을 만들기 위한 안내가 필요합니다. 이 스킬은 검증된 모범 사례를 통해 스킬을 구축, 구조화 및 패키징하는 종합 가이드를 제공합니다.

Claude, Codex 및 Claude Code를 위한 AI 기술

An AI skill for Claude, Codex, and Claude Code

Next.js 애플리케이션은 데이터를 반복적으로 가져와 페이지 로딩이 느려지는 경우가 많습니다. 캐시 컴포넌트는 부분 사전 렌더링과 지능형 캐싱 전략을 통해 동적 부분을 스트리밍하면서 캐시된 콘텐츠를 즉시 제공합니다.

사용자는 작업을 도와주는 스킬이 무엇이 있는지 모르는 경우가 많습니다. 이 스킬은 오픈 에이전트 생태계에서 관련 기능을 발견하고 간단한 명령어로 설치하도록 안내합니다.

Dogfood 는 웹 애플리케이션을 체계적으로 탐색하여 버그, UX 문제 및 기타 문제를 찾고, 스크린샷과 동영상 등 모든 재현 증거를 포함한 구조화된 보고서를 생성합니다.

수동으로 프로젝트를 Vercel 에 배포하려면 시간이 걸리고 대시보드를 탐색해야 합니다. 이 스킬은 자동 프레임워크 감지 및 미리보기 URL 생성을 통해 전체 배포 워크플로우를 자동화합니다.

웹 상호작용을 수동으로 자동화하면 시간이 많이 들고 오류가 발생하기 쉽습니다. Agent-browser는 자동화된 양식 작성, 스크린샷 캡처, 웹 스크래핑 및 종단 간 테스트 워크플로를 가능하게 하는 브라우저 자동화를 위한 명령줄 인터페이스를 제공합니다.

AI 기능 구축은 복잡한 제공자 API, 스트리밍 구현, 타입 안전 패턴을 탐색해야 합니다. 이 기술은 Vercel AI SDK에 대한 포괄적인 문서 레퍼런스를 제공하여 개발자들이 통합 API를 통해 OpenAI, Anthropic, Google 및 기타 제공자와 함께 텍스트 생성, 도구 호출, 구조화된 출력, 에이전트를 구현할 수 있도록 돕습니다.