reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Start
Start
Playground
Core Concepts
Core Concepts
Editor
Editor 개요
Block Types
Streaming
Markdown Conversion
Build & Operate
Skills
App Composition Guide
AI Integration
Authoring Playbook
Custom Blocks
Release Notes
Oopt-editor
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Build & Operate
  1. Docs
  2. /
  3. Build & Operate
  4. /
  5. Skills

Skills

opt-editor 설치, 환경 진단, Plate 마이그레이션, 업그레이드, release용 action skill을 정리합니다.

reopt design · Updated Aug 2, 2026

시작하기Playground핵심 개념개요블록 타입스트리밍Markdown 변환Skills앱 조합 가이드AI 연동Authoring 플레이북커스텀 블록릴리즈 노트

1. Editor 소비자 스킬

소비자 프로젝트의 공식 진입점은 opt-editor-install 하나입니다. 과거 별도 문서에 있던 opt-editor-doctor와 opt-editor-migrate는 현재 reopt-skills v2에 존재하지 않습니다. 설치 상태를 읽어 신규 설치와 업그레이드를 구분하고, 필요할 때 AI 스트리밍 연결을 함께 처리합니다.

권장 설정: 전용 스킬

신규 설치와 업그레이드, 필수 CSS와 첫 Editor 연결, 선택적 AI 스트리밍 설정 및 검증을 처리합니다.

소비자 프로젝트 루트에서 스킬을 에이전트 런타임에 설치합니다. 이미 설치했다면 이 명령은 생략할 수 있습니다.

bash
npx skills add reopt-ai/reopt-skills/opt-editor-install

설치 후 에이전트에게 아래처럼 요청하세요. 스킬은 현재 설치 상태를 확인해 신규 설치와 업그레이드를 구분합니다.

text
opt-editor-install 스킬로 이 프로젝트에 @reopt-ai/opt-editor을 설정하고 결과까지 검증해줘.

스킬은 소비자 프로젝트의 AGENTS.md(없으면 CLAUDE.md)에 reopt marker 블록을 멱등하게 갱신하고, 설치된 패키지 버전의 문서를 읽은 뒤 typecheck·doctor 등 해당 모듈의 검증을 실행합니다.

아래 패키지 설치 명령은 스킬을 사용할 수 없거나 설정 과정을 직접 통제해야 할 때의 수동 대안입니다. 스킬 소스와 최신 지원 범위 확인.

2. 지원 모드

text
opt-editor-install             # 미설치면 install, 설치됐으면 upgrade
opt-editor-install --with-ai   # AI 스트리밍 포함
opt-editor-install 1.1.2       # 대상 버전 지정
opt-editor-install --dry-run   # 변경 없이 분석

Plate·Slate 전환은 현재 독립 자동화 스킬로 제공되지 않습니다. 기존 데이터 모델과 block schema를 분석한 뒤 패키지의 migration 문서와 recipe를 기준으로 별도 계획을 세워야 합니다.

3. 패키지 문서와 역할 분리

  • 스킬은 설치된 node_modules/@reopt-ai/opt-editor/dist/docs/index.md를 시작점으로 실제 버전의 component·recipe·migration 문서를 읽습니다.

  • 신규 설치에서는 필수 stylesheet, store/catalog, 첫 Editor 렌더링을 연결합니다.

  • --with-ai 요청에서만 optional AI SDK·Zod peer와 서버/클라이언트 스트리밍 경계를 연결합니다.

  • API 표면과 block schema를 스킬 안에 복제하지 않습니다.

4. 메인테이너 워크플로우

Skill실행 위치용도
opt-e2e-loopreopt-designEditor 문서 데모와 상호작용 E2E 검증
design-publishreopt-design패키지 배포 preflight와 release

메인테이너 스킬은 packages/opt-ui-skills가 소유하고, 소비자용 opt-editor-install은

reopt-skills

가 소유합니다.

5. 완료 기준

  • 공개 npm registry를 사용하며 legacy registry override가 없어야 합니다.

  • @reopt-ai/opt-editor/styles.css가 한 번 import되어야 합니다.

  • Editor가 Client Component 경계 안에서 store와 catalog를 받아야 합니다.

  • AI를 선택했다면 server route와 client adapter 양쪽을 검증합니다.
  • typecheck와 기본 편집·undo·stream smoke가 통과해야 합니다.
PreviousMarkdown ConversionspecToMarkdown and markdownToSpec for AI context and Markdown import.Editor
Go to Markdown Conversion
NextApp Composition Guideopt-ui 화면 안에 Editor를 어떤 경계로 넣고 언제 독립 authoring 상태로 다뤄야 하는지 정리합니다.Build & Operate