TypeScript로 Claude Code mod 만들기

1. 동작 하나를 정하세요

저장, 백그라운드 작업이나 통신 전에 /hello 명령부터 만드세요. Mods를 지원하는 Claude Code를 사용하고 온라인 예제와 다르면 설치 버전의 선언을 기준으로 삼으세요.

2. 파일 세 개를 만드세요

Manifest는 .claude-plugin/plugin.json, 모듈 목록은 hooks/hooks.json, 진입 파일은 hooks/register.tsx에 둡니다. modules 경로는 hooks.json 기준입니다.생성기에서 slash-command를 선택해 다운로드하세요.

3. 처리 함수를 등록하세요

claude-code의 Register를 타입 전용으로 import하세요. session.start에서 명령을 등록하고 command.run에서 처리합니다. next(e)는 원래 이벤트를 진행하며 명령 처리 함수의 반환값은 응답이 됩니다. 타입만 얻으려고 Node 런타임 종속성을 추가하지 마세요.

4. 로컬에서 검증하세요

신뢰하는 테스트 프로젝트에서 플러그인 디렉터리를 로드하고 생성된 .claude-plugin/types를 확인하세요. 플러그인 경로를 지정해 claude plugin validate를 실행하고 /hello, 다시 로드, 중지를 테스트하세요. 구조 검증은 모든 실행 동작을 보장하지 않습니다.

5. 하나씩 확장하세요

UI 요소는 지원 surface의 요소 표에서 얻으며 DOM이나 React를 전제하지 않습니다. 버전, 권한, 설치와 제거를 기록하고 실패 경로와 자원 정리를 확인하세요.

공식 제작 가이드 · 공식 API

import type { Register } from "claude-code";
export const register: Register = (on) => {
  on("session.start", async ($, e, next) => {
    await $.command.register({ name: "hello", description: "Say hello" });
    return next(e);
  });
  on("command.run", { command: "hello" }, async () => ({ text: "Hello" }));
};