albertirgi/replica

replica은(는) 무엇을 하나요?

사용자가 가리키는 것을 재구축하고 증명하세요. capture는 참조를 측정된 사실의 청사진으로 변환합니다. 청사진을 기반으로 빌드합니다. compare는 빌드를 네 가지 축(레이아웃, 스타일, 픽셀, 모션)으로 평가하고 어떤 수정이 가장 큰 점수 향상을 가져오는지 알려줍니다. compare가 종료 코드 0을 반환할 때까지 완료되지 않았다고 간주하며, 빌드가 눈에 보기에 좋아 보여도 안 됩니다.

<skill>은 이 SKILL.md가 있는 디렉터리를 의미합니다.

규칙

1. 측정하고, 추측하지 마세요. 모든 크기, 색상, 폰트, 간격, 지속 시간 및 이징은 blueprint.md, blueprint.json 또는 보고서에서 가져와야 합니다. 이 사이트가 일반적으로 어떻게 보일지에 대한 기억을 사용하지 마세요.
2. 점수를 속이지 마세요. 참조의 스크린샷이나 비디오 프레임을 임베드하거나, 참조를 iframe이나 프록시로 사용하거나, 렌더링된 HTML을 통째로 붙여넣거나, .replica/ 아래의 어떤 것도 수정하거나, --level을 낮춰 통과하지 마세요. 사용자의 스택에서 실제 UI를 빌드하세요.
3. 프로젝트의 스택을 사용하세요. package.json과 가장 가까운 기존 컴포넌트를 먼저 읽으세요. 이미 사용 중인 프레임워크, 스타일링 접근 방식 및 애니메이션 라이브러리를 일치시키세요. 참조에 프로젝트가 할 수 없는 기능이 필요한 경우에만 종속성을 추가하세요.
4. 보고서 순서대로, 한 번에 몇 개씩 수정하세요. 상위 항목은 종종 하위 항목의 원인이 됩니다. 하나의 캐스케이드 수정으로 수십 개의 요소가 이동할 수 있습니다. 각 배치 후 compare를 다시 실행하세요. 열 개의 추측성 변경을 쌓지 마세요.
5. 소유권을 존중하세요. 참조의 폰트, 이미지, 아이콘 및 복사본은 해당 소유자에게 속합니다. 사용자가 자신의 에셋과 복사본을 가지고 있으면 그것을 사용하세요. 그렇지 않으면 물어보거나, 동일한 치수의 플레이스홀더를 사용하고 data-replica="placeholder"로 표시하세요. compare는 여전히 박스를 확인하지만 픽셀 점수에서는 해당 픽셀을 제외합니다. 최종 메시지에서 재사용한 참조 에셋을 명시하세요.

0. 범위

다음을 결정하고 첫 번째 메시지에 명시하세요.

• 대상 (Target): URL 또는 파일, 그리고 어떤 부분인지: 섹션이나 컴포넌트의 CSS 선택자, 또는 비디오의 시간 범위.

• 목적지 (Destination): 사용자 프로젝트의 파일 또는 라우트, 그리고 스택.

• 수준 (Level): compare가 적용할 기준을 설정합니다.

  수준	사용자가 말할 때	통과 조건 (모두 통과 필요)
  structure	"같은 레이아웃/느낌이지만 우리 브랜드로", "X처럼, 우리 콘텐츠로"	layout ≥ 90, motion ≥ 85
  faithful (기본값)	"이걸 복제해 줘", "재현해 줘", "이렇게 보이게 해 줘"	layout ≥ 95, style ≥ 95, pixels ≥ 85, motion ≥ 90
  exact	"픽셀 퍼펙트", "1:1", "정확히"	layout ≥ 98, style ≥ 98, pixels ≥ 97, motion ≥ 95

• 트리거 (Trigger): 모션을 시작하는 것 (페이지 로드, 호버, 클릭, 스크롤 인투 뷰, 스크롤-스크러빙). 이것은 --action이 됩니다.

요청과 리포지토리에서 추론할 수 있는 것은 추론하세요. 두 가지 해석이 다른 작업으로 이어질 때만 물어보세요.

1. 설정 (머신당 한 번)

npm install --prefix <skill>/scripts
node <skill>/scripts/replica.mjs doctor

doctor가 브라우저가 없다고 보고하면, 출력하는 설치 명령어를 실행하세요. Google Chrome이 설치되어 있으면 Replica는 대체재로 사용합니다. 비디오 및 GIF 참조에는 PATH에 ffmpeg도 필요합니다.

2. 참조 캡처

모든 것을 사용자 프로젝트 내 .replica/<name>/에 보관하고, .replica/를 .gitignore에 추가하세요.

node <skill>/scripts/replica.mjs capture <url|file.html|image|video> --out .replica/<name>/ref \
  --selector "<부분의 css>" --viewports 1440x900,390x844 --action load --motion 1500

• --selector: 캡처를 복제할 부분으로 범위를 지정하세요. 전체 페이지는 거대한 청사진을 생성합니다.
• --viewports: 출시할 너비입니다. 첫 번째가 기본이며, 모션은 그곳에서 녹화됩니다.
• --action 및 --motion <ms>: 복제할 모션이 있을 때만 사용하세요. 녹화를 모든 모션을 커버할 수 있을 만큼 충분히 길게 하세요. capture는 끝날 때까지도 무언가가 계속 움직이고 있으면 메모를 출력합니다.
• --hide "<css>": 쿠키 배너, 채팅 위젯 및 개발 오버레이를 숨깁니다. 이는 양쪽 모두에 적용됩니다.

이미지, 비디오, 로그인 장벽 페이지, iframe, 캔버스 및 다크 모드에 대한 방법은 references/sources.md에 있습니다.

그런 다음 ref/blueprint.md를 전체적으로 읽으세요. 이미지 뷰어로 ref/<viewport>/shot.png 및 ref/motion/filmstrip.png를 보세요. 청사진 구문은 references/blueprint.md에 설명되어 있습니다. 이미지 및 비디오 참조에는 청사진이 없으므로 샷과 프레임에서 빌드하세요.

3. 빌드

다음 순서로 작업하세요: 토큰 → 레이아웃 뼈대 → 타이포그래피 → 박스와 페인트 → 미디어 → 반응형 → 모션

• 토큰: 청사진의 색상, 서체 크기, 반경, 그림자 및 CSS 변수를 정확한 값으로 프로젝트의 토큰 시스템(CSS 변수 또는 Tailwind 테마)에 넣으세요.
• 레이아웃: 각 윤곽선의 flex … / grid cols[…], gap 및 pad 값과 컨테이너의 너비를 재현하세요.
• 타이포그래피: 계열, 두께, 크기/줄 높이 및 자간을 정확히 일치시키세요. 폰트를 사용할 수 없거나 라이선스 문제가 있는 경우, 가장 가까운 사용 가능한 폰트를 사용하고 알려진 차이로 기록하세요.
• 모션: 청사진에 "선언된 애니메이션"이 있으면 지속 시간, 지연, 이징 및 키프레임을 정확히 복사하세요. 그렇지 않으면 타임라인의 시작, 지속 시간 및 이징 또는 스프링 매개변수를 사용하세요.
• 서빙: 클론을 동일한 상태를 렌더링하는 URL 또는 HTML 파일(dev-server 라우트, 스토리 또는 정적 파일)에서 접근 가능하게 만드세요. 루트 요소가 참조와 다른 선택자가 필요한 경우 --selector를 compare에 전달하세요.

각 스택(CSS, Tailwind, Framer Motion, GSAP)에 대한 참고 사항은 references/building.md에 있습니다.

4. 비교, 수정, 반복

node <skill>/scripts/replica.mjs compare .replica/<name>/ref <clone url|file> [--selector "<clone 루트 css>"]

round-N/ 디렉터리에 report.md, issues.json, score.json 및 sheets/를 생성합니다. 종료 코드 0은 통과, 1은 아직 통과하지 못함, 2는 오류를 의미합니다.

1. round-N/report.md를 읽으세요: 점수 테이블, 그 다음 다음 수정 (Fix next). 각 항목은 수정 시 얼마나 많은 점수를 얻을 수 있는지 보여줍니다.
2. round-N/sheets/*.png를 보세요: 참조 | 당신의 것 | 차이 개요, 확대된 핫스팟 및 모션 스트립.
3. 상위 3~5개 항목을 수정하되, 항상 "가능한 원인 (Likely cause)" 항목을 포함하세요. 그런 다음 compare를 다시 실행하세요.

• 보고서에 ▼(점수가 내려감)가 표시되면, 다른 것을 시도하기 전에 마지막 변경을 취소하세요.
• 두 번 연속으로 1점 미만의 향상만 있으면 패치를 중단하세요. 실패한 영역에 대한 청사진을 다시 읽고, 폰트가 로드되었는지, 올바른 선택자, 상태 및 뷰포트를 비교하고 있는지 확인하세요.
• 8라운드 후에 중단하고, 남은 것과 그 이유를 보고하세요.

references/fixing.md는 각 유형의 발견 사항이 의미하는 바와 일반적으로 해결하는 변경 사항을 다룹니다.

5. 전달

다음을 채워서 끝내세요.

Replica · <target> → <files changed>
Level <level> · round <N> · score <overall> — PASS | NOT YET
layout <n> · style <n> · pixels <n> · motion <n>
Known differences: <각 항목과 그 이유 (라이선스 폰트, 사용자의 자체 복사본, …)>
Reference assets reused: <목록, 또는 없음> · placeholders: <목록, 또는 없음>
Evidence: .replica/<name>/round-<N>/report.md and sheets/

통과하지 못했다면 그 사실을 명확히 말하고 남은 주요 발견 사항을 나열하세요.