TL;DR

이 레포지토리는 Claude Code와 Cursor 같은 AI coding agent가 App Store 및 Google Play marketing screenshot용 Next.js editor를 자동으로 scaffold하도록 하는 skill이다. 생성된 editor는 connected canvas와 isolated mode를 제공하고, 실제 기기 프레임과 문구를 inspector에서 조정한 뒤 플랫폼·기기·locale별 PNG bundle을 export한다. 프로젝트 상태는 `app-store-screenshots.json`에 저장되고 업로드한 캡처는 `public/screenshots/uploaded/`에 남아 Git으로 재현할 수 있다. 다국어와 RTL 레이아웃, reusable theme, Apple 및 Google Play의 지정 export 크기가 필요하고 에이전트 기반 제작을 받아들일 때 사용 가치가 높다.

핵심 포인트

• 이 레포지토리는 독립 실행형 앱이 아니라 AI coding agent용 skill이다. Claude Code, Cursor, Windsurf, OpenCode, Codex 등 `skills`가 지원하는 환경에 설치하면 Next.js 기반 screenshot editor를 생성한다. 따라서 기존 앱에 붙이는 library보다 에이전트에게 제작 작업을 맡기는 workflow에 적합하다.
• 생성된 editor는 여러 화면을 하나의 connected canvas에서 배치하고, 화면 경계를 넘는 기기 프레임과 장식 요소를 조정한다. Sidebar와 inspector에서 화면 순서, 문구, 이미지, 레이아웃, transform을 수정하며 `app-store-screenshots.json`에 상태를 저장한다. Connected mode와 Isolated mode를 나눠 기존 프로젝트의 화면별 export 동작도 보존한다.
• 원본 앱 캡처를 `public/screenshots/uploaded/<hash>.png`에 저장한 뒤 플랫폼과 기기별 최대 해상도에 맞춰 PNG를 렌더링하고 JSZip으로 묶는다. Apple App Store의 6.9인치 1320 x 2868부터 Google Play Feature graphic 1024 x 500까지 정해진 크기를 지원한다. iPhone은 포함된 `mockup.png` bezel을 사용하고 Android frame은 CSS로 렌더링한다.
• 다국어와 RTL-aware copy/layout guidance, reusable themes, schema v2 migration을 지원해 여러 지역용 screenshot deck을 반복 제작할 수 있다. 업로드 파일과 JSON을 함께 Git에 커밋하면 fresh clone 뒤에도 deck을 재현할 수 있다. 다만 Node.js 18+와 JavaScript 패키지 실행 환경이 필요하고, 실제 앱 캡처와 최종 문구는 사용자가 준비해야 한다.

이미지 분석