Vue Router 탐색 가드와 라이프사이클 패턴은 종종 디버깅하기 어려운 버그를 발생시킵니다. 이 기술은 가드 구현, 라우트 매개변수 변경 및 구성 요소 정리를 포함하여 일반적인 Vue Router 4 문제에 대한 검증된 솔루션을 제공합니다.

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

개발자들이 Vue.js Options API TypeScript 통합과 일반적인 함정에 어려움을 겪습니다. 이 스킬은 Vue 2와 Vue 3에서 타입 안전 Options API 코드를 위한 검증된 패턴과 솔루션을 제공합니다.

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

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

Vue 프로젝트는 종종 반응성 버그와 일관성 없는 패턴으로 고통받습니다. 이 기술은 Vue 3 Composition API, SSR, TypeScript 지침을 구체적인 권장 사항과 권장하지 않는 예시와 함께 제공합니다.

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

Playwright 테스트는 종종 불안정성, 느린 실행 및 유지 관리성 문제로 고통받습니다. 이 스킬은 8개 범주로 구성된 40가지 이상의 검증된 모범 사례를 기준으로 TypeScript 테스트 코드를 검토하며, 명확한 예시와 함께 구체적인 개선 사항을 제안합니다.

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

Claude는 설정된 웹 디자인 가이드라인에 대해 UI 코드를 자동으로 검토하여 배포 전에 접근성 문제, 사용성 문제, 모범 사례 위반을 발견할 수 있습니다. 이 스킬은 최신 가이드라인을 가져오고 개선점을 식별하기 위한 정적 분석을 수행합니다.

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

Next.js 패턴에 대해 추측하기 멈추고 확장 가능한 코드를 작성하세요. 이 스킬은 파일 규칙, React Server Components, 데이터 페칭, 오류 처리, 배포 모범 사례에 대한 Vercel의 공식 지침�� 제공합니다.

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

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