스킬

1. opt-calendar 스킬이란

Claude Code 스킬은 특정 작업 흐름을 대화형으로 처리하는 실행형 액션 가이드입니다. opt-calendar 스킬은 소비자 프로젝트에서 패키지 설치, styles.css import, 첫 Calendar 스캐폴딩, 원격·AI 배선까지를 한 흐름으로 자동화합니다.

props·타입·훅 시그니처 같은 읽기 전용 레퍼런스는 이 문서와 node_modules/@reopt-ai/opt-calendar/dist/docs/에서 확인하고, 실제 설치·전환·배선 결정은 스킬로 처리하는 것이 안전합니다.

2. 스킬이 수행하는 작업

설치 스킬은 아래 단계를 순서대로 처리하고, 각 단계 뒤에 typecheck / lint로 검증합니다.

• 패키지 설치: GitHub Packages 인증(.npmrc) 구성 후 @reopt-ai/opt-calendar 설치, react ^19 peer 확인.
• 스타일 import: 진입점에 import "@reopt-ai/opt-calendar/styles.css" 주입 (시간 그리드 구조 CSS).
• Calendar 스캐폴딩: createEmptyCalendarSpec + createCalendarStore로 store를 만들고 Calendar를 렌더하는 첫 컴포넌트 생성. 용도에 맞춰 variant(events / booking) 선택.
• 원격 소스 배선: 필요 시 useCalendarRemoteSource로 보이는 윈도우만 fetch하고 편집을 batch save하도록 연결.
• AI 스트리밍 배선: 필요 시 useCalendarSuggestion과 catalog를 연결해 NDJSON 패치 스트림을 shadow draft로 미리보기.

3. 스킬 실행

소비자 프로젝트 루트에서 Claude Code에게 자연어로 지시하면 스킬이 실행됩니다. 스킬은 현재 설치 여부를 감지해 신규 설치와 업그레이드를 알아서 구분합니다.

# 소비자 프로젝트에서 Claude Code에게 지시 (예시)
opt-calendar install
# 또는: "opt-calendar 설치", "set up calendar", "캘린더 붙여줘"

# 이미 설치된 프로젝트라면 업그레이드로 분기
opt-calendar upgrade

repo를 잘못 고르면 경로 해석과 설치 대상 탐지가 달라지므로, 설치·통합 스킬은 항상 소비자 프로젝트에서 실행합니다. 반면 패키지 자체의 사설 배포는 opt-ui 모노레포에서 /design-publish로 처리합니다.

4. 수동 설치와 비교

스킬 없이 직접 설치할 수도 있습니다. 아래는 스킬이 내부에서 처리하는 것과 동일한 수동 절차입니다.

# .npmrc — GitHub Packages 인증
@reopt-ai:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

# 설치
npm install @reopt-ai/opt-calendar
# 또는
bun add @reopt-ai/opt-calendar

import {
  Calendar,
  createCalendarStore,
  createEmptyCalendarSpec,
} from "@reopt-ai/opt-calendar";
import "@reopt-ai/opt-calendar/styles.css";

5. 관련 문서