MCPInstall

code-changelog

AI가 만든 모든 코드 변경사항을 reviews 폴더에 기록하고 간단한 HTML 뷰어로 웹 브라우저에서 실시간 확인할 수 있습니다. 매 수정마다 문서가 생성되고 Python 서버로 즉시 확인 가능합니다.

Installs
50
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/bear2u/my-skills --skill code-changelog
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads code-changelog automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Code Changelog with Simple HTML Viewer

AI가 생성한 모든 코드 변경사항을 reviews 폴더에 기록하고, 간단한 HTML 뷰어로 브라우저에서 실시간으로 확인할 수 있는 솔루션입니다.

🎯 핵심 기능

  • ✅ 자동 문서 생성: 매 수정마다 reviews 폴더에 MD 파일 생성
  • ✅ 간단한 HTML 뷰어: 설치 불필요, Python만으로 작동
  • ✅ 자동 index.html 업데이트: 새 문서 추가 시 자동으로 파일 목록 갱신
  • ✅ 실시간 서버: http://localhost:4000에서 즉시 확인
  • ✅ 다크 모드 UI: GitHub 스타일의 아름다운 문서 사이트
  • ✅ 네비게이션: 자동 파일 목록 생성으로 쉬운 탐색
  • ✅ Markdown 렌더링: 코드 하이라이팅 및 diff 표시
  • ✅ 최신 문서 우선: 가장 최근 작성한 문서가 기본으로 표시됨

🚀 빠른 시작

1. 초기 설정 (최초 1회)

# 설치 불필요! Python만 있으면 OK
python3 create_changelog.py

2. 개발하면서 사용

from code_changelog_tracker import CodeChangeLogger

# 로거 생성
logger = CodeChangeLogger("프로젝트명", user_request="요구사항")

# 변경사항 기록
logger.log_file_creation("main.py", "코드", "이유")
logger.save_and_build()  # 저장!

3. 문서 서버 실행

# reviews 폴더에서 Python 서버 실행
cd reviews
python3 -m http.server 4000

# 브라우저에서 확인
# http://localhost:4000

또는 백그라운드 실행:

cd reviews && python3 -m http.server 4000 &

📁 프로젝트 구조

your-project/
├── reviews/                    # 문서 루트
│   ├── index.html             # HTML 뷰어 (자동 생성)
│   ├── README.md              # 홈페이지
│   ├── SUMMARY.md             # 네비게이션 (자동 생성)
│   │
│   ├── 20251020_140000.md    # 변경 이력 1
│   ├── 20251020_140530.md    # 변경 이력 2
│   ├── 20251020_141200.md    # 변경 이력 3
│   └── ...
│
├── code_changelog_tracker.py  # 로거 스크립트
└── create_changelog.py         # 변경사항 기록 스크립트

💡 사용 시나리오

시나리오 1: 연속 개발하면서 문서화

logger = CodeChangeLogger("로그인 기능")

# 첫 번째 작업
logger.log_file_creation("auth.py", "def login(): pass", "로그인 함수")
logger.save_and_build()
# → reviews/20251020_140000.md 생성
# → index.html 자동 업데이트 (파일 목록에 추가)
# → 기본 페이지가 20251020_140000.md로 변경

# 두 번째 작업
logger.log_file_modification("auth.py", "old", "new", "암호화 추가")
logger.save_and_build()
# → reviews/20251020_140530.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_140530.md로 변경

# 세 번째 작업
logger.log_file_creation("test_auth.py", "test code", "테스트")
logger.save_and_build()
# → reviews/20251020_141200.md 생성
# → index.html 자동 업데이트 (파일 목록 갱신)
# → 기본 페이지가 20251020_141200.md로 변경

# 브라우저에서 http://localhost:4000 방문
# → 최신 문서가 자동으로 표시됨!
# → 좌측 네비게이션에서 이전 버전들도 확인 가능

시나리오 2: 백그라운드 서버 실행

# 터미널 1: 문서 서버 실행 (계속 켜둠)
cd reviews && python3 -m http.server 4000

# 터미널 2: 개발 작업
python3 your_dev_script.py  # logger.save_and_build() 호출

# 브라우저 새로고침하여 최신 문서 확인!

시나리오 3: 팀 공유

# reviews 폴더를 팀원들과 공유
# GitHub Pages, Netlify 등에 배포
# 또는 내부 웹서버에 호스팅

🛠️ 구현 코드

code_changelog_tracker.py (메인 로거)

이미 생성된 파일 사용. 주요 메서드:

  • log_file_creation() - 파일 생성 기록
  • log_file_modification() - 파일 수정 기록
  • log_file_deletion() - 파일 삭제 기록
  • update_index_html() - index.html 파일 목록 자동 업데이트 ⭐ NEW!
  • save_and_build() - 저장 + SUMMARY 업데이트 + index.html 업데이트

reviews/index.html (HTML 뷰어)

자동으로 생성 및 업데이트됩니다! save_and_build() 호출 시 매번 최신 파일 목록으로 갱신됩니다.

제공 기능:

  • Markdown 자동 렌더링 (marked.js)
  • 다크 모드 UI (GitHub 스타일)
  • 파일 목록 네비게이션 (자동 업데이트)
  • 코드 하이라이팅
  • 최신 문서가 기본으로 표시됨
  • 활성 링크 하이라이트

📋 간단한 사용법

1단계: 변경사항 기록

# create_changelog.py 예시
from code_changelog_tracker import CodeChangeLogger

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입 기능",
    user_request="이메일/비밀번호 기반 회원 가입 구현"
)

# 파일 생성 기록
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# 파일 수정 기록
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

2단계: 서버 실행

cd reviews
python3 -m http.server 4000

3단계: 브라우저에서 확인

http://localhost:4000

🎨 HTML 뷰어 특징

다크 모드 UI

  • GitHub 스타일의 마크다운 렌더링
  • 코드 블록 하이라이팅
  • 반응형 레이아웃

네비게이션

  • 좌측에 파일 목록 자동 표시
  • 날짜/시간별 정렬
  • 클릭으로 쉬운 이동

Markdown 렌더링

  • 제목, 목록, 코드 블록 지원
  • Diff 표시
  • 이모지 지원

💻 명령어 가이드

서버 시작

cd reviews
python3 -m http.server 4000

포트 변경

python3 -m http.server 3000
python3 -m http.server 8080

백그라운드 실행

cd reviews && python3 -m http.server 4000 &

서버 종료

# 포그라운드: Ctrl+C
# 백그라운드: 프로세스 ID 찾아서 종료
lsof -ti:4000 | xargs kill -9

🔧 포트 설정

기본 포트: 4000

python3 -m http.server 4000
# → http://localhost:4000

다른 포트 사용

python3 -m http.server 3000
# → http://localhost:3000

포트 충돌 해결

# 다른 포트 사용
python3 -m http.server 4001

# 또는 기존 프로세스 종료
lsof -ti:4000 | xargs kill -9

🌐 배포 옵션

GitHub Pages

# reviews 폴더를 gh-pages 브랜치에 푸시
git subtree push --prefix reviews origin gh-pages

Netlify

# Netlify에 reviews 폴더 배포
# Build command: (없음)
# Publish directory: reviews

Vercel

# Vercel에 reviews 폴더 배포
vercel reviews

📝 Best Practices

  1. 서버 항상 실행: 개발 중에는 서버를 계속 켜두기
  2. 작은 단위: 각 작업을 작은 단위로 나누어 문서화
  3. 명확한 제목: 프로젝트명을 명확하게 작성
  4. 정기적 백업: reviews 폴더를 Git으로 관리
  5. 브라우저 북마크: http://localhost:4000 북마크 추가

🎓 활용 예시

회원 가입 기능 구현

logger = CodeChangeLogger(
    "Daily Signal App - 회원 가입",
    user_request="이메일/비밀번호 회원 가입 기능"
)

# CustomTextField 생성
logger.log_file_creation(
    "lib/widgets/custom_text_field.dart",
    "CustomTextField 코드...",
    "재사용 가능한 입력 필드 위젯"
)

# SignUpScreen 생성
logger.log_file_creation(
    "lib/screens/signup_screen.dart",
    "SignUpScreen 코드...",
    "회원 가입 화면 구현"
)

# AuthProvider 수정
logger.log_file_modification(
    "lib/providers/auth_provider.dart",
    "old code",
    "new code with signUp",
    "signUp 메서드 추가"
)

# 저장
logger.save_and_build()

# 서버에서 확인: http://localhost:4000

🚨 문제 해결

포트가 이미 사용 중

# 다른 포트 사용
python3 -m http.server 4001

# 또는 프로세스 종료
lsof -ti:4000 | xargs kill -9

파일이 표시되지 않음

# index.html이 있는지 확인
ls reviews/index.html

# 없으면 logger.save_and_build() 호출 시 자동 생성됨

중요: logger.save_and_build()를 호출하면 index.html이 자동으로 업데이트됩니다!

  • 새 마크다운 파일 추가 시 파일 목록 자동 갱신
  • 최신 파일이 기본 페이지로 자동 설정
  • 브라우저 새로고침만으로 최신 문서 확인 가능

Markdown이 렌더링되지 않음

  • 브라우저 캐시 삭제 (Cmd+Shift+R / Ctrl+Shift+R)
  • 서버 재시작
  • index.html이 최신인지 확인 (save_and_build() 재실행)

🎯 장점

설치 불필요

  • Node.js, npm, HonKit 설치 불필요
  • Python만 있으면 즉시 사용 가능
  • 의존성 없음

빠른 실행

  • 1초 안에 서버 시작
  • 즉시 문서 확인 가능

간단한 배포

  • reviews 폴더만 배포하면 끝
  • 정적 사이트로 어디든 호스팅 가능

자동 업데이트 ⭐ NEW!

  • save_and_build() 호출 시 index.html 자동 갱신
  • 수동 편집 불필요
  • 항상 최신 파일 목록 유지
  • 최신 문서가 기본 페이지로 자동 설정

📊 비교: HonKit vs Simple HTML

기능HonKitSimple HTML
설치npm, Node.js 필요Python만 필요
빌드 시간5-10초즉시
의존성많음없음
커스터마이징높음중간
검색 기능있음브라우저 검색
배포_book 폴더reviews 폴더

라이선스

MIT License


설치 불필요! Python으로 바로 실행하고 웹 브라우저에서 확인하세요! 🎉

FAQ

What does the code-changelog skill do?

AI가 만든 모든 코드 변경사항을 reviews 폴더에 기록하고 간단한 HTML 뷰어로 웹 브라우저에서 실시간 확인할 수 있습니다. 매 수정마다 문서가 생성되고 Python 서버로 즉시 확인 가능합니다.

How do I install code-changelog?

Run npx skills add https://github.com/bear2u/my-skills --skill code-changelog in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/code-changelog/ (personal) or .claude/skills/code-changelog/ (project).

Which AI agents can use code-changelog?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is code-changelog safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains code-changelog?

It is published by bear2u in bear2u/my-skills. It has 50 recorded installs.

More from bear2u/my-skills

View all →

landing-page-guide-v2

bear2u/my-skills

Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.

Frontend & Design1.3K installs

card-news-generator-v2

bear2u/my-skills

Open the skill to read its SKILL.md instructions.

211 installs

landing-page-guide

bear2u/my-skills

Open the skill to read its SKILL.md instructions.

codex-claude-loop

bear2u/my-skills

Orchestrates a dual-AI engineering loop where Claude Code plans and implements, while Codex validates and reviews, with continuous feedback for optimal code quality

73 installs

gemini-logo-remover

bear2u/my-skills

Open the skill to read its SKILL.md instructions.

AI & Agents64 installs

Open the skill to read its SKILL.md instructions.

AI & Agents62 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs