Community코딩 & 개발github.com

Ask 패널

사용자에게 보여주는 HTML 보고서, 페이지 또는 아티팩트에 'Ask' 패널을 추가하여, 사용자가 페이지 내에서 질문하면 해당 페이지 자체의 Claude가 답변하도록 합니다. (세션의 Claude가 아닙니다.) HTML 보고서, 페이지 또는 아티팩트를 게시하거나 열 때, 또는 사용자가 'add ask', '페이지에서 질문하기'와 같이 말할 때 사용하세요.

Ask 패널란 무엇인가요?

Ask 패널은 사용자에게 제공하는 HTML 보고서, 페이지, 또는 아티팩트에 질문 기능을 추가하는 Claude Code 스킬입니다. 사용자가 페이지 내에서 질문을 입력하면, 해당 페이지를 생성한 세션이 아닌 페이지 자체의 Claude(또는 로컬 렌즈 서버)가 답변을 제공합니다. 이 스킬은 `claude.ai` 아티팩트(샘플링 사용)와 로컬 서버(`ask-open` 명령어로 실행) 두 가지 백엔드를 지원하여, 각각의 상황에 맞게 동작합니다. 사용자는 페이지 오른쪽 하단의 'Ask' 버튼을 클릭하여 사이드 패널을 열고, 질문을 입력하거나 텍스트를 선택한 후 'Ask about this'를 통해 특정 구절에 대해 질문할 수 있습니다. `inject.py` 스크립트로 HTML 파일에 위젯을 삽입하며, 질문과 답변은 페이지 내용에만 한정되므로 세션의 맥락과 분리됩니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ritamgh/claude-skills/tree/HEAD/skills/ask-panel

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

문서

Ask 패널은(는) 무엇을 하나요?

"Ask" 버튼(오른쪽 아래)을 클릭하면 페이지에 사이드 패널이 열립니다: 질문 입력 상자, Haiku/Sonnet 토글, 스트리밍 답변, 하나의 스레드에서 이어지는 후속 질문, 중단 버튼, 그리고 텍스트 선택 후 "Ask about this"로 특정 구절 인용 기능이 포함됩니다. 하나의 위젯에 두 가지 백엔드가 있으며, 런타임에 선택됩니다:

페이지 위치백엔드답변 대상
claude.ai 아티팩트claude.use("sample"), 보는 사람의 자신의 Claude페이지 텍스트
ask-open으로 제공렌즈 serve.py (claude -p, 읽기 전용)페이지 텍스트 + --repo의 파일들
일반 file://없음: 버튼이 표시되지 않음해당 없음

단계

  1. 아티팩트로 게시: python3 ~/.claude/skills/ask-panel/scripts/inject.py report.html (파일 내부에 직접 적용, 또는 -o out.html로 출력 파일 지정), 그런 다음 해당 파일을 capabilities: {sample: {}}와 함께 게시합니다. 다른 기능과 마찬가지로 먼저 artifact-capabilities 스킬을 로드하세요.
  2. 로컬에서 보기: ~/.claude/skills/ask-panel/scripts/ask-open report.html [--repo DIR]. 이 명령은 HTML을 삽입하고 서버를 시작한 후 브라우저를 엽니다. Ctrl-C를 누를 때까지 실행되므로, 백그라운드 명령으로 시작하세요. 이 명령은 해당 보고서만을 위한 자체 포트에서 제공합니다. 열린 페이지에 렌즈 키를 부여하므로, 신뢰할 수 있는 보고서에만 사용하세요.
  3. 사용자에게 페이지에 Ask 버튼이 있음을 알립니다. 이것이 전체 전달 과정입니다.

규칙

  • 페이지에 관한 질문은 페이지의 패널에서 해야 합니다. 세션에서 답변하지 말고, Q&A를 위해 아티팩트 댓글을 제공하지 마세요(댓글은 세션으로 다시 연결됩니다). 질문에 실제 작업(코드 변경, 새로운 조사)이 필요한 경우, 그것은 패널 질문이 아닌 새로운 작업입니다.
  • 삽입(inject)은 멱등적이며, 렌즈 레슨(lens lessons)은 건너뜁니다(렌즈 레슨에는 자체 Ask가 있습니다).
  • 아티팩트 모드는 클릭했을 때만 sample을 호출하며, 로드 시에는 호출하지 않습니다. not_granted 및 기타 영구 코드는 패널을 숨깁니다.
  • 모델 텍스트는 HTML이 아닌 DOM 노드로만 렌더링됩니다.

파일

assets/ask-panel.js, assets/ask-panel.css (위젯, inject.py에 의해 인라인됨), scripts/inject.py, scripts/ask-open. 로컬 백엔드는 ~/.claude/skills/lens/scripts/serve.py입니다. 렌즈 레슨이 아닌 페이지에 대해 mode: "report"로 POST /__lens/ask에 응답합니다.

테스트: node ~/.claude/skills/ask-panel/scripts/test-panel.mjs (Playwright, 가짜 claude, 네트워크 없음), 서버용 python3 ~/.claude/skills/lens/scripts/test-serve.py.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

관련 스킬