hamzafer@hamzafer
hamzafer/claude-code-mods/tree/main/mods/now-playing
GitHub 저장소 · 작성자 hamzafer
now-playing
Spotify에서 재생 중인 내용을 프롬프트 위 한 줄에 표시합니다: 트랙, 진행률, 현재 불리는 가사, 그리고 ⏮ ⏸ ⏭ 버튼. /music로도 제어할 수 있습니다. macOS.
이 mod 소개
<p align="center"><img src="images/claude-wave.gif" alt="" width="40"></p> <h1 align="center">Claude Code 모드</h1> <p align="center"><b>Claude Code가 무엇을 하는지 보여주게 하세요.</b><br>Claude Code용 플러그인으로, 함수 후크를 기반으로 합니다: 프롬프트 위의 실시간 줄, 가드, 페인, 게임. 원하는 것만 설치하세요.</p> <p align="center"> <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT"></a> <a href="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml"><img src="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI"></a> </p> <p align="center"> <a href="#-install">설치</a> · <a href="#-the-mods">모든 모드</a> · <a href="docs/mods.md">문서</a> · <a href="https://claude.dev/blog/getting-started-with-claude-code-mods/">mod란?</a> </p> <table> <tr> <td align="center" width="33%"><a href="docs/mods.md#-context-bar"><img src="images/context-bar.png" alt="context-bar: Claude Code 컨텍스트 창 사용량을 누적 막대 그래프로 표시, 카테고리별 색상" width="260"></a><br>📊 <b>context-bar</b><br>컨텍스트를 채우는 것</td> <td align="center" width="33%"><a href="docs/mods.md#-review-watch"><img src="images/review-watch.png" alt="review-watch: Claude Code에서 실행 중인 Codex 및 서브에이전트 코드 리뷰 줄을 라이브로 표시" width="260"></a><br>🔍 <b>review-watch</b><br>실행 중인 코드 리뷰를 라이브로</td> <td align="center" width="33%"><a href="docs/mods.md#-md-preview"><img src="images/md-preview.png" alt="md-preview: Claude Code가 편집하는 Markdown을 diff 옆에 GitHub처럼 렌더링" width="260"></a><br>📝 <b>md-preview</b><br>GitHub처럼 렌더링된 Markdown</td> </tr> <tr> <td align="center" width="33%"><a href="docs/mods.md#-blast-radius"><img src="images/gallery/blast-radius.png" alt="blast-radius: Claude Code 훅이 rm -rf를 막고 삭제될 파일을 나열" width="260"></a><br>💥 <b>blast-radius</b><br><code>rm -rf</code>가 무엇을 삭제할지 확인</td> <td align="center" width="33%"><a href="docs/mods.md#-now-playing"><img src="images/now-playing.png" alt="now-playing: Claude Code 안의 Spotify 트랙, 진행 표시줄, 동기화된 가사" width="260"></a><br>🎵 <b>now-playing</b><br>Spotify와 가사를 라이브로</td> <td align="center" width="33%"><a href="docs/mods.md#-reels-and-snake"><img src="images/reels-demo.gif" alt="reels: Claude Code가 작업하는 동안 페인에서 YouTube Shorts 재생" width="260"></a><br>📱 <b>reels</b><br>Claude가 작업하는 동안 Shorts</td> </tr> <tr><td align="center" width="33%"><a href="docs/mods.md#-where-am-i"><img src="images/gallery/where-am-i.png" alt="where-am-i: 세션 목표, 현재 단계, 당신을 기다리는 것, Claude Code 프롬프트 위" width="260"></a><br>📍 <b>where-am-i</b><br>목표, 현재, 당신을 기다리는 것</td>
<td align="center" width="33%"><a href="docs/mods.md#-lines-above-the-prompt"><img src="images/gallery/lines.png" alt="token-weather, usage-meter 및 기타 Claude Code 상태 줄이 프롬프트 위에 쌓임" width="260"></a><br>🌦️ <b>token-weather와 친구들</b><br>프롬프트 위의 줄</td>
<td align="center" width="33%"><a href="#mission-control"><img src="images/gallery/mission-control.png" alt="mission-control: Claude Code 하위 에이전트, 도구 호출 및 그들이 건드리는 파일, 실시간" width="260"></a><br>🛰️ <b>mission-control</b><br>에이전트와 그들이 건드리는 코드</td>
🚀 설치
마켓플레이스를 한 번 추가한 다음, 이름으로 원하는 mod를 설치하세요:
claude plugin marketplace add hamzafer/claude-code-mods
claude plugin install context-bar@claude-code-mods
또는 범용 세트를 한 번에 설치하세요:
for m in context-bar token-weather usage-meter where-am-i next-steps agent-radar review-watch replay-theater md-preview blast-radius mission-control; do
claude plugin install "$m@claude-code-mods"
done
설치 후 Claude Code를 재시작하세요. 설치하지 않고 사용해 보려면:
git clone https://github.com/hamzafer/claude-code-mods && cd claude-code-mods
claude --plugin-dir mods/context-bar
필요 Claude Code 2.1.287+. 일부 mod는 더 많이 필요합니다(Chrome,
gh, 커넥터). 어떤 것이 필요한지는 표에 나와 있습니다.
🧩 mod 목록
👀 무슨 일이 일어나는지 보기
| | Mod | 하는 일 | 명령 |
| --- | --- | --- | --- |
| 🛰️ | mission-control | agents, 도구 호출, 그리고 그것들이 건드리는 코드의 실시간 지도 | /mission |
| 📊 | context-bar | 컨텍스트 윈도우를 하나의 누적 막대로 표시. 카테고리별 색상, 토큰 수, 그리고 압축이 일어나는 위치 | /context-bar |
| 🌦️ | token-weather | 컨텍스트 채움 정도를 Clear부터 Compact soon까지 표시. 프롬프트 캐시 카운트다운 포함 | |
| ⏱️ | cache-clock | 상태 줄 아래에 표시되는 프롬프트 캐시 줄. Claude Code 자체 수치 사용: 남은 시간, 적중률과 미스, 캐시가 식었을 때 다음 메시지가 다시 캐시할 토큰. Node와 Claude Code 2.1.251+ 필요 | /cache-clock setup |
| 📍 | where-am-i | 목표, 현재 하는 일, 당신을 기다리는 것, 다음 단계 | /where |
| ➡️ | next-steps | 각 턴 후 2~3개의 가능성 높은 다음 프롬프트. 키 하나로 초안 작성 | 1 2 3, 0은 숨김 |
| 💰 | usage-meter | 5시간 및 7일 플랜 사용량, 리셋 카운트다운, 세션 비용 | |
| 💳 | openai-balance | 당신의 OpenAI API 크레딧: 게이지가 있는 추정 잔액, 오늘 지출, 돈이 주로 어디로 갔는지, 마지막 호출. OpenAI 조직 Admin 키 필요 | /openai-balance |
| 📡 | agent-radar | 실행 중인 각 서브에이전트마다 한 줄의 실시간 표시 | /radar |
| 🔍 | review-watch | 실행 중인 각 코드 리뷰(Codex 또는 리뷰 서브에이전트)마다 한 줄의 실시간 표시. 모델, 대상, 경과 시간, Codex의 최신 출력 포함. 끝나면 토스트로 발견 사항을 나열 | |
| 🌐 | browser-lanes | 이 세션에 브라우저가 있는지, 그리고 누가 가지고 있는지 | /browser |
| 🕌 | prayer-times | 현재 예배와 남은 시간, 다음 예배, 그리고 zawal. 당신의 컴퓨터에서 계산. 하니피 또는 표준 Asr | /prayers |
| 🎬 | replay-theater | 마지막 턴의 편집을 하나씩 diff로 단계별로 보여줌 | /replay |
| 📝 | md-preview | Claude가 편집하는 Markdown 파일을 GitHub처럼 렌더링. 전후를 나란히 표시. Chrome과 이미지를 표시하는 터미널 필요 | /md |
🛡️ 저장소를 보호하세요
| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 💥 | blast-radius | rm -r, force push 및 마이그레이션을 보류하고, 무엇을 삭제할지 보여주며, 60초 동안 응답이 없으면 취소합니다 | |
💸 지출 줄이기
| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 🔀 | switchboard | 모델을 지정하지 않은 각 하위 에이전트에 대해 짧은 라벨만으로 OpenAI의 Decisions API 또는 Jev를 사용해 모델을 선택합니다. 모든 하위 에이전트의 비용을 보여줍니다 | /route |
🔧 내 설정(포크해서 조정)
이것들은 내 도구와 규칙을 중심으로 만들어졌습니다. 포크해서 규칙을 자신의 것으로 바꾸세요.
| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 👀 | glance | 당신이 필요한 일을 한 줄로 표시: 다음 회의, PR, Linear 이슈, Slack DM. gh와 Google Calendar, Linear, Slack 커넥터가 필요합니다 | /glance |
| 🚦 | merge-gate | CI가 통과되고 Codex가 한 번 리뷰할 때까지 gh pr merge를 보류합니다. gh와 Codex CLI가 필요합니다. 리뷰는 하나의 고정 모델에서 실행됩니다. 자신의 것으로 바꾸세요 | /gate |
| 📏 | rulebook-guard | 내 글쓰기 및 git 규칙을 강제합니다: em dash를 다시 쓰고, --amend, 포맷되지 않은 push, 노트의 이메일과 전화번호 전에 묻습니다 | |
| 💾 | session-saver | 어디서 멈췄는지 저장하고, 재개할 때 보여줍니다. unpause가 필요합니다 | /park [note] |
🎮 재미용(옵트인)
| | 모드 | 기능 | 명령 |
| --- | --- | --- | --- |
| 📱 | reels | Claude가 작업하는 동안 YouTube Shorts를 재생하고, 끝나면 일시정지합니다 | /reels |
| 🐍 | snake | Claude가 작업하는 동안 스네이크 | /snake |
| 🎵 | now-playing | Spotify에서 재생 중인 곡, 진행 표시줄, 현재 불리는 가사, ⏮ ⏸ ⏭ 버튼. macOS와 Spotify 앱이 필요합니다 | /music |
<a id="mission-control"></a>
🛰️ 플래그십: mission-control
모든 서브에이전트, 모든 도구 호출, 그리고 그들이 건드리는 모든 파일을 채팅 옆 패널에 표시합니다. 4배속으로 표시: 두 서브에이전트가 네 개의 파일에 걸쳐 로그아웃 기능을 구축하는 모습입니다.
다른 모드처럼 설치하고, 재시작한 뒤 /mission을 입력하세요 (/mission code는 코드 맵을 엽니다). q는 닫습니다.
- 🤖
w는 에이전트와 모든 도구 호출을 실시간으로 표시합니다 - 🗺️
c는 가져오기 화살표가 있는 코드 맵을 표시합니다 - 🔵 에이전트가 파일을 읽는 동안 파란색
- 🟠 쓰는 동안 주황색
- 🟢 완료되면 초록색, 변경된 내용을 한 줄로 표시
코드 뷰는 macOS, Google Chrome, 그리고 이미지를 표시하는 터미널(Ghostty, kitty, iTerm2)도 필요합니다. Who 뷰는 어디서나 작동합니다.
📚 더 보기
- 📖 docs/mods.md: 동작 방식, 설정 노트, 직접 만들기
- 🎥 docs/demo.md: 동영상과 스크린샷
- ⭐ 이전 프로젝트: cursor-commands
, Cursor 슬래시 명령으로 600+ 스타
- 🤝 CONTRIBUTING.md: 자신만의 모드 추가하기
설치
먼저 작성자의 README에서 marketplace와 플러그인 이름을 확인하세요. 저장소 구조에 따라 명령어가 달라질 수 있습니다.
claude plugin marketplace add hamzafer/claude-code-mods claude plugin install now-playing
원문 / README
<p align="center"><img src="images/claude-wave.gif" alt="" width="40"></p>
<h1 align="center">Claude Code mods</h1>
<p align="center"><b>Make Claude Code show what it's doing.</b><br>Plugins for Claude Code, built on function hooks: live lines above the prompt, guards, panes and games. Install only the ones you want.</p>
<p align="center">
<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT"></a>
<a href="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml"><img src="https://github.com/hamzafer/claude-code-mods/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI"></a>
</p>
<p align="center">
<a href="#-install">Install</a> · <a href="#-the-mods">All mods</a> · <a href="docs/mods.md">Docs</a> · <a href="https://claude.dev/blog/getting-started-with-claude-code-mods/">What are mods?</a>
</p>
<table>
<tr>
<td align="center" width="33%"><a href="docs/mods.md#-context-bar"><img src="images/context-bar.png" alt="context-bar: Claude Code context window usage as a stacked bar, a color per category" width="260"></a><br>📊 <b>context-bar</b><br>what fills your context</td>
<td align="center" width="33%"><a href="docs/mods.md#-review-watch"><img src="images/review-watch.png" alt="review-watch: live lines for running Codex and subagent code reviews in Claude Code" width="260"></a><br>🔍 <b>review-watch</b><br>running code reviews, live</td>
<td align="center" width="33%"><a href="docs/mods.md#-md-preview"><img src="images/md-preview.png" alt="md-preview: Markdown that Claude Code edits, rendered like GitHub next to the diff" width="260"></a><br>📝 <b>md-preview</b><br>Markdown rendered like GitHub</td>
</tr>
<tr>
<td align="center" width="33%"><a href="docs/mods.md#-blast-radius"><img src="images/gallery/blast-radius.png" alt="blast-radius: a Claude Code hook holds rm -rf and lists the files it would delete" width="260"></a><br>💥 <b>blast-radius</b><br>see what <code>rm -rf</code> would delete</td>
<td align="center" width="33%"><a href="docs/mods.md#-now-playing"><img src="images/now-playing.png" alt="now-playing: Spotify track, progress bar and synced lyrics inside Claude Code" width="260"></a><br>🎵 <b>now-playing</b><br>Spotify and its lyrics, live</td>
<td align="center" width="33%"><a href="docs/mods.md#-reels-and-snake"><img src="images/reels-demo.gif" alt="reels: YouTube Shorts in a Claude Code pane while it works" width="260"></a><br>📱 <b>reels</b><br>Shorts while Claude works</td>
</tr>
<tr>
<td align="center" width="33%"><a href="docs/mods.md#-where-am-i"><img src="images/gallery/where-am-i.png" alt="where-am-i: the session goal, current step and what waits on you, above the Claude Code prompt" width="260"></a><br>📍 <b>where-am-i</b><br>goal, now, waiting on you</td>
<td align="center" width="33%"><a href="docs/mods.md#-lines-above-the-prompt"><img src="images/gallery/lines.png" alt="token-weather, usage-meter and other Claude Code status lines stacked above the prompt" width="260"></a><br>🌦️ <b>token-weather and friends</b><br>lines above the prompt</td>
<td align="center" width="33%"><a href="#mission-control"><img src="images/gallery/mission-control.png" alt="mission-control: Claude Code subagents, tool calls and the files they touch, live" width="260"></a><br>🛰️ <b>mission-control</b><br>agents and the code they touch</td>
</tr>
</table>
🚀 Install
Add the marketplace once, then install any mod by name:
claude plugin marketplace add hamzafer/claude-code-mods
claude plugin install context-bar@claude-code-mods
Or install the general-purpose set in one go:
for m in context-bar token-weather usage-meter where-am-i next-steps agent-radar review-watch replay-theater md-preview blast-radius mission-control; do
claude plugin install "$m@claude-code-mods"
done
Restart Claude Code after installing. To try one without installing:
git clone https://github.com/hamzafer/claude-code-mods && cd claude-code-mods
claude --plugin-dir mods/context-bar
Needs Claude Code 2.1.287+. A few mods need more (Chrome,
gh, a connector); the tables say which.
🧩 The mods
👀 See what's happening
| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 🛰️ | mission-control | Live map of agents, tool calls and the code they touch | /mission |
| 📊 | context-bar | Your context window as one stacked bar, a color per category, with token counts and where it compacts | /context-bar |
| 🌦️ | token-weather | Context fill from Clear to Compact soon, plus a prompt-cache countdown | |
| ⏱️ | cache-clock | A prompt-cache line under your status line, from Claude Code's own figures: time left, hit rate and misses, and the tokens your next message re-caches once it goes cold. Needs Node and Claude Code 2.1.251+ | /cache-clock setup |
| 📍 | where-am-i | Goal, doing now, waiting on you, next step | /where |
| ➡️ | next-steps | 2 or 3 likely next prompts after each turn, one key to draft one | 1 2 3, 0 hides |
| 💰 | usage-meter | 5-hour and 7-day plan usage, the reset countdown and the session's cost | |
| 💳 | openai-balance | Your OpenAI API credit: an estimated balance with a gauge, today's spend, where the money mostly went, and the last call. Needs an OpenAI organization Admin key | /openai-balance |
| 📡 | agent-radar | One live line per running subagent | /radar |
| 🔍 | review-watch | One live line per running code review (Codex or a review subagent) with the model, target, elapsed time and Codex's latest output. A toast lists the findings when it ends | |
| 🌐 | browser-lanes | Whether this session has a browser, and who holds it | /browser |
| 🕌 | prayer-times | The current prayer and how long is left, the next one, and zawal. Computed on your computer, Hanafi or standard Asr | /prayers |
| 🎬 | replay-theater | Steps through the last turn's edits, one diff at a time | /replay |
| 📝 | md-preview | Renders the Markdown files Claude edits like GitHub does, with before and after side by side. Needs Chrome and a terminal that shows images | /md |
🛡️ Guard your repo
| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 💥 | blast-radius | Holds rm -r, force pushes and migrations, shows what they'd delete, cancels after 60 s with no answer | |
💸 Spend less
| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 🔀 | switchboard | Picks the model for each subagent that doesn't name one, with OpenAI's Decisions API or Jev, from its short label only. Shows what every subagent cost | /route |
🔧 My setup (fork and adapt)
These are built around my own tools and rules. Fork them and change the rules to yours.
| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 👀 | glance | One line with what needs you: next meeting, PRs, Linear issues, Slack DMs. Needs gh and the Google Calendar, Linear and Slack connectors | /glance |
| 🚦 | merge-gate | Holds gh pr merge until CI is green and Codex reviewed once. Needs gh and the Codex CLI. Reviews run on one fixed model; change it to yours | /gate |
| 📏 | rulebook-guard | Enforces my writing and git rules: rewrites em dashes, asks before --amend, unformatted pushes, emails and phone numbers in notes | |
| 💾 | session-saver | Saves where you left off, shows it on resume. Needs unpause | /park [note] |
🎮 For fun (opt-in)
| | Mod | What it does | Command |
| --- | --- | --- | --- |
| 📱 | reels | YouTube Shorts while Claude works, pauses when it's done | /reels |
| 🐍 | snake | Snake while Claude works | /snake |
| 🎵 | now-playing | What Spotify is playing, with a progress bar, the lyric being sung, and ⏮ ⏸ ⏭ buttons. Needs macOS and the Spotify app | /music |
<a id="mission-control"></a>
🛰️ Flagship: mission-control
Every subagent, every tool call and every file they touch, in a pane next to the chat. Shown at 4x: two subagents building a logout feature across four files.
Install it like any mod, restart, and type /mission (or /mission code to open the code map). q closes it.
- 🤖
wshows the agents and every tool call, live - 🗺️
cshows the code map, with import arrows - 🔵 Blue while the agent reads a file
- 🟠 Orange while it writes
- 🟢 Green when done, with one line on what changed
The Code view also needs macOS, Google Chrome and a terminal that shows images (Ghostty, kitty, iTerm2). The Who view works everywhere.
📚 More
- 📖 docs/mods.md: how they behave, setup notes and build your own
- 🎥 docs/demo.md: videos and screenshots
- ⭐ Earlier project: cursor-commands
- 🤝 CONTRIBUTING.md: add your own mod
비슷한 프로젝트
ruvnet@ruvnet
Cognitum Seed 하드웨어의 IoT 장치 수명 주기, 텔레메트리 이상 탐지, 플릿 관리 및 증인 체인 검증
claude / ruflo-iot-cognitum
❯ /ruflo-iot-cognitum▰▰▰▰▰▰▰▰ 기타
✳︎ ruflo-iot-cognitum
└─ 모든 대화를 더 편하게
텍스트 미리보기 · 프로젝트 스크린샷 아님✳︎ ruflo-iot-cognitum
└─ 모든 대화를 더 편하게
ruflo-iot-cognitum
스타 수 7.4만권한 사용 내역 L2
data-goblin@data-goblin
rayfin CLI를 따라가는 pane으로 설명된 data-goblin/power-bi-agentic-development Claude Code 플러그인 marketplace의 Fabric Data App 플러그인입니다.
fabric-data-app
스타 수 1천권한 사용 내역 L2동명 2개
23blocks-OS@23blocks-OS
프롬프트 위, 상태 줄과 toast에 읽지 않은 AMP 메시지를 표시하고 유휴 Claude Code 세션을 깨워 읽게 합니다. Claude Code 2.1.287 이상이 필요합니다.
amp-inbox-band
스타 수 816권한 사용 내역 L2