# dsui 스킬

> Claude Code 같은 AI 도구가 dsui를 규칙대로 쓰게 하는 스킬을 내 프로젝트에 넣는 방법을 알려 드려요.

- URL: https://dsui.vercel.app/docs/skill

## 스킬이 뭐예요

dsui 스킬은 AI 코딩 도구(Claude Code 등)에게 **dsui로 화면을 만드는 순서와 규칙**을 알려 주는 지침 묶음이에요. 스킬이 있으면 AI가 "항목을 찾고, 읽고, 설치하고, 규칙을 지켜 조합하고, 점검하는" 순서를 따라요. 컴포넌트 소스를 대신하지는 않아요. 소스는 [설치](/docs/installation)로 받아요.

스킬이 알려 주는 것:

- 항목을 찾는 법(`llms.txt`, MCP의 `search_items`)과 설치하는 법
- 토큰만 쓰기, 라이트와 다크 확인, 테마
- 해요체 문구, 스플래시, 떠 있는 컴포넌트, 입력 필드, 그림자 색 규칙
- 조작마다 소리 하나(`playUiSound`), 모션 토큰(`motionTokens`), 움직임 줄이기, 한글 입력기
- 끝내기 전 점검표

## 파일 구성

| 파일 | 내용 |
| --- | --- |
| `SKILL.md` | 언제 쓰는지, 작업 순서, 지킬 규칙 요약 |
| `references/install.md` | 설치, 파일 위치, 공통 기반, MCP 도구 |
| `references/tokens.md` | 색, 모서리, 그림자, 서체, 테마와 다크 모드 |
| `references/experience.md` | 문구 톤, 스플래시, 떠 있는 컴포넌트, 입력 필드, 그림자 색 |
| `references/sound-and-motion.md` | 소리 역할 11개, 모션 토큰, 움직임 줄이기, 한글 입력기 |
| `references/components.md` | 항목 고르기, 조합 요령, 흔한 실수 |
| `references/checklist.md` | 끝내기 전 점검표 |

각 파일은 마크다운으로 받을 수 있어요: `https://dsui.vercel.app/skill/SKILL.md`, `https://dsui.vercel.app/skill/references/<이름>.md`.

## 내 프로젝트에 넣기

프로젝트의 `.claude/skills/dsui/`에 파일을 내려받아요. 내 컴퓨터 모든 프로젝트에서 쓰려면 `~/.claude/skills/dsui/`에 넣어요.

```bash
base=https://dsui.vercel.app/skill
dir=.claude/skills/dsui
mkdir -p $dir/references
curl -fsSL $base/SKILL.md -o $dir/SKILL.md
for f in install tokens experience sound-and-motion components checklist; do
  curl -fsSL $base/references/$f.md -o $dir/references/$f.md
done
```

새 대화를 열면 AI가 `dsui` 스킬을 알아봐요. dsui로 화면을 만들거나 고치는 요청이면 저절로 불러오고, `/`로 직접 불러도 돼요. 저장소를 복사해 두었다면 `skills/dsui/` 폴더를 그대로 `.claude/skills/`에 넣어도 같아요.

## MCP 서버와 함께 쓰기

스킬은 **어떻게 쓸지**를, [MCP 서버](/docs/ai)는 **무엇이 있는지**를 알려 줘요. 둘을 함께 쓰면 AI가 `search_items`로 항목을 찾고 `get_item`으로 소스를 읽은 뒤, 스킬의 규칙대로 조합해요. MCP 서버의 `get_skill` 도구로도 스킬을 읽을 수 있어서, 파일을 내려받지 않고 AI가 필요할 때 가져가게 할 수도 있어요. MCP 없이도 스킬은 `llms.txt`와 항목 마크다운 주소를 읽는 방식으로 동작해요.

## 갱신하기

규칙이 바뀌면 스킬도 바뀌어요. 위 명령을 다시 실행하면 최신 파일로 덮어써요. [변경 이력](/docs/changelog)에서 스킬이 바뀐 버전을 볼 수 있어요. 스킬 본문은 한국어로 쓰여 있어요.