dsui 스킬

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

스킬이 뭐예요

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

스킬이 알려 주는 것:

항목을 찾는 법(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 서버는 무엇이 있는지를 알려 줘요. 둘을 함께 쓰면 AI가 search_items로 항목을 찾고 get_item으로 소스를 읽은 뒤, 스킬의 규칙대로 조합해요. MCP 서버의 get_skill 도구로도 스킬을 읽을 수 있어서, 파일을 내려받지 않고 AI가 필요할 때 가져가게 할 수도 있어요. MCP 없이도 스킬은 llms.txt와 항목 마크다운 주소를 읽는 방식으로 동작해요.

갱신하기

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