shopify-apps
모던 패턴으로 Shopify 앱 구축하기
Shopify 앱 개발은 복잡한 통합 패턴에 대한 이해가 필요합니다. 이 스킬은 임베디드 앱, 웹훅 처리, GraphQL API 사용에 대한 검증된 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"shopify-apps" 사용 중입니다. 요청: 제품 업데이트를 위한 웹훅 핸들러 생성
예상 결과:
HMAC 검증 미들웨어, 큐 기반 비동기 처리, 대용량 작업을 위한 백그라운드 잡과 함께 Shopify 의 200ms 응답 요구사항을 준수하는 Express 라우트를 생성합니다.
"shopify-apps" 사용 중입니다. 요청: 임베디드 앱 네비게이션 구축
예상 결과:
어드민 섹션으로 연결되는 navigation 블록, 적절한 라우트 인식, Polaris 네비게이션 스타일을 포함한 App Bridge 네비게이션 컴포넌트를 생성합니다.
보안 감사
안전Static analyzer flagged two false positives for weak cryptographic algorithms at SKILL.md lines 3 and 46. Both are documentation text, not executable code. Line 3 mentions HMAC verification as a best practice. Line 46 is descriptive text. This is a documentation skill with no code execution risk.
품질 점수
만들 수 있는 것
Shopify 앱 스캐폴드
신속한 프로젝트 초기화를 위해 Remix, App Bridge, Polaris 를 포함한 완전한 Shopify 앱 구조를 생성합니다.
웹훅 핸들러 구현
적절한 HMAC 검증과 비동기 처리 패턴을 갖춘 안전한 웹훅 엔드포인트를 생성합니다.
GraphQL API 통합
제품, 주문, 고객 관리를 위한 효율적인 GraphQL 쿼리와 뮤테이션을 구축합니다.
이 프롬프트를 사용해 보세요
App Bridge 통합이 포함된 Remix 를 사용하여 Shopify 앱을 생성하세요. 임베디드 앱을 위한 기본 파일 구조, package.json 의존성, 주요 진입점을 포함하세요.
orders/create 웹훅을 위한 웹훅 핸들러를 생성하세요. HMAC 서명 검증, 큐를 사용한 비동기 처리, 재시도 로직을 위한 적절한 오류 처리를 포함하세요.
Shopify 제품을 표시하기 위한 Polaris IndexTable 컴포넌트를 생성하세요. 제목, 벤더, 가격, 재고에 대한 열 정의를 포함하세요. 생성일 기준 정렬과 벤더별 필터링을 추가하세요.
로케이션별 재고 수준을 포함한 변형 제품이 있는 제품을 가져오기 위한 GraphQL 쿼리를 작성하세요. 커서 기반 탐색을 통한 페이지네이션 지원을 추가하세요.
모범 사례
- 더 나은 성능과 유연성을 위해 새로운 개발에는 REST 대신 GraphQL Admin API 를 사용하세요
- Shopify 타임아웃을 방지하기 위해 웹훅을 비동기로 처리하고 200ms 이내에 응답하세요
- 고객 데이터 액세스 스코프는 필요한 경우에만 요청하고 GDPR 삭제 요청을 처리하세요
피하기
- GraphQL 이 더 나은 기능을 제공하는 경우 새 앱 개발에 REST API 사용
- Shopify 200ms 응답 타임아웃을 초과하는 동기식 웹훅 처리
- 실시간 업데이트를 위해 웹훅을 사용하는 대신 Shopify API 를 폴링