프로젝트 스크린샷 프레이밍은(는) 무엇을 하나요?

현재 프로젝트에서 가장 중요한 페이지들을 스크린샷으로 찍은 후 프레임을 입힙니다. 이 스킬은 페이지 발견, 앱 준비, 원본 스크린샷 품질을 담당합니다. 필수 서브 스킬: generate-frame은 프레이밍과 커버를 담당합니다. 먼저 1단계를 실행하여(frame-kit을 찾고 확인) 실패하면 중단하세요. <frame-kit>은 해당 스킬이 해석한 경로입니다.

출력물은 절대 섞이지 않습니다: 원본 → ~/Pictures/<project>-portfolio/raw/, 프레이밍됨 → ~/Pictures/<project>-portfolio/framed/.

1. 스캔

사용자 대상 페이지를 찾습니다: 라우트, 페이지/뷰 컴포넌트, 관리자 리소스(Filament, Nova…), 네비게이션 메뉴. 앱 실행 방법, 존재하는 역할, 각 역할이 볼 수 있는 페이지를 코드에서 읽어내십시오. 포트, URL 또는 로그인 정보를 추측하지 말고 앱을 실행하거나 질문하여 확인하세요.

2. 최대 5개 제안

이 제품이 어떤 종류인지 결정한 후, 제품이 실제로 하는 일을 가장 잘 보여주는 순서로 페이지를 순위 매깁니다. 질문은: 낯선 사람이 이 제품을 한 장의 이미지로 이해하게 만드는 것은 무엇인가? 입니다.

제품 유형	가장 강력한 페이지
비즈니스/관리 앱 (POS, CRM, 재고)	실제 행이 있는 핵심 워크플로우, 그 다음 대시보드, 데이터가 풍부한 목록
대시보드/분석	메인 대시보드, 하나의 드릴다운, 하나의 보고서
콘텐츠/마케팅/전자상거래 사이트	랜딩/히어로, 목록 페이지, 상세 페이지, 장바구니 또는 결제
에디터/빌더/창의 도구	콘텐츠가 포함된 캔버스, 그 다음 갤러리 또는 프로젝트 목록
개발자 도구/문서	사용 중인 메인 UI, 결과/출력 보기

로그인 페이지, 빈 폼, 설정, 에러 페이지, 거의 중복되는 페이지는 건너뜁니다. 5개 미만이어도 괜찮습니다. 각각 이름, 경로, 역할, 한 줄 이유와 함께 나열하세요.

3. 질문

AskUserQuestion, multiSelect (질문당 최대 4개 옵션; 필요한 경우 두 개의 질문으로 나누세요). 사용자가 선택하기 전에 캡처가 시작되지 않아야 합니다. 또한 앱에 라이트/다크 테마가 모두 있는 경우 어떤 테마를 사용할지, 어떤 역할/계정을 사용할지 물어보세요. 자격 증명은 사용자 환경 또는 기존 세션에서 가져오며, 스크립트, 파일 또는 출력에 절대 작성하지 말고, 접근 제어를 우회하지 마십시오(선택한 역할이 볼 수 없는 페이지는 강제로 열지 않고 건너뜁니다).

4. 앱 준비

앱이 실행 중이지 않으면 사용 가능한 포트에서 시작하고, 시작한 앱은 반드시 중지하십시오.
선택한 페이지를 엽니다. 비어 있거나 플레이스홀더 데이터만 있다면 -> 그렇게 말하고 현실적인 데모 데이터를 제안하세요. 시딩은 명시적인 동의가 필요하며, 별도 또는 임시 데이터베이스에 진행하고, 개발 데이터베이스는 동의 없이 절대 건드리지 않습니다. 데이터베이스 쓰기보다 UI가 생성할 수 있는 상태(장바구니에 항목 추가)를 선호합니다.
사용자 프로젝트에 의존성이나 파일을 추가하지 마세요. 스크립트는 스크래치패드에 저장됩니다.

5. 캡처

<this skill>/scripts/capture.mjs에서 capturePages를 가져오는 스크래치패드 스크립트를 작성하세요:

import { capturePages } from '<this skill>/scripts/capture.mjs';
const results = await capturePages({
  frameKit: '<frame-kit>', outDir: '<raw dir>', colorScheme: 'light',   // 배치에 사용할 하나의 색상
  storageState: process.env.APP_STORAGE_STATE,        // 저장된 세션; 또는 login: async (page) => {...} 로 process.env를 읽음
  setup: (ctx) => ctx.addInitScript(() => localStorage.setItem('theme', 'light')),  // 앱 자체 테마 스위치가 있다면
  pages: [{ name: '01-dashboard', url: 'http://localhost:8000/admin', prepare: async (page) => { /* 장바구니 열기, 투어 닫기… */ } }],
});
console.log(JSON.stringify(results, null, 2));

이 함수는 배치 전체에 대해 하나의 1440×900 @2x 컨텍스트를 사용하며(PNG는 2880×1800), 네트워크 유휴, 폰트 및 지연 콘텐츠를 기다리고, 페이지당 issues를 보고합니다: 콘솔/페이지 오류, HTTP ≥ 400, 리디렉션(보통 로그인 누락), 깨진 이미지, 보이는 스피너/스켈레톤, 오버레이/쿠키 배너, 빈 차트 컨테이너. 파일 이름은 제안 순서대로 NN-<slug>.png로 지정합니다. loadingSelectors/overlaySelectors/hideCss를 통해 앱의 자체 선택자를 전달합니다(토스트, 디버그 바 등).

대화형 화면(장바구니, 편집기, 보드)에는 prepare에서 먼저 샘플 콘텐츠를 추가해야 합니다.

이슈가 있는 모든 페이지에 대해: 수정(오버레이 닫기, 요소 대기, 로그인)하고 해당 페이지만 다시 촬영하세요. 또는 사용자에게 수정 불가능하다고 알리고 제외하세요. 무해하다고 판단되는 경고(예: 파비콘 404)는 괜찮습니다. 그렇게 말하세요. 그런 다음 모든 PNG를 읽으세요: 실제 콘텐츠, 반쯤 로딩된 것 없음, 게시되어서는 안 되는 개인 데이터(이메일, 토큰, 실제 고객 이름) 없음; 확실하지 않으면 사용자에게 확인하세요.

6. 프레이밍

generate-frame의 2~4단계를 raw 폴더를 입력으로 실행하세요: --out <framed dir>, --url "<app host>/{name}", --resolution 하나(기본값 max). 부분 실패는 숨기지 말고 보고하세요: 실패한 파일만 다시 촬영하거나 다시 프레이밍합니다. raw 폴더, framed 폴더, 커버 쌍, 제외된 페이지와 그 이유, 그리고 모든 제한 사항(예: 이미지 미검사)을 보고하세요.

프로젝트 스크린샷 프레이밍