Communitygithub.com

ssunduko/product-video

파이프라인 .demo 스크립트의 자연어 `ask "..."` 선택자를 라이브 앱에서 Claude in Chrome 확장 프로그램을 사용하여 확인하고 <script>.selectors.json 사이드카 파일을 작성합니다. 스크립트에 확인되지 않은 의도가 있거나, 컴파일 또는 녹화 시 '선택자가 여전히 의도를 나타냅니다' 오류가 발생하거나, 재설계로 인해 이전에 작동하던 선택자가 깨졌을 때 사용합니다.

product-video란 무엇인가요?

이 스킬은 `.demo` 스크립트에 포함된 자연어 선택자(예: `ask "채팅 하단에 있는 메시지 상자"`)를 실제 웹 애플리케이션의 DOM에서 확인하고, 그 결과를 `scripts/<name>.selectors.json` 사이드카 파일에 기록합니다. 이는 `script.mjs`가 일반 선택자로 컴파일하고 `driver.mjs`가 결정론적 비디오 녹화를 수행할 수 있도록 하는 전제 조건입니다. 스킬은 주로 Claude in Chrome 확장 프로그램을 통해 작동하며, 라이브 세션에 접근하여 로그인 우회 등의 이점을 제공합니다. 확인 과정은 스크립트의 비트 순서를 따라 진행되며, 각 의도가 실제로 화면에 나타나는 순간에 해당 DOM 요소를 찾아 가장 안정적인 선택자(예: `data-testid`, 안정적인 `id`, 접근 가능한 이름)를 우선적으로 사용합니다. 확인되지 않은 의도가 있으면 스크립트는 컴파일되지 않으므로, 잘못된 선택자로 인해 녹화 중 실패하는 것을 방지할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ssunduko/product-video/tree/HEAD/.claude/skills/resolve-selectors

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

자연어 선택자 확인하기

.demo 스크립트는 의도를 명확히 표현합니다:

selectors:
  composer = ask "채팅 하단에 있는 메시지 상자"

당신의 임무는 이 의도가 실제 라이브 DOM에서 무엇인지 찾아내어 scripts/<name>.selectors.json에 기록하는 것입니다. 그래야 script.mjs가 이를 일반 선택자로 컴파일하고 driver.mjs가 결정론적 테이크를 녹화할 수 있습니다.

당신은 확인자(resolver)입니다. 파이프라인 어디에서도 모델을 호출하지 않습니다. script.mjs는 사이드카 파일을 읽고, 없으면 컴파일을 거부합니다. 확인은 여기서, 녹화 전에 한 번만 수행됩니다. 테이크의 타이밍은 비디오 타임라인이므로, 실행 중 모델 왕복이 발생하면 완성된 비디오에 공백(dead air)으로 남게 됩니다.

시작하기 전에

  • 앱에 접근 가능해야 하며, 로그인이 필요하다면 사용자의 Chrome에서 이미 로그인된 상태여야 합니다. 이것이 확장 프로그램을 사용하는 요점입니다. 실제 세션에 접근하므로 SSO 절차나 이메일 코드 입력이 필요 없습니다.
  • 먼저 스크립트를 읽으십시오. URL을 알기 위해 app:/target: 헤더가 필요하며, 비트(beats)도 필요합니다. 선택자는 흐름 순서대로 확인되어야 하기 때문입니다(아래 참조).

절차

  1. 작업 목록을 가져옵니다.

    cd pipeline
    node script.mjs ../scripts/<name>.demo --intents
    

    표준 출력에 JSON으로 출력됩니다: 모든 ask 선택자, 해당 의도, 현재 확인 상태 (null이면 미확인). null인 항목을 확인합니다. 사용자가 흐름이 깨졌다고 말하는 경우에만 나머지를 다시 확인합니다.

  2. 단일 ToolSearch 호출로 브라우저 도구를 로드하고, 그 다음 다른 작업 전에 tabs_context_mcp를 호출합니다. 사용자가 기존 탭을 지정하지 않았다면 tabs_create_mcp로 새 탭을 만듭니다.

  3. 비트 순서대로 흐름을 따라갑니다. 이 부분이 잘못되기 쉽습니다: 많은 선택자가 랜딩 페이지에 존재하지 않습니다. 결과 테이블은 질문을 보낸 후에야 나타나고, "중지" 컨트롤은 생성 중일 때만 존재합니다. 따라서 스크립트의 비트를 단계별로 진행하며, 각 ask가 해당 요소가 화면에 나타나는 순간에 확인합니다.

    실제 데이터입니다. 생성, 수정, 전송 또는 삭제하는 단계를 수행하기 전에 반드시 멈추고 사용자에게 물어보십시오. feature.demo는 실제 Salesmessage 계정에 4개의 메시지를 보냅니다. 어떤 항목을 찾기만 하면 되는 경우 클릭 대신 호버(hover)를 사용하고,

관련 스킬