기존 스크린샷을 PR 전후 비교 블록에 붙이기

누구를 위한가

이 스킬은 스크린샷이나 화면 녹화가 이미 있고, 이를 GitHub Pull Request에 전후 비교 블록으로 붙이고 싶은 사람을 위한 것입니다. 에이전트 스킬이며, 기존 미디어만 다루고 페이지를 대신 캡처하지 않습니다. 로컬에 agent-browser가 있고 GitHub CLI가 2.99+라서 gh --attach를 쓸 수 있는 사람에게도 맞습니다.

아직 미디어 파일이 없고 URL을 열어 화면을 녹화해 주기를 기대하는 사람에게는 맞지 않습니다. 원문은 agent-browser를 감싸지 않고, URL을 가져오지 않고, Vercel 인증을 관리하지 않고, 영상을 트랜스코드하지 않고, 미디어를 호스트하지 않는다고 적습니다. 아직 npx를 실행할 수 없거나 CLI 버전이 부족하면 설명을 읽는 데에서 멈추세요.

공식 저장소는 https://github.com/vercel-labs/before-and-after 입니다. 그 페이지에 이미 적힌 명령을 따르세요.

3분 만에 첫 시도

공식 문서가 적은 이 한 스킬 설치 경로만 따르세요.

선행 조건: 이 기기에서 npx를 실행할 수 있고, agent-browser가 설치되어 있으며, GitHub CLI가 2.99 이상이어야 합니다. 먼저 확인하세요. 아래 명령은 현재 에이전트에 스킬을 넣습니다. 아직 에이전트 스킬 디렉터리를 바꾸고 싶지 않다면 실행하지 마세요. 이 단계에서는 실제 PR에 첨부하지 말고 gh --attach도 호출하지 마세요.

설치 위치: 위 부작용을 확인한 뒤 프로젝트 루트에서 실행합니다.

npx skills add vercel-labs/before-and-after#main

저위험 확인: 설치가 끝나면 에이전트에게 무엇을 할지 다시 말하게만 하세요. 기존 스크린샷과 녹화를 PR 전후 비교 블록에 붙이고, <!-- before-and-after:start/end --> 마커를 한 곳만 멱등으로 바꾸며 나머지 설명은 건드리지 않는다는 것입니다. PR을 수정하게 하지 마세요. URL을 열거나 영상을 변환하게 하지 마세요.

성공 신호: 스킬 설치가 끝나고, 에이전트가 기존 미디어가 필요하며 gh --attach가 필요하고 파일을 가져오거나 호스트하지 않는다고 인정하는 것입니다. 화면 녹화를 시작하거나 다른 설치 명령을 만들어 내면 멈추세요.

사용 사례

사례 1: 미디어가 이미 있는 PR에 전후 비교를 붙입니다. 공식 설치 명령은 npx skills add vercel-labs/before-and-after#main입니다. 설치한 뒤 댓글이나 설명에 기존 스크린샷과 녹화를 준비한 다음 에이전트에게 첨부하게 하세요. gh --attach는 원격 PR을 바꾸므로, 실행 전에 공개 가능한 테스트 PR인지와 미디어 경로가 실제로 있는지 확인하세요.

사례 2: 반복 실행 시 마커 블록만 업데이트합니다. 원문은 <!-- before-and-after:start/end --> 블록을 한 곳 멱등으로 바꾸고 나머지 PR 설명은 건드리지 않는다고 적습니다. 한 번 첨부한 뒤 비교 영역만 바꾸고 싶은 사람에게 맞습니다. 먼저 설명에 해당 마커가 있는지 읽기 전용으로 확인하세요. 마커가 없을 때 원문은 설명 전체를 어떻게 새로 만드는지 쓰지 않았으므로 가정하지 마세요.

사용 경계

의존성은 단호합니다. agent-browser와 GitHub CLI 2.99+(gh --attach용)가 필요합니다. 어느 하나라도 없으면 억지로 첨부하지 마세요. 명시적으로 하지 않는 일: agent-browser 감싸기, URL 가져오기, Vercel 인증 관리, 영상 변환, 미디어 호스트.

원문에 적힌 설치 명령은 하나뿐이며 #main이 붙습니다: npx skills add vercel-labs/before-and-after#main. 나타나지 않은 태그이나 설치 프로그램으로 바꾸지 마세요. 공식 페이지는 https://github.com/vercel-labs/before-and-after 입니다. 에이전트가 제안하는 명령에서 #main이 빠지면 그 페이지를 기준으로 하세요.