시작하기
공개 npm 설치 흐름과 Next.js/manual 셋업 가이드를 빠르게 연결합니다.
reopt designUpdated
1. 배포 모델
opt-ui 패키지는 npmjs.org에 public으로 배포됩니다. 소비자는 별도 registry 설정이나 인증 없이 설치할 수 있습니다.
@reopt-ai/opt-ui,@reopt-ai/opt-cli,@reopt-ai/opt-ui-primitives,@reopt-ai/opt-charts가 public 배포 대상입니다.Surface 템플릿은
@reopt-ai/opt-cli의surface서브커맨드가 공식 배포 채널입니다.opt-datagrid,opt-editor설치는 각 패키지 문서의 시작하기 가이드를 따릅니다.
2. 권장 설치 경로
권장 설정: 전용 스킬
패키지 설치·업그레이드, Tailwind v4와 OptThemeProvider 연결, opt doctor 검증, Surface 추가 흐름을 처리합니다.
소비자 프로젝트 루트에서 스킬을 에이전트 런타임에 설치합니다. 이미 설치했다면 이 명령은 생략할 수 있습니다.
npx skills add reopt-ai/reopt-skills/opt-ui-install설치 후 에이전트에게 아래처럼 요청하세요. 스킬은 현재 설치 상태를 확인해 신규 설치와 업그레이드를 구분합니다.
opt-ui-install 스킬로 이 프로젝트에 @reopt-ai/opt-ui을 설정하고 결과까지 검증해줘.스킬은 소비자 프로젝트의 AGENTS.md(없으면 CLAUDE.md)에 reopt marker 블록을 멱등하게 갱신하고, 설치된 패키지 버전의 문서를 읽은 뒤 typecheck·doctor 등 해당 모듈의 검증을 실행합니다.
아래 패키지 설치 명령은 스킬을 사용할 수 없거나 설정 과정을 직접 통제해야 할 때의 수동 대안입니다. 스킬 소스와 최신 지원 범위 확인.
3. 가이드 선택
셋업은 Next.js App Router를 기본 경로로 두고, 다른 환경은 manual install 문서를 제공합니다.
4. 빠른 시작
Next.js 기준 빠른 시작은 아래 흐름입니다.
bun add @reopt-ai/opt-ui
bun add -d tailwindcss @tailwindcss/postcss postcss
npx @reopt-ai/opt-cli surface add billing-pageCore/Shells는 @reopt-ai/opt-ui, 차트는
@reopt-ai/opt-charts import로 사용하고, Surface는 CLI로 소스를
복사해 프로젝트 내부에서 수정하는 방식을 기본으로 합니다.
5. 유지보수자 메모
유지보수자 배포는 직접
npm publish나bun run release*를 사용하지 않고/design-publish opt-ui만 사용합니다.Surface 또는 registry 입력이 바뀌면 CLI를 함께 배포해야 최신 Surface가 소비자에게 전달됩니다.
CI는 publish snapshot,
registry.json,dist/docs/freshness를 함께 검증합니다.