
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads code-changelog automatically when relevant.
- 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
- 서버 항상 실행: 개발 중에는 서버를 계속 켜두기
- 작은 단위: 각 작업을 작은 단위로 나누어 문서화
- 명확한 제목: 프로젝트명을 명확하게 작성
- 정기적 백업: reviews 폴더를 Git으로 관리
- 브라우저 북마크: 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
| 기능 | HonKit | Simple 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
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.
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
gemini-logo-remover
bear2u/my-skills
Open the skill to read its SKILL.md instructions.
design-prompt-generator-v2
bear2u/my-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
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-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.
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.
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.
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.