새로운 Mods 기능이 마음에 드네요

고마워! 여기서 이런 거 많이 봤는데 어쩌다 보니 바빠서(아니면 귀찮아서) 직접 해보질 못했네.
Sonnet 5.5 medium으로 만든 결과물이야(프롬프트를 좀 수정해서 모던하고 미니멀한 디자인으로 요청했어).

5분 뒤: 사실 Sonnet 5.5에서 문제가 좀 있었어. Sonnet이 수정한 내용 때문에 모드 바가 아예 숨겨져 버려서(렌더링이 안 됨) Opus 5.5 medium으로 바꿨더니 프롬프트 한 번에 바로 작동하더라.

진짜 만족스러워!

이건 내가 쓴 프롬프트야:

"quota-bar"라는 이름의 Claude Code 모드(훅 플러그인)를 만들어줘. plugin-authoring 스킬을 먼저 로드하고 따라해.

기능

프롬프트 입력창 위(ui.render 컴포넌트 "AbovePrompt")에 컨텍스트 윈도우와 플랜 사용량 제한을 보여주는 바를 띄워줘. 위에서 아래 순서대로:

1. 헤드라인: Claude의 설정 > 사용량 페이지 스타일로 굵게 표시된 문장 하나. 예: "정상 범위. 수요일 초기화 전까지 여유 있음." 제한 시간이 다 되어가면(앰버나 레드): "이 속도면 수요일 초기화 전에 다 써버림." 제한 도달 시: "제한 도달. <reset>에 사용량 초기화됨." 모든 게 정상일 땐 주간 윈도우 기준으로 문장을 작성해. 초기화가 오늘이면 "오후 8시 40분 초기화"라고 하고, 아니면 요일 이름을 써.

2. 컨텍스트 행: 왼쪽에 굵게 "컨텍스트 N% 사용됨", 사용량에 따라 초록/앰버/레드 색상(임계값 70/90). 오른쪽에 흐린 색으로 "1.0M 중 882k 남음".

3. 쌓인 바 하나, /context 카테고리당 색상 하나: 여유 공간은 어두운 색, 자동 압축 버퍼는 밝은 회색, 지연된 툴은 제외.

4. 점 없는 범례: 각 카테고리 이름을 해당 바 색상으로 쓰고, 옆에 토큰 수를 흐린 회색으로 표시. 윈도우의 0.3% 미만인 카테고리는 숨겨.

5. 레이트 리밋 윈도우당 한 행씩, "5시간"(five_hour)과 "주간"(seven_day)으로 라벨링. 각 행에는 16칸짜리 투톤 바, 굵은 % 수치, 그리고 "초기화까지 3일 7시간 남음 - 약 86% 예상"이나 다 써갈 땐 "초기화 2시간 전 - 5시간 후 초기화" 같은 흐린 예측 문구를 넣어.

예측

선형 예측: 비율 = 사용된 퍼센트 / 윈도우 내 경과 시간(윈도우 길이 - 초기화까지 남은 시간). 초기화 시점의 예상 사용량이 100% 미만이면 정상. 아니면 소진 시간은 현재 + (100 - p) / 비율; 앰버나 레드로 색칠해(예측치가 130%를 넘으면 레드). 초기 예측은 불안정하니까 윈도우의 첫 3%는 "정상"으로 간주해.

데이터

$.session.usage({ breakdown: 'summary' }), 로컬 추정치니까 API 요청을 보내지 않고 토큰도 안 써. session.start, session.measure, turn.complete, 그리고 바가 켜질 때 새로고침해. types/index.d.ts에 선언된 원자(atoms)를 통해 $.state에 스냅샷을 유지해. 새로고침 실패 시 $.ui.status를 통해 에러를 보여줘.

토글

바를 켜고 끄는 /quota 슬래시 명령어를 등록해. 기본값은 켜짐.

스타일

모던하고 미니멀하게: 부드러운 팔레트(#a78bfa, #60a5fa, #f472b6, #34d399, #fbbf24, #fb923c, #22d3ee, #c084fc), 보조 텍스트는 흐린 회색 #8b90a0, 초록 #4ade80, 앰버 #fbbf24, 레드 #f87171. 구분자는 " · "가 아니라 en dash " – "를 써. 시스템 로케일과 상관없이 모든 시간과 요일은 'en-US' 형식으로 해.

주의사항

• 바는 반복되는 블록 문자가 아니라 backgroundColor와 flexGrow를 가진 Box로 그려. 문자 바는 데스크톱 앱에서 측정이 잘못되거나 줄바꿈/잘림 현상이 발생함.

• flexGrow는 10000 이하의 유한한 숫자여야 함. 각 세그먼트의 윈도우 점유율을 1000 정도로 스케일링해서 써(최소 1, 원본 토큰 수 절대 금지). 원본 수치를 쓰면 엔진이 바 전체를 거부하고 조용히 사라짐.

• Text 안에 Text를 중첩하지 마. 색상이 있는 모든 Box에 <Text> </Text> 자식을 줘.

• session.usage와 clock.now를 모킹하는 tests/band.test.tsx를 작성해.

이거 CLI 앱이야 아니면 데스크톱 앱이야??

스크린샷 보면 딱 봐도 데스크톱 앱이구만.

어떤 프롬프트를 썼나요?

"내 컨텍스트 윈도우를 프롬프트 위에 쌓인 막대 형태로 그려주는 모드를 만들어줘. /context처럼 카테고리별로 색상을 다르게 하고, /context-bar로 토글할 수 있게 해줘."

그다음엔 이렇게 했어: "Claude 설정의 사용량 페이지를 보면 현재 사용량을 바탕으로 크레딧이 언제 소진될지 예측해주는 아주 유용한 정보가 있는데, 내가 말하는 게 뭔지 확인하고 그걸 우리 모드의 사용량 정보에 추가해줄 수 있어? 이게 내가 말하는 페이지야(스크린샷 확인)." (그리고 해당 페이지 스크린샷을 붙여넣었음).