← ClaudeAtlas

vibe.clonelisted

참조할 라이브 사이트 URL이 있고 그 마크업을 현재 스택으로 재현할 때 — 헤드리스 브라우저로 렌더된 DOM·computed CSS·에셋을 캡처해 픽셀 검증까지 루프
su-record/vibe · ★ 0 · AI & Automation · score 75
Install: claude install-skill su-record/vibe
# /vibe.clone URL을 받아 **마크업 수준으로 정밀 복제**하고 현재 프로젝트 스택에 맞춰 컴포넌트/스타일을 스캐폴딩한다. 휴리스틱·추정·생략은 금지 — 아래 Immutable Rules가 판정 기준이다. ## Usage ``` /vibe.clone <url> # 인터랙티브: MO+PC 양쪽 캡처 (기본) /vibe.clone <url> --mo-only # 모바일(375×812)만 캡처 /vibe.clone <url> --pc-only # 데스크탑(1440×900)만 캡처 /vibe.clone <url> --name=stripe-clone # 기능 이름 지정 (기본: 호스트명 kebab-case) /vibe.clone <url> --sub # 사이트맵/메가메뉴 하위 메뉴 URL까지 함께 클론 /vibe.clone <url1> <url2> <url3> # 다중 페이지 클론 (같은 사이트의 여러 경로) /vibe.clone <url> --ignore-robots # robots.txt 무시 (사이트 소유자 허가 있을 때만) /vibe.clone <url> --no-interact # 능동 인터랙션 스윕 끄기 (완전 결정론적 캡처) /vibe.clone <url> --real-content # 텍스트 verbatim 유지 (본인 소유/허가 확인 1회 필수) ``` ## Argument Routing ``` Step 1) 인자 수집 urls = http(s):// 로 시작하는 모든 인자 feature = --name=<value> | URL host → kebab-case scope = --mo-only | --pc-only | (기본: both) sub / ignoreRobots / realContent = 각 플래그 유무 (realContent 는 소유·허가 확인 질문 1회 후 적용) Step 2) 인자 검증 — 하나라도 걸리면 중단 urls.length === 0 → 사용자에게 URL 입력 요청 ! /^https?:\/\//.test(url) → "유효한 URL이 아닙니다" --sub && urls.length > 1 → "--sub는 기준 URL 1개와 함께 사용하세요" Step 3) 실행 진입 → Execution Plan Phase 0 URL 다중 입력 시 각 URL마다 별도 feature 디렉토리 (URL path 기반 suffix) ``` ## Core Principles ``` The rendered DOM is the source of truth for markup. Screenshots are for pixel verification