LukeRenton/explore-claude-code

해결하는 문제

Claude Code에는 많은 구성 파일, 폴더 및 내장 기능이 있지만 각각의 기능을 배우려면 흩어진 문서를 읽거나 실제 프로젝트를 파헤쳐야 합니다. 이 프로젝트는 학습을 실제 Claude Code 저장소의 클릭 가능한 복제본으로 바꾸어 각 파일이 어디에 있는지 확인하고, 주석이 달린 실제 구성 예제를 읽고, 각 개념을 맥락에서 이해할 수 있게 합니다.

작동 방식

이 사이트는 순수 HTML, CSS 및 바닐라 JavaScript로 구축된 단일 페이지 정적 앱입니다. 의존성, 프레임워크, 빌드 단계가 전혀 없습니다. 파일 탐색기 사이드바에는 실제 저장소와 똑같은 파일 및 폴더 트리가 표시되며, .claude/ 아래(생성하고 커밋하는 프로젝트 구성)와 built-in/ 아래(Claude Code에 기본 제공되는 기능)의 두 섹션으로 나뉩니다.

파일을 클릭하면 실제 구성 파일처럼 작성된 실제 내용이 표시되고 각 줄에 주석이 달려 있습니다. 구성에 대해 읽는 것이 아니라 구성 자체를 읽고 설정 방법을 배우는 것입니다. 전체 UI는 트리 구조, 콘텐츠 참조 및 배지를 보유하는 단일 manifest.json 파일로 구동됩니다. 소스 콘텐츠는 content/ 폴더에 마크다운 및 구성 파일로 저장됩니다.

탐색 기능에는 항목으로 이동하는 빠른 검색 팔레트(Ctrl/Cmd + K), 선택을 기억하는 라이트/다크 테마, 페이지를 공유할 수 있는 딥 링크, 화살표 키를 통한 항목 탐색, /help, /init, /doctor와 같은 슬래시 명령을 에뮬레이트하는 대화형 터미널 패널이 포함됩니다. 브라우저에 저장된 완료 추적기를 통해 탐색한 기능을 추적할 수도 있습니다.

대상 사용자

Claude Code를 배우는 모든 사람. .claude/가 실제로 무엇을 하는지 알고 싶은 초보자부터 자신의 프로젝트에 직접 복사할 수 있는 주석이 달린 예제를 원하는 경험 많은 사용자까지. 또한 권한, 명령, 스킬, 에이전트, 훅, MCP 서버와 같은 개념이 실제 저장소 레이아웃에서 어떻게 함께 맞는지 확인하려는 개발자에게도 유용합니다.

하이라이트

• 사이드바의 모든 파일과 폴더는 실제 Claude Code 개념입니다. CLAUDE.md, .claude/settings.json, .claude/rules/, .claude/commands/, .claude/skills/, .claude/agents/, .claude/hooks/, .claude/plugins/, .claude/mods/, .mcp.json 등.
• 내장 기능은 시각적으로 분리되어 있으며 /simplify, /batch, /code-review, /run, /plugin-authoring과 같은 번들 스킬 항목이 있습니다.
• 콘텐츠는 주석이 달린 실제 구성 파일로 작성되어 스캐폴딩을 자신의 프로젝트에 직접 복사할 수 있습니다.
• exploreclaudecode.com에서 라이브 제공. 설치, 가입, 빌드 단계 없음. 정적 서버에서 로컬로도 실행 가능.
• 깔끔하고 수제 아키텍처. 매니페스트 파일이 전체 UI를 구동하여 콘텐츠 추가 또는 업데이트가 쉽습니다.
• 새 기능 콘텐츠, 접근성, 모바일 개선, 번역에 대한 기여를 환영합니다.