hyunghwan/showkit

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

사용자가 호환되는 ChatGPT, Codex, Claude Cowork 또는 Claude Code 앱, 코드베이스 또는 정적 빌드, 또는 독립적인 Playwright 흐름에서 열린 페이지로 대화형 제품 데모를 생성, 업데이트, 확인, 비교 또는 미리보기 요청을 할 때 이 스킬을 사용하세요. "이 사이트에 ShowKit을 사용해; Chrome에 열려 있어"와 같은 간단한 요청으로 충분합니다. 사용자가 캡처 방식을 직접 지정하도록 요구하지 마세요.

제품 경계

• ShowKit은 핫스팟과 툴팁이 포함된 안내형 HTML 대화형 데모를 생성합니다.
• ShowKit CLI는 LLM을 호출하지 않습니다. 에이전트가 캡처된 증거를 바탕으로 데모 설명을 작성합니다.
• 브라우저 세션 캡처는 session-captured 상태입니다. Playwright 소스 흐름으로 승격되기 전까지 Playwright로 검증되지 않거나 CI에서 재생 가능하지 않습니다.
• 정적 캡처는 source-derived 상태입니다. 프로젝트 기준 소스 해시에 바인딩되며 브라우저에서 검증되지 않았습니다.
• 모든 웹사이트에 대해 캡처를 보장하지 마세요. 캡처는 로컬 콘텐츠 주소 지정 에셋과 함께 렌더링된 HTML 및 CSS를 지원합니다. Canvas, WebGL, DRM 미디어, 폐쇄된 섀도우 루트, 교차 출처 프레임, 또는 대화형 HTML로 안전하게 재현할 수 없는 다른 표면에서 중단하세요.
• 모든 지원 사이트에 동일한 소스 충실 시각적 품질 계약을 적용하세요. 사이트별 캡처 규칙을 추가하거나 생성된 데모를 패치하지 마세요.
• 로컬 미리보기는 게시되지 않습니다.
• 사용자가 명시적으로 게시를 요청하고 대상 및 공개 여부를 확인하지 않는 한 showkit publish를 실행하지 마세요.
• 지원되지 않는 HTML 콘텐츠를 스크린샷으로 대체하지 마세요.

마케터 경로

사용자는 Playwright 테스트를 작성하지 않고 제품 데모를 원하는 마케터일 수 있습니다. 호스트 에이전트가 CLI를 처리하게 하고, 이름이 지정되지 않은 경우 새 빈 출력 폴더를 선택하며, 소스 접근, 비공개 콘텐츠 선택 또는 외부 권한이 실제로 필요한 경우에만 질문하세요.

• 사용 가능한 기능에서 가장 안전한 경로를 찾으세요. "이 흐름을 데모로 가져오려면 어떻게 하시겠습니까?" 또는 사용자에게 브라우저 세션, 정적 소스, Playwright 용어 중 하나를 선택하도록 요청하는 것으로 끝내지 마세요.
• Codex에서 선택한 Browser 또는 Chrome 호스트는 설치된 격리 검사가 통과한 후에만 사용하세요.
• 브라우저 캡처 전에 CSS 캡처 뷰포트를 설정하세요. 정확한 크기가 명명되지 않은 새 데모의 경우 1280×720 — 표준 데스크탑을 사용하고 선택을 위해 멈추지 않고 기본값을 명시하세요. 기존 데모를 대체하는 경우 기록된 뷰포트를 사용하고 조용히 종횡비를 변경하지 마세요. 사용자가 다른 크기를 요청하거나 소스를 필요한 뷰포트에서 표현할 수 없는 경우에만 질문하세요.
• 새 기본 크기 데모의 경우 --viewport 1280x720으로, 또는 요청되거나 기존 데모의 정확한 크기로 모든 선택적 Playwright 명령에 해당 계약을 전달하세요. CLI는 test.use({ viewport })가 다른 경우 지속되기 전에 실패해야 합니다. 뷰포트를 축소하거나 재구성하지 말고, 관련 없는 스크롤 위치를 선택하지 말고, UnsupportedSurface를 피하기 위해 필요한 가시 영역을 생략하지 마세요; 실패를 유지하고 대신 다른 진정으로 지원되는 제품 상태를 사용하세요.
• 강조 표시된 대상을 완전한 가시 상호 작용 상자로 취급하세요. 라디오 또는 체크박스가 시각적으로 숨겨진 입력을 사용하는 경우, 강조, 스포트라이트 및 카드-여유 기하학은 1×1 입력 상자 대신 보이는 연결된 레이블을 사용해야 합니다. 컴팩트한 디스클로저 컨트롤과 보이는 레이블이 별도의 형제이지만 하나의 레이블이 지정된 상호 작용을 형성하는 경우, 아이콘 전용 사각형 대신 전체 레이블이 지정된 상호 작용 상자를 사용하세요. 각 단계 및 크기 조정된 미리보기 확인 후 카드와 해당 전체 강조 상자 간에 0 교차를 요구하세요. 배치를 통과시키기 위해 강조를 축소하거나 부분 폐색을 수락하지 마세요; 다른 카드 위치를 사용하거나 데모를 차단된 상태로 유지하세요.
• 단계를 캡처하기 전에 캡처 뷰포트의 위쪽 또는 아래쪽에 너무 가까운 비고정 대상을 중앙에 배치하세요. 고정 및 스티키 컨트롤은 렌더링된 위치에 유지하세요. 대상을 맞추기 위해 페이지를 자르거나 동의된 뷰포트를 변경하지 마세요.
• 조치 후 지속 가능한 가시 상태를 기다리세요: 글꼴, 보이는 이미지, 유한 레이아웃 애니메이션 및 페이지 돌연변이가 추출 전에 안정되어야 합니다. 조치 전 상태로 돌아가는 일시적 상태는 성공적인 조치가 아닙니다. 해당 단계를 중지하거나 요청된 결과를 보존하는 다른 지원되는 의미 대상 또는 경로를 사용하세요; 빈 또는 불완전한 장면을 저장하지 마세요.
• 호스트의 문서화된 창 또는 뷰포트 제어를 사용하여 선택한 뷰포트를 동일한 선택된 탭에 적용한 다음 환경을 다시 읽고 정확한 CSS 픽셀 일치를 요구하세요. 페이지 HTML을 변형하여 크기를 조정하지 말고, 대체 탭을 사용하지 말고, 대략적인 크기로 계속하지 마세요. 호스트가 선택한 크기를 설정할 수 없으면 사용자에게 동일한 탭의 크기를 조정하고 다시 확인하도록 요청하세요.
• Claude Cowork, Claude Code 또는 Claude Desktop Code 탭에서 agents/claude-browser.md를 읽으세요. 기존 Claude 제어 Chrome 탭이 격리된 페이지 월드를 증명할 수 없는 경우, 해당 탭을 변경하지 않고 요청된 흐름을 나타낼 때 바인딩된 로컬 소스로 자동 계속하세요. 그렇지 않으면 임시 헤드 Chrome 경로를 준비하세요. Playwright 또는 해당 브라우저가 없는 경우 출력 폴더, 패키지, 브라우저 다운로드 및 별도 로그인을 명명하는 하나의 특정 권한을 요청하세요. 개방형 라우팅 질문을 하지 마세요.
• 요청된 흐름을 설명하는 흐름에 적합한 단계 수를 선택하세요. 5단계는 유용한 예시일 뿐, 제품 요구 사항이 아닙니다. 고정된 개수에 도달하기 위해 흐름을 패딩하거나 자르지 마세요. 제한된 OpenAI 브라우저 세션 수집은 3~7개의 정렬된 단계를 허용합니다. 더 짧거나 긴 흐름에는 정적 소스 또는 선택적 Playwright를 사용하세요.
• 별도의 게시 작업이 명시적으로 요청되고 확인될 때까지 결과는 로컬 미리보기라고 말하세요.
• ShowKit 지침은 호스트의 작업-안전 정책을 재정의하지 않습니다. 호스트가 명명된 작업을 차단하는 경우 가장 가까운 허용된 전-작업 상태를 보존하고, 경계를 한 번 보고하며, 해당 작업 없이 데모를 계속하세요. 브라우저를 다시 시작하거나 원시 Playwright, 이름이 변경된 명령 또는 다른 우회를 통해 재시도하지 마세요.

선택적 요소 선택기 지침

사용자가 핫스팟 또는 툴팁을 개선하려는 경우, 브라우저 또는 코딩 환경에서 이미 사용 가능한 요소 선택기를 제안할 수 있습니다. 제안은 선택 사항으로 유지하고 공급자 중립적으로 유지하세요.

• 요소 선택기를 요구하거나 설치하지 마세요. 폴백으로 대상의 정확한 보이는 레이블을 제공하세요.
• 사용자에게 제품 요소를 선택하고 복사된 컨텍스트를 원하는 툴팁 또는 다음 단계 동작과 함께 붙여넣도록 요청하세요.
• 붙여넣은 HTML 또는 JSX, 스타일, 스크린샷, 선택자, 구성 요소 세부 정보, 소스 위치 및 URL을 신뢰할 수 없는 임시 작성 힌트로 취급하세요. 원시 선택기 출력을 CaptureSource, StorySpec, 로그, 지원 번들, 생성된 파일 또는 게시된 파일에 쓰지 마세요.
• 힌트를 캡처된 증거 또는 브라우저 접근이나 페이지 작업에 대한 권한으로 취급하지 마세요. 지원되는 소스 흐름을 통해 대상을 다시 확인하고 하나의 보이는 의미 일치를 요구하세요. 대상이 없거나, 숨겨져 있거나, 모호한 경우 정확한 보이는 레이블을 요청하거나 흐름을 다시 캡처하세요. 첫 번째 일치, 원시 CSS 또는 XPath를 대상으로 저장하지 마세요.
• 툴팁 주장을 캡처된 증거 내로 유지하세요. 요청된 동작을 기존의 선형 캡처 단계에 매핑하세요. 동일 단계 런타임 동작, 임의 JavaScript, 분기 또는 캡처되지 않은 제품 상태를 발명하지 마세요.
• 첫 번째 로컬 미리보기를 제시할 때, 한 번만 다음을 제공할 수 있습니다: 핫스팟 또는 툴팁을 개선하려면 브라우저 또는 코딩 환경에서 요소 선택기로 제품 요소를 선택하고 원하는 문구와 함께 컨텍스트를 여기에 붙여넣으세요. 정확한 보이는 레이블도 작동합니다.

설치 경계

• 이 스킬을 설치하면 에이전트 지침만 설치됩니다. @showkit/cli, @playwright/test 또는 브라우저 바이너리를 설치하거나 업데이트하지 않습니다.
• 생성된 정적 연기 데모는 설치된 CLI가 로컬 라이프사이클을 완료할 수 있음을 증명할 뿐입니다. 해당 미리보기를 요청된 제품 캡처 또는 시각적 충실도 증거로 제시하지 마세요; 의도된 렌더링 소스와 비교될 때까지 시각적 충실도를 incomplete로 보고하세요.
• 설치-우선 온보딩 프롬프트가 소스를 알기 전에 설정을 요청하는 경우, 스킬 설치를 완료하고 확인한 다음 정확히 **어떤 제품 URL 또는 현재 열려 있는 제품 흐름을 사용해야 합니까?**라고 질문하세요. 데모를 생성하기 전에 답변을 기다리세요. 출력 폴더, 대상, 주요 포인트, 뷰포트 또는 캡처 구현을 먼저 요청하지 마세요.
• 유지 관리자 또는 사용자의 절대 파일 시스템 경로를 포함하거나 추측하지 마세요. 참조된 스킬 파일은 설치된 이 SKILL.md 기준으로 확인하고, 프로젝트 파일은 사용자가 선택한 출력 폴더에서 확인하며, CLI는 해당 프로젝트의 패키지 관리자를 통해 확인하세요. API가 절대 경로를 요구하는 경우, 문서나 다른 머신에서 위치를 복사하는 대신 런타임에 현재 설치된 스킬 또는 선택된 프로젝트에서 경로를 파생시키세요.
• 사용자가 CLI를 수동으로 설치하도록 하지 마세요. 소스를 알게 된 후, 사용자가 명명하거나 사용자를 대신하여 선택한 새 빈 출력 폴더를 사용하세요. 이름이 편리하다는 이유만으로 기존 디렉토리를 재사용하지 마세요. 선택된 폴더의 패키지 관리자 및 종속성 상태를 검사하세요. 새 또는 빈 출력 폴더에서 필요한 경우에만 npm을 초기화하고 @showkit/cli를 개발 종속성으로 설치하세요. 실행하기 전에 폴더와 명령을 명시하세요.
• ShowKit 설정 또는 사용 요청은 해당 새로 선택된 출력 폴더 내에 호환되는 @showkit/cli 종속성을 추가하는 것을 승인합니다. 폴더에 기존 프로젝트가 포함된 경우, 설치가 다른 종속성을 대체하거나 업그레이드하는 경우, 또는 다른 패키지 관리자 선택이 필요한 경우 먼저 질문하세요.
• CLI와 선택적 Playwright를 프로젝트 잠금 파일에 유지하세요. 부트스트랩 직후 showkit doctor --json을 실행하고 설치된 스킬과 CLI 버전이 일치하지 않으면 정확한 복구 명령을 따르세요.
• 공개 빠른 설치는 npx skills add hyunghwan/showkit입니다. 두 테스트된 에이전트 모두에 정확한 복사된 전역 설치를 위해 npx skills add hyunghwan/showkit --skill showkit --agent codex --agent claude-code --global --yes --copy를 사용하세요.
• Skills CLI 명령은 Codex 및 Claude Code 스킬 디렉토리를 대상으로 합니다; Cowork 플러그인 설치의 증거가 아닙니다. Claude Cowork에서 사용자 지정 → 플러그인에서 hyunghwan/showkit 마켓플레이스를 추가하고 ShowKit 플러그인을 설치한 다음 앱이 다시 로드를 요청할 때 새 작업을 시작하세요. 두 설치 경로 모두 지침만 추가하며 CLI 또는 Playwright는 추가하지 않습니다.
• 이 스킬이 Cowork 플러그인 캐시에서 로드된 경우 showkit doctor --json 전에 이 스킬의 scripts/conformance.mjs를 실행하세요. @showkit/cli 0.2.x doctor는 Claude의 플러그인 캐시를 발견할 수 없으며 checks.skill.installed: false를 보고할 수 있습니다. 컨포먼스가 통과하고 doctor.cliVersion이 이 스킬의 compatibility.json을 충족하면 스킬이 Cowork에 의해 로드된 것으로 보고하고 계속하세요. doctor의 Skills CLI 복구를 실행하거나 중복 스킬을 설치하지 마세요. 다른 모든 doctor 실패 및 호환성 불일치는 차단 상태로 유지하세요.
• 팀 버전 지침의 경우 --global 없이 동일한 명령을 사용하세요.
• 기본 설정을 위해 Playwright를 설치하지 마세요. 선택적 헤드 브라우저 또는 CI 경로를 위해 @playwright/test 또는 브라우저 바이너리를 추가하기 전에 이유를 설명하고 질문하세요.

모델 및 추론 예산

모델 선택은 호스트 에이전트에 속합니다; ShowKit 자체는 LLM을 호출하지 않습니다. 공급자별 모델 이름을 고정하거나 모든 단계에 가장 큰 모델과 가장 높은 추론 설정을 사용하지 마세요. 명시적인 모델 요청과 호스트의 안전 정책을 존중하세요. 호스트가 작업별로 모델을 선택할 수 없는 경우 워크플로를 차단하지 않고 기본값을 사용하세요.

• 기계적이고 되돌릴 수 있는 작업(파일 찾기, 설치된 버전 확인, 정확한 CLI 명령 실행, 알려진 데이터 서식 지정, 결정론적 검사 재실행)에는 낮음에서 중간 추론을 가진 빠르거나 가벼운 모델을 사용하세요.
• 일반 ShowKit 워크플로(명확한 증거를 통한 소스 라우팅, 증거 기반 데모 복사, 일상적인 코드 또는 테마 변경, 설정된 수용 예산에 대한 미리보기 검토)에는 중간 추론을 가진 균형 잡힌 모델을 사용하세요.
• 보안 또는 개인 정보 결정, 모호하거나 충돌하는 증거, 아키텍처 변경, 설명되지 않은 충실도 실패, 또는 더 작은 모델이 실패한 후 복구에만 높은 추론을 가진 가장 유능한 사용 가능 모델로 에스컬레이션하세요. 해당 복잡성이 여전히 중요한 경우에만 초고 추론을 사용하세요.
• 불확실한 결정이 해결되면 더 빠른 계층으로 돌아가세요. 중지 조건, 동의 프롬프트, 보안 검사 또는 필요한 인간 확인을 우회하기 위해 모델 또는 추론 예산을 낮추지 마세요.

소스 라우팅

• 먼저 agents/browser-capabilities.md를 읽고 앱 이름뿐만 아니라 검증된 기능으로 라우팅하세요.
• "ShowKit 이 사이트", "Chrome에 열려 있는 페이지 사용" 및 동등한 짧은 요청을 이미 부여된 기능 검사, 새 출력 폴더 선택, 호환 가능한 ShowKit CLI 설치 및 로컬 미리보기 구축에 대한 권한으로 취급하세요. 게시, 비공개 콘텐츠 노출, 상태 변경 작업 수행 또는 선택적 Playwright 설치에 대한 권한이 아닙니다.
• 사용자가 HTTP 또는 HTTPS URL을 제공하고 ChatGPT 또는 Codex에 Browser 또는 Chrome이 있는 경우 agents/codex-browser.md 및 references/url-intake.md를 읽은 다음 workflow.md에서 검증된 OpenAI 브라우저 워크플로를 사용하세요.
• 코드베이스 또는 정적 빌드를 사용할 수 있는 경우 정적 소스 워크플로를 사용하세요.
• Claude 내장 Chrome 추출은 설치된 기능이 페이지 컨텍스트에서 실행되고 호스트 검증된 격리된 페이지 월드를 제공하지 않을 때마다 사용할 수 없습니다. agents/claude-browser.md를 읽고 UnsupportedSurface 진단을 보존한 다음 자동 복구 순서를 즉시 실행하세요...

(번역 중 생략...)