데이터 흐름을 매핑하고, 호출 스택을 추적하며, 보안 경계를 단일 독립형 HTML 페이지로 시각화하는 AI agent skill입니다.
설치 및 다운로드
1. ClawHub CLI
레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.
npx clawhub@latest install code-walkthrough
2. 수동 설치
스킬 폴더를 다음 위치 중 하나로 복사하세요
~/.openclaw/skills/ <project>/skills/ 우선순위: 워크스페이스 > 로컬 > 번들
3. 프롬프트 설치
이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.
Clawhub를 사용해서 code-walkthrough 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).
다운로드를 원하시나요?
ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.
Code Walkthrough란 무엇인가요?
Code Walkthrough skill을 사용하면 AI 코딩 agent가 기존의 일반 텍스트 코드 설명을 대화형의 시각적으로 구조화된 기술 문서로 업그레이드할 수 있습니다. 소스 파일을 파싱하여 명확한 호출 체인 매핑, 심층 코드 주석 및 구조적 신뢰 경계를 빌드하고 전체 분석을 단일의 아름다운 스타일의 HTML 파일로 컴파일합니다. 이는 엔지니어링 팀이 복잡한 모듈의 레이아웃과 동작을 즉각적으로 확인하는 데 도움이 됩니다.
이 도구를 활용함으로써 팀은 빽빽한 텍스트 벽을 우회하고 컨텍스트 소스 코드 스니펫과 함께 동적 의존성 그래프를 탐색할 수 있습니다. 이는 원시 구현과 하이레벨 아키텍처 이해 사이의 격차를 좁혀 모든 코드 경로 수정이나 보안 레이어가 완전히 투명하게 유지되도록 합니다.
Code Walkthrough 활용 사례
- 매우 복잡한 크로스 모듈 호출 경로 및 데이터 스트리밍 로직 설명.
- 내부 시스템 디자인과 코드베이스를 시각적으로 소개하여 엔지니어 온보딩 가속화.
- 포괄적인 pull request 또는 코드 리뷰 중에 복잡한 로직 흐름 전달.
- 데이터 검증 체크포인트, 신뢰 경계 및 타사 의존성 문서화.
Code Walkthrough 작동 원리
- 진입점 식별: skill은 API 엔드포인트, CLI 컨트롤러 또는 webhook 핸들러와 같이 노출된 경계에서 스캔을 시작합니다.
- 호출 체인 추적: 최종 저장소 또는 부작용까지의 순차적 실행 경로를 매핑하고 파일 매개변수, 정확한 줄 번호 및 함수 세부 정보를 추출합니다.
- 신뢰 경계 매핑: 각 실행 노드를 평가하여 시스템 영역을 신뢰할 수 있음 또는 신뢰할 수 없음으로 분류하는 동시에 중요한 검증 필터를 호출합니다.
- 독립형 웹 페이지 컴파일: 수집된 구조화된 정의는 임베디드 다크 모드 스타일이 완성된 반응형 HTML canvas로 합성됩니다.
Code Walkthrough 설정 가이드
Openclaw agent 환경 내에서 이 기능을 활성화하려면 태스크 작업 공간 내에 모듈 구성을 정의하고 검증 빌드를 실행하세요.
# agent 구성 내에서 skill 프로토콜 초기화
openclaw skills add code-walkthrough
# 특정 소스 진입점에 대해 로컬 패스 실행
openclaw run code-walkthrough --entry src/server/routes/session.ts
Code Walkthrough 데이터 스키마 및 분류 체계
이 skill은 독립적인 HTML 아티팩트를 생성합니다. 런타임 분류 및 섹션 스타일은 다음과 같이 세분화됩니다.
| Section Component | Objective / Render Structure | Applied CSS Selectors |
|---|---|---|
| Request Path | 표시기 화살표가 있는 반응형 수평 flex 레이아웃을 통해 데이터 흐름 노드 매핑 | .request-path, .path-node |
| Call Stack Walkthrough | 확장 가능한 소스 파편을 수용하는 번호가 매겨지고 왼쪽이 강조된 상자 표시 | .step, .step-num, details |
| Trust Boundary | 점선 스타일을 사용하여 검증된 입력과 외부 입력 간의 경계 강조 | .trust-boundary |
| Annotations | 색상이 지정된 콜아웃 하이라이트로 단계별 로직 설명 형식 지정 | .annotation |
Code Walkthrough 고급 기능
- 사용자 정의 가능한 CSS 사용자 정의 속성을 통해 구성된 내장형 적응형 다크 모드 스타일.
- 빽빽한 파일을 깔끔하고 읽기 쉽게 유지하기 위한 접을 수 있는 소스 블록 세부 정보 (
<details>). - 신뢰할 수 없는 사용자가 제공한 페이로드 영역과 검증된 로컬 데이터베이스를 대상으로 하는 다중 경계 보안 분류.
- 컴팩트한 뷰포트에서 빠른 리뷰를 위해 수평 아키텍처 경로를 순차적 수직 스택으로 전환하는 완전 유동적인 모바일 반응형 폴백 스키마.
SKILL.md
로드 중
관련 Openclaw 스킬
CoreCoder 코딩 에이전트 기술
CoreCoder는 정밀한 코드 수정, 하위 에이전트 격리, 다층 컨텍스트 최적화를 위한 Claude Code의 7가지 아키텍처 패턴을 구현한 고급 AI 코딩 에이전트 기술입니다.
Financial Equity Research
실적 분석, 커버리지 개시 및 재무 모델 업데이트를 자동화하는 기관급 주식 조사 agent 스킬입니다.
금융 분석 및 모델링 제품군
DCF, LBO, Comps, 3-statement 모델 및 투자자 프레젠테이션을 생성, 감사 및 업데이트하기 위한 기관급 금융 모델링 및 분석 툴킷입니다.
Financial Analysis Toolkit
AKShare, pywencai 및 web search를 활용하여 자동화된 주식, 산업 및 거시 경제 연구를 제공하는 고급 금융 분석 엔진입니다.
Code Review Visualizer
일반 텍스트 git diff 및 코드 리뷰 노트를 리스크 지표와 구문 강조 워크스루가 포함된 대화형 독립 실행형 HTML 시각화 페이지로 변환하는 Openclaw 기능입니다.
Workday Music Greeter
시간대에 따라 음악 장면을 변경하고, 일치하는 GIF를 가져오고, 자동화된 일일 인사말 이메일을 전송하여 평일 업무 환경을 자동으로 동기화합니다.
Jiebang SEO Analyzer
웹페이지 상태 및 구조적 최적화를 평가하도록 설계된 포괄적인 SEO 감사 및 메타데이터 추출 기능입니다.
jiebang-file-process
Jiebang API를 기반으로 하는 텍스트 해싱, Base64 인코딩/디코딩 및 URL 변환을 위한 효율적인 유틸리티 스킬입니다.
추천*
