# ThreeUI CLI

[English](README.md)

[ThreeUI Community](https://github.com/MengTo/threeui)를 위한 shadcn 방식의 소스 설치 도구입니다. 필요한 에셋까지 한 번에 복사하고 코드는 내 프로젝트에 남깁니다.

```bash
npx threeui-cli add kage-landing-page
```

![터미널에서 완전한 ThreeUI 랜딩 페이지 설치](https://raw.githubusercontent.com/sjh9714/threeui-cli/main/docs/assets/demo.gif)

위 예제는 Kage의 HTML 페이지, WebGL 에셋, 편집 가능한 React 소스를 명령 하나로 설치합니다. 파일을 쓰기 전에 공식 카탈로그의 SHA-256 해시와 모두 비교합니다.

## 패키지와 소스 설치

ThreeUI를 의존성으로 사용하려면 공식 [`@designcodeio/threeui`](https://www.npmjs.com/package/@designcodeio/threeui) 패키지를 사용하면 됩니다.

소스를 프로젝트 안에서 직접 편집하려면 이 CLI를 사용합니다. 완전한 HTML 컴포넌트에 필요한 공용 파일과 공개 에셋을 함께 찾고, 원래 상대 경로를 유지하며, 요청하지 않은 기존 파일은 덮어쓰지 않습니다.

## 컴포넌트 찾기

```bash
npx threeui-cli list
npx threeui-cli search "landing page"
```

프로젝트 루트에서 원하는 컴포넌트를 추가합니다.

```bash
npx threeui-cli add predictive-arc
npx threeui-cli add spark-badge --target ./app
```

`--dry-run`은 파일을 쓰지 않고 검증만 합니다. 기존 경로가 있으면 설치를 중단하며, 명시적으로 `--force`를 준 경우에만 덮어씁니다.

## 코딩 에이전트에서 사용

```bash
npx skills add sjh9714/threeui-cli
```

그다음 Codex나 `SKILL.md` 형식을 지원하는 에이전트에게 원하는 ThreeUI 컴포넌트를 요청합니다. 에이전트도 스크린샷을 흉내 내지 않고 같은 CLI로 검증된 소스를 가져옵니다.

## 복사되는 파일

- 선택한 컴포넌트 소스
- 필요한 공용 소스 파일
- 공식 저장소의 바이너리 에셋
- 컴포넌트가 기대하는 원래 상대 경로

`--force`를 지정하지 않으면 기존 파일을 덮어쓰지 않습니다. 소스와 에셋은 파일을 쓰기 전에 공식 레지스트리의 해시와 비교합니다.

## Community 카탈로그

현재 React, DOM과 CSS, Canvas 2D, WebGL, Three.js로 만든 Community 컴포넌트 50개가 있습니다. `list`는 upstream 레지스트리를 실시간으로 읽으므로 고정 목록이 오래될 일이 없습니다.

![ThreeUI Community 카탈로그](https://raw.githubusercontent.com/MengTo/threeui/main/assets/preview.jpg)

## 출처

컴포넌트와 소스의 저작권은 [ThreeUI Community](https://github.com/MengTo/threeui)에 있으며 MIT 라이선스를 따릅니다. 이 저장소는 ThreeUI와 제휴하지 않은 독립 소스 설치 도구입니다.

## 라이선스

MIT