---
name: codebase-analysis-web-report
description: 코드베이스를 분석하여 아키텍처, 호출/데이터 흐름 그래프, 인터랙티브 다이어그램, 검색 기능이 포함된 자체 완결형 HTML 리포트를 생성합니다. 저장소 분석, 프로젝트 디렉토리 분석, 소스 파일 분석 요청 시 활성화됩니다.
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
---

# Codebase Analysis Web Report Generator

코드베이스를 분석하여 자체 완결형 인터랙티브 HTML 리포트를 생성하는 스킬입니다.

## 기능

### 입력 처리
- 저장소 URL, 파일 업로드, 디렉토리 경로 지원
- 프레임워크별 분석 지원 (React, Node, Flask, PHP 등)
- 대규모 코드베이스의 경우 자동 범위 지정 또는 사용자 지정 요청

### 분석 구성요소
- 모듈, 클래스, 함수, API 추출을 위한 정적 코드 분석
- 호출 관계 매핑 및 의존성 추출
- 메트릭 계산 (LOC, 복잡도 추정)
- 진입점 및 통합 지점 식별

### 출력 생성
- 제어/데이터 흐름 그래프 (개략적 및 세부적)
- 모듈 설명이 포함된 텍스트 요약
- 우선순위가 지정된 개선 권장사항이 포함된 발견사항 섹션
- 네비게이션, 인터랙티브 다이어그램, 검색 기능, 소스 코드 미리보기가 포함된 자체 완결형 HTML 리포트

## 구현 노트

- 가능한 경우 AST 파싱 사용; 그 외에는 정규식 휴리스틱 사용
- 인터랙티브 다이어그램에 Mermaid 또는 Cytoscape.js 우선 사용
- 샘플링 또는 범위 제한을 통해 대규모 저장소 처리
- 프레임워크별 구조 표시 (React 컴포넌트, 라우팅, DB 접근 패턴)

## 리포트 구조

```html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>코드베이스 분석 리포트</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <!-- 인라인 CSS 및 스크립트 -->
</head>
<body>
    <!-- 1. 요약 섹션 -->
    <!-- 2. 아키텍처 다이어그램 -->
    <!-- 3. 모듈별 상세 분석 -->
    <!-- 4. 호출 흐름 그래프 -->
    <!-- 5. 데이터 흐름 그래프 -->
    <!-- 6. 검색 가능한 인덱스 -->
    <!-- 7. 개선 권장사항 -->
</body>
</html>
```

## 사용 예시

```
이 프로젝트의 코드베이스를 분석해서 HTML 리포트로 만들어줘
src 폴더의 아키텍처를 분석하고 다이어그램으로 시각화해줘
이 저장소의 구조를 분석해서 웹 문서로 생성해줘
```

## 출처
Original skill by Dongchan Lee (@vluylbhtqq) from skills.cokac.com
