스킬 자체의 표현으로
Puppeteer로 헤드리스 Chrome을 실행해 실행 중인 웹 앱에서 완전히 렌더링된 DOM을 캡처하고, CSSOM 규칙을 인라인화하며 이미지를 base64 데이터 URI로 변환하여 하나의 독립형 HTML 파일을 생성합니다. React/Vite, Next.js, Angular, Vue/Nuxt, Svelte, Storybook 등 어떤 프레임워크에서도 작동하며 MockPage.jsx가 필요하지 않습니다.
이 Skill은 진행하기 전에 에이전트가 두 가지 캡처 전략 중 어느 것을 사용할지 묻도록 강제하며, Puppeteer 스냅샷을 권장하고 로컬 서버가 시작된 후 확인을 위해 멈춥니다. 플래그는 대기 시간, 뷰포트, 다크 모드, 고정 요소 제거, 캔버스 인라인화, 로그인이 필요한 페이지를 위한 인증 스크립트를 다룹니다. 문서화된 부록에서는 앱을 로컬에서 실행할 수 없을 때 React 컴포넌트를 수동 MockPage.jsx로 평탄화합니다.
산출물
- 캡처한 각 경로마다 스타일이 인라인화되고 이미지가 base64로 임베드된 독립형 HTML 파일입니다.
- 여러 화면(예: 홈, 가격, 대시보드)을 캡처할 때 경로마다 하나의 파일이 생성됩니다.
- canvas 플래그를 사용할 때 캔버스 요소에서 직렬화되어 base64 이미지로 변환된 차트입니다.
작동 방식
- 01사용자가 전략을 선택하도록 하기
추출 전에 에이전트는 A/B 비교를 제시하고, Puppeteer 방식을 권장하며, 명시적인 선택을 기다립니다.
- 02경로별로 스냅샷 스크립트 실행하기
URL마다 하나의 명령을 실행하며, 네트워크가 유휴 상태가 된 뒤 고정된 대기 시간을 두고 각 캡처를 .stitch 안의 개별 파일에 기록합니다.
- 03스크립트가 페이지를 인라인화하도록 하기
CSSOM 규칙, 연결된 스타일시트, 이미지, srcset 소스, 동일 출처 아이콘 폰트가 파일에 포함되므로 실행 중인 서버에 의존할 필요가 없습니다.
- 04프레임워크에 맞게 플래그 조정하기
대기 시간과 URL은 스택마다 다르며, 예를 들어 서버 렌더링된 마크업을 하이드레이션하는 프레임워크는 더 긴 대기 시간이 필요합니다.
- 05인증이 필요한 페이지 인증하기
인증 모듈이 Puppeteer 세션 내부에서 실행되며, 그 후 스크립트는 세션이 유지된 상태로 원래 URL로 돌아갑니다.
- 06필요할 때만 목(mock)으로 대체하기
앱이 전혀 부팅되지 않을 때는 실제 렌더링을 캡처하는 대신 부록 경로가 컴포넌트를 하나의 JSX 파일로 평탄화합니다.