프로젝트 소개

App Store 및 Google Play 스크린샷 생성기는 AI 코딩 에이전트(Claude Code, Cursor, Windsurf, OpenCode, Codex)를 위한 스킬로, 앱 스토어 마케팅 스크린샷을 제작하기 위한 프로덕션 준비 완료된 Next.js 편집기를 스캐폴딩합니다. 정적인 일회성 페이지 대신, 기기 프레임, 캡션, 장식 요소가 인접한 스크린샷에 걸쳐 확장될 수 있는 연결된 캔버스를 갖춘 완전한 비주얼 편집기를 생성하며, 레거시 덱을 위한 격리 모드도 제공합니다. 편집기는 라이브 썸네일과 함께 슬라이드를 추가, 선택, 재정렬할 수 있는 화면 사이드바를 제공합니다. 레이아웃, 라벨, 헤드라인, 스크린샷, 요소 스태킹 및 변환을 편집할 수 있는 검사기 패널, iOS 및 Android 덱을 나란히 유지하는 플랫폼 전환기, iPhone, iPad, Android 휴대폰, Android 태블릿 및 Play Store 기능 그래픽 형식을 포함하는 기기 선택기를 제공합니다. 프로젝트는 `app-store-screenshots.json`(git 추적 가능)에 저장되며, 업로드된 스크린샷은 `public/screenshots/uploaded/` 아래에 저장됩니다. 자동 저장은 `/api/project`를 통해 디스크에 기록되고 `localStorage`에 미러링되어 즉시 다시 로드할 수 있습니다. 내보내기 번들은 플랫폼, 기기, 해상도 및 로케일별로 구성된 ZIP 파일로 다운로드되며, App Store 및 Google Play의 정확한 크기 요구 사항을 충족합니다. 이 도구는 여러 로케일, RTL 인식 카피/레이아웃 지침, 재사용 가능한 테마 및 제자리 프로젝트 마이그레이션을 지원합니다. 소스 스크린샷은 플랫폼별 최대 크기로 설계되고 더 작은 내보내기를 위해 축소됩니다. 설치는 `npx skills add ParthJadhav/app-store-screenshots`(전역 또는 에이전트별) 또는 수동 git clone을 통해 이루어집니다. 사용법: 코딩 에이전트에게 스크린샷 제작을 요청하고, 앱 컨텍스트, 소스 캡처, 플랫폼, 로케일, 비주얼 방향 및 슬라이드 수를 제공합니다. 스캐폴딩된 Next.js 프로젝트는 React, TypeScript, Tailwind CSS, shadcn/ui, html-to-image, JSZip, dnd-kit 및 react-rnd를 사용합니다. Node.js 18+ 및 패키지 매니저가 필요합니다.