---
title: "reply-media"
url: "https://claudemods.dev/ko/builds/reply-media-07c241"
source: "https://github.com/NateCC0902/NeonCoat/tree/main/mods/reply-media"
source_type: "github"
repo: "https://github.com/NateCC0902/NeonCoat/tree/main/mods/reply-media"
author: "NateCC0902"
author_handle: "NateCC0902"
stars: 0
category: "테마 및 외관"
categories: ["themes"]
tags: ["hooks", "kitty-graphics", "latex", "mermaid", "terminal-rendering"]
permission_level: 2
scan_complete: true
install: "claude plugin marketplace add NateCC0902/NeonCoat\nclaude plugin install reply-media"
added: "2026-10-11T20:08:29.398Z"
updated: "2026-10-11T15:49:13Z"
locale: "ko"
content_locale: "ko"
---

# reply-media

답변의 mermaid 펜스, 수학 공식, 로컬 이미지를 터미널에 그림으로 그리고, 그 로컬 동영상을 재생한다 (kitty 그래픽: Ghostty, kitty)

## Description

# NeonCoat

[Claude Code](https://claude.com/claude-code)용 모드와 상태 줄. 답변의 다이어그램, 공식, 이미지, 동영상은 터미널에 그림으로 그려지고, 그 markdown은 색으로 그려지며, 상태 줄은 세션에 드는 비용을 보여준다.

![터미널에 그려진 Claude Code 답변: 순서도, 공식, 표, 작업 목록, 콜아웃, 코드 카드, 그다음 제자리에서 재생되는 동영상](docs/demo.gif)

## 여기 들어 있는 것

| 경로 | 하는 일 |
| --- | --- |
| `mods/reply-media/` | `mermaid` 펜스, 공식(`math` 펜스와 `$$` 블록), 로컬 이미지(한 줄에 단독으로 있는 `![alt](path)`)를 그림으로 그린다. 이미지로 작성된 로컬 동영상은 재생 버튼이 있는 첫 프레임으로 그려지고, 제자리에서 재생된다. 각 그림 아래에는 소스를 복사하는 버튼 하나와 창에서 더 크게 여는 버튼 하나가 있다. |
| `mods/reply-markdown/` | 제목, 목록, 작업 목록, 인용, 콜아웃(`> [!WARNING]`), 구분선, 표를 색으로 그리고, 각 코드 펜스를 복사 버튼이 있는 카드에 넣는다. |
| `mods/skill-router/` | `/skill-router <question>`은 작은 모델에게 사용자 전용 스킬 중 어느 것이 그 질문에 맞는지 묻는다. 질문이 없으면 그것들을 나열한다. |
| `statusline.mjs` | 상태 줄. 첫 번째 행: 사용한 컨텍스트, 비용, 모델, 초당 토큰 수, 폴더, 캐시 적중률, git 상태. 두 번째 행: 구독 기간과 그것이 다시 채워지는 시점, Remote Control, 그리고 머신에서 실행 중인 다른 세션. |

## 요구 사항

- 모드 API(함수 훅 플러그인)가 있는 Claude Code. 이 API는 얼리 액세스이며 이 모드들 아래에서 바뀔 수 있다. 마지막으로 Claude Code 2.1.296에서 실행됨.
- macOS. 그림 스크립트는 `sips`와 `open`을 호출한다.
- `reply-media`의 경우, kitty 그래픽 프로토콜을 사용하는 터미널: Ghostty 또는 kitty.
- Node.js, 그리고 `reply-media`의 경우:

```bash
brew install librsvg ffmpeg
```

## 설치

```bash
git clone https://github.com/NateCC0902/NeonCoat.git
cd NeonCoat/mods/reply-media/render && npm install
```

그런 다음 `~/.claude/settings.json`을 복제본으로 지정하세요. `CLAUDE_CODE_PLUGIN_DIRS`는 콜론으로 구분되며 mod당 하나의 항목입니다(상위 폴더는 검사되지 않음). 따라서 원하지 않는 mod는 빼세요:

```json
{
  "env": {
    "CLAUDE_CODE_PLUGIN_DIRS": "/path/to/NeonCoat/mods/reply-media:/path/to/NeonCoat/mods/reply-markdown:/path/to/NeonCoat/mods/skill-router"
  },
  "statusLine": {
    "type": "command",
    "command": "node /path/to/NeonCoat/statusline.mjs",
    "padding": 0,
    "refreshInterval": 5
  }
}
```

그 이후에 시작된 세션에서 이 mod들이 로드됩니다. 이 파일들은 복제본에서 실시간으로 로드됩니다. 저장된 mod 파일은 실행 중인 세션에서 핫 리로드되므로, 잘못된 편집은 모든 세션의 터미널 UI를 망가뜨립니다.

## 옵션

각 mod의 옵션은 `/config`의 행이며, 변경은 즉시 적용됩니다.

| Mod | 옵션 | 기본값 | 변경 내용 |
| --- | --- | --- | --- |
| 세 가지 모두 | `enabled` | `true` | mod를 제거하지 않고 끕니다. |
| `reply-media` | `pxPerColumn` | `8` | 터미널 열당 그림의 픽셀 수입니다. 낮을수록 그림이 더 크게 그려집니다. |
| `reply-media` | `cellAspect` | `2.17` | 터미널 셀 하나가 너비보다 몇 배 더 높은지입니다. 그림이 찌그러지거나 늘어나 보일 때 변경하세요. |
| `reply-media` | `resumedReplies` | `3` | 재개된 세션의 마지막 응답 중 그림이 다시 그려지는 수입니다. |
| `reply-markdown` | `tableBorder` | `bold` | `round`, `single` 또는 `bold`. |
| `reply-markdown` | `cardBorder` | `round` | 코드 카드와 콜아웃 상자의 테두리: `round`, `single` 또는 `bold`. |

## 검사

변경 후 저장소 루트에서 다음을 실행하세요:

```bash
claude plugin validate mods/<name> && claude plugin test mods/<name>
npx -p typescript tsc -p mods/<name>
(cd mods/reply-media/render && npm test)
echo '{}' | node statusline.mjs && node --test statusline.test.mjs
```

## Install

```
claude plugin marketplace add NateCC0902/NeonCoat
claude plugin install reply-media
```

## Original README

# NeonCoat

Mods and a status line for [Claude Code](https://claude.com/claude-code). A reply's diagrams, formulas, images and videos are drawn as pictures in the terminal, its markdown is drawn in color, and the status line says what the session is costing.

![A Claude Code reply drawn in the terminal: a flowchart, a formula, a table, a task list, a callout, a code card, then a video playing in place](docs/demo.gif)

## What is in here

| Path | What it does |
| --- | --- |
| `mods/reply-media/` | Draws `mermaid` fences, formulas (`math` fences and `$$` blocks) and local images (`![alt](path)` on a line of its own) as pictures. A local video written as an image is drawn as its first frame with a play button, and plays in place. Under each picture, one button copies its source and one opens it larger in a pane. |
| `mods/reply-markdown/` | Draws headings, lists, task lists, quotes, callouts (`> [!WARNING]`), rules and tables in color, and puts each code fence in a card with a copy button. |
| `mods/skill-router/` | `/skill-router <question>` asks a small model which of your user-only skills fits the question. With no question it lists them. |
| `statusline.mjs` | The status line. First row: context used, cost, model, tokens per second, folder, cache hit rate, git state. Second row: subscription windows and when they refill, Remote Control, and the other sessions running on the machine. |

## What `reply-markdown` draws

Headings, lists, a quote, a rule, and bold, italic and inline code:

<img src="docs/markdown-text.png" width="830" alt="A reply with three levels of heading, a nested bullet list, a numbered list, a quote and a rule, each in its own color">

The five callouts:

<img src="docs/markdown-callouts.png" width="830" alt="Note, Tip, Important, Warning and Caution, each a box in its own color">

A table, a task list, and a code fence as a card with its copy button:

<img src="docs/markdown-blocks.png" width="830" alt="A framed table, a task list with two items ticked, and a TypeScript snippet in a card with a copy button">

## Requirements

- Claude Code with the mod API (function-hook plugins). The API is early access and may change under these mods. Last run on Claude Code 2.1.296.
- macOS. The picture scripts call `sips` and `open`.
- For `reply-media`, a terminal that speaks the kitty graphics protocol: Ghostty or kitty.
- Node.js, and for `reply-media`:

```bash
brew install librsvg ffmpeg
```

## Install

```bash
git clone https://github.com/NateCC0902/NeonCoat.git
cd NeonCoat/mods/reply-media/render && npm install
```

Then point `~/.claude/settings.json` at the clone. `CLAUDE_CODE_PLUGIN_DIRS` is colon-separated with one entry per mod (a parent folder is not scanned), so leave out the mods you do not want:

```json
{
  "env": {
    "CLAUDE_CODE_PLUGIN_DIRS": "/path/to/NeonCoat/mods/reply-media:/path/to/NeonCoat/mods/reply-markdown:/path/to/NeonCoat/mods/skill-router"
  },
  "statusLine": {
    "type": "command",
    "command": "node /path/to/NeonCoat/statusline.mjs",
    "padding": 0,
    "refreshInterval": 5
  }
}
```

The mods load in sessions started after that. These files are loaded live from the clone: a saved mod file hot-reloads in running sessions, so a broken edit breaks the terminal UI of all of them.

## Tell Claude what to write

`reply-media` draws only what Claude writes in the forms it knows: a `mermaid` fence, a `math` fence, an image on a line of its own. Claude does not write them unprompted, so add these notes to `~/.claude/CLAUDE.md`. The Formatting note does the same for the forms `reply-markdown` draws only when Claude chooses to write them.

````markdown
Diagrams:

Draw diagrams in replies as ```mermaid code fences, never as ASCII art. The reply-media mod turns each fence into a picture in the terminal.
Use only these types, the rest do not render: flowchart, stateDiagram-v2, sequenceDiagram, classDiagram, erDiagram, xychart-beta.
Start the fence at column 0: an indented fence (inside a list item or a quote) is not picked up.
Prefer flowchart LR: a TD chart with more than a few nodes fills the terminal's height.
For a flowchart with a cycle, declare the node the back-edge leaves from on a line of its own before any edge (e.g. `T{test}`), or the layout draws that node above the one before it.
Directory trees and tables are not diagrams: keep them as text.

Math:

Write a formula that stands on a line of its own as LaTeX in a ```math code fence, one formula per fence, starting at column 0. The same mod turns it into a picture. Leave out `\tag`: a tagged formula is not drawn.
Write math inside a sentence in Unicode (a⃗ · b⃗ = |a||b|cos θ), never as `$x$`: a picture cannot sit inside a line of text.

Images:

To show an image file from this machine, write `![alt](path)` on a line of its own, starting at column 0. The same mod draws it. The path is absolute, under `~/`, or relative to the session's working directory. An image at a URL is not fetched, so give its link as text.
A video file (mp4, mov, webm, mkv, gif) written the same way is shown as its first frame with a play button.

Formatting:

For a warning or a note I must not miss, write a GitHub alert: a quote whose first line is `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` or `[!CAUTION]`. It becomes a colored box.
For steps or checks to tick off, write a task list: `- [ ]` and `- [x]`.
Put a command or snippet I will copy in a code fence of its own, with its language, not in inline code: the fence gets a copy button.
````

## Options

Each mod's options are rows in `/config`, and a change takes effect at once.

| Mod | Option | Default | What it changes |
| --- | --- | --- | --- |
| all three | `enabled` | `true` | Turns the mod off without removing it. |
| `reply-media` | `pxPerColumn` | `8` | Pixels of a picture per terminal column. Lower draws pictures larger. |
| `reply-media` | `cellAspect` | `2.17` | How many times taller than wide one terminal cell is. Change it when pictures look squashed or stretched. |
| `reply-media` | `resumedReplies` | `3` | How many of a resumed session's last replies get their pictures drawn again. |
| `reply-markdown` | `tableBorder` | `bold` | `round`, `single` or `bold`. |
| `reply-markdown` | `cardBorder` | `round` | The border of a code card and of a callout box: `round`, `single` or `bold`. |

## Colors

The colors are written into the code to match one dark theme, which is not in this repo. For another theme, edit the constants at the top of each file: `COLORS` in `statusline.mjs`, `COLOR` and `CALLOUT` in `mods/reply-markdown/hooks/register.tsx`, and `THEME` in `mods/reply-media/render/render.mjs`.

## Checks

Run these after a change, from the repo's root:

```bash
claude plugin validate mods/<name> && claude plugin test mods/<name>
npx -p typescript tsc -p mods/<name>
(cd mods/reply-media/render && npm test)
echo '{}' | node statusline.mjs && node --test statusline.test.mjs
```

The types check works once Claude Code has loaded the mod and written its types to `mods/<name>/.claude-plugin/types/`. `CLAUDE.md` has the notes for changing or adding a mod.