reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
시작하기
개요
시작하기
Next.js 설치
Manual install
핵심 개념
아키텍처
컴포지션 패턴
접근성
키보드 패턴
스타일링
로컬라이제이션
테마 시스템
고급 패턴
구축·운영
Skills
AI 연동
CLI (opt surface add)
의존 그래프
도구
Canvas 카탈로그
Theme Builder
Form Builder
템플릿
템플릿
릴리즈
릴리즈 노트
Oopt-ui
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

구축·운영
  1. 문서
  2. /
  3. 구축·운영
  4. /
  5. Skills

Skills

opt-ui 설치, 환경 진단, 컴포넌트 생성, repo 동기화, release 워크플로우를 정리합니다.

reopt design · 업데이트 2026년 8월 2일

1. 두 종류의 Skills

opt 디자인 시스템에는 실행 위치와 소유 저장소가 다른 두 종류의 스킬이 있습니다. 소비자 프로젝트용 설치·업그레이드 스킬의 단일 기준은

reopt-ai/reopt-skills

이고, 이 모노레포의 컴포넌트 제작·검토·배포 스킬은 packages/opt-ui-skills가 소유합니다.

  • Consumer skills: 실제 앱에서 패키지를 설치·업그레이드하고 프로젝트 설정과 검증을 수행합니다.

  • Maintainer skills: reopt-design 안에서 컴포넌트 생성, 가이드 검토, E2E, 문서 예제, 배포 작업을 수행합니다.

2. 소비자 스킬 설치

소비자 프로젝트 루트에서 skills CLI로 설치합니다. Claude Code, Cursor, Codex, Cline, Gemini CLI 등 skills.sh 호환 런타임에서 같은 명령을 사용합니다.

bash
# opt-ui 전용 스킬만 설치
npx skills add reopt-ai/reopt-skills/opt-ui-install

# reopt 스킬 전체 설치

npx skills add reopt-ai/reopt-skills

설치 후 에이전트에게

opt-ui-install 스킬로 이 프로젝트에 @reopt-ai/opt-ui를 설정하고 검증해줘

라고 요청합니다. 설치 여부를 감지해 신규 설치와 업그레이드를 자동 구분합니다.

3. 현재 소비자 스킬

Skill대상지원 범위
opt-ui-install@reopt-ai/opt-ui설치·업그레이드, Tailwind v4, theme provider, doctor, Surface
opt-datagrid-install@reopt-ai/opt-datagrid설치·업그레이드, 타 grid 마이그레이션, 검증
opt-editor-install@reopt-ai/opt-editor설치·업그레이드, 필수 CSS, Editor, 선택적 AI 스트리밍
opt-chat-install@reopt-ai/opt-chat설치·업그레이드, 스타일, AI SDK endpoint, Conversation
opt-shell-install@reopt-ai/opt-shell구 opt-harness 전환, peer, recipe, policy, adapter
brandapp-sdk-install@reopt-ai/brandapp-sdk공개 npm 전환, 환경 변수, SDK·auth·EAV 기반

4. v2 스킬이 프로젝트에 남기는 것

  1. 소비자 프로젝트의 AGENTS.md에 reopt marker 블록을 기록합니다. 파일이 없을 때만 CLAUDE.md를 사용하며 두 파일을 동시에 수정하지 않습니다.

  2. 재실행할 때 marker 내부만 교체하므로 프로젝트 고유 지침은 보존되고 중복 블록이 생기지 않습니다.

  3. API를 스킬 안에 복제하지 않고 설치된 패키지 버전의 dist/docs/ , README.md 또는 shell-llms.txt를 읽습니다.

  4. 레거시 registry override, peer dependency, CSS, provider, doctor, typecheck처럼 소비자 프로젝트에서만 결정할 수 있는 설정을 처리합니다.

5. 전용 설치 스킬이 없는 모듈

모듈현재 안내
opt-charts

opt-ui-install로 theme 기반만 준비하고 패키지는 수동 설치

opt-calendar

Shell 통합 시 opt-shell-install을 먼저 적용하고 Calendar와 CSS는 수동 연결

opt-cli

opt-ui-install이 doctor·Surface 흐름에서 연결하며 단독 사용은 수동 설치

opt-devtool전용 스킬 없음. 개발 의존성·production guard·bridge를 수동 연결
opt-ui-primitives

대부분 opt-ui-install을 통해 간접 사용하며 저수준 직접 사용만 수동 설치

opt-palette

opt-shell-install이 필수 peer로 검증하며 standalone 사용만 수동 설치

공통 기반 스킬은 해당 패키지를 설치한다고 보장하지 않습니다. 각 모듈의 시작하기에는 자동 처리 범위와 수동 단계가 분리되어 있습니다.

6. reopt-design 메인테이너 스킬

Skill용도
opt-ui-createCore·Shell 컴포넌트 scaffold
opt-ui-guide레이어·토큰·접근성 가이드 검토
opt-e2e-loop문서 데모와 컴포넌트 E2E 루프
opt-datagrid-backend원격 DataGrid backend 계약 설계·검토
explore-example-create새 explore 예제 생성
explore-example-reviewexplore 예제 품질 검토
design-publish디자인 패키지 배포 preflight와 release

이 스킬들은 소비자 앱에 설치하는 스킬이 아니며 reopt-design 저장소에서만 실행합니다. consumer-facing 스킬을 packages/opt-ui-skills에 복제하거나 유지보수하지 않습니다.

7. 적용 후 확인

  • 스킬은 반드시 실제 소비자 프로젝트 루트에서 실행합니다.
  • marker 블록이 하나만 존재하고 프로젝트 고유 지침이 보존됐는지 확인합니다.

  • 스킬이 안내한 패키지 문서 경로가 설치된 버전에 실제로 존재하는지 확인합니다.

  • typecheck와 모듈별 doctor·smoke 검증이 통과해야 완료로 봅니다.
  • 스킬의 최신 지원 버전은 reopt-skills의 COMPATIBILITY.md를 기준으로 확인합니다.

Previous고급 패턴DataTable 필터링, DashboardGrid 반응형, Toast 알림, Combobox 그룹화핵심 개념
고급 패턴 페이지로 이동
NextAI 연동AI 에이전트용 컴포넌트 선택 트리, 의도-컴포넌트 매핑, 코드 생성 템플릿구축·운영