ibelick/ui-skills 딥다이브
— AI에게 "딱 필요한 UI 스킬만" 골라 먹이는 라우터

1프로젝트 한 줄 요약

ibelick/ui-skills(제품명 UI Skills)는 "AI 코딩 에이전트를 위한 UI/디자인 스킬 색인 겸 라우터"다. 2026년 들어 Claude Code·Cursor·Codex 같은 에이전트에 물려 주는 스킬(SKILL.md)이 폭발적으로 쏟아졌는데, 문제는 "너무 많다"는 것이다. UI Skills는 이 혼돈 위에 얹히는 큐레이션 + 안내 레이어다 — 179개의 UI 스킬을 카테고리별로 색인하고, 작업 하나에 딱 필요한 1~3개만 골라 에이전트의 컨텍스트에 넣게 한다.

이 저장소에는 성격이 다른 두 물건이 함께 들어 있다. 하나는 CLI(npx ui-skills) — 터미널에서 카테고리를 훑고 스킬 본문을 꺼내 오는 명령어 도구. 다른 하나는 웹사이트(ui-skills.com) — Astro로 만든 서버 렌더링 사이트로, 사람에게는 예쁜 카탈로그를, 에이전트에게는 llms.txt·registry.txt 같은 기계가 읽기 좋은 텍스트 엔드포인트를 준다. 놀라운 점은 179개 스킬 중 저장소가 직접 품은 건 단 6개뿐이고, 나머지 173개는 다른 사람들 저장소를 가리키는 링크(포인터)라는 것 — 즉 UI Skills는 거대한 코드 뭉치가 아니라 주소록에 가깝다.

2왜 지금 주목받는가

2026년의 개발 트렌드를 한 단어로 요약하면 "스킬(Skills)"이다. OSSInsight 일간 트렌딩 목록만 봐도 절반이 *-skills 저장소일 정도로, 누구나 자기만의 SKILL.md 묶음을 쏟아 내고 있다. 그런데 이렇게 스킬이 많아질수록 진짜 문제는 "이 많은 스킬 중 지금 작업엔 뭘 써야 하고, 그걸 어떻게 컨텍스트에 넣지?"로 옮겨 간다. UI Skills는 정확히 이 빈틈을 파고든다 — 스킬을 또 만드는 게 아니라, 흩어진 스킬들을 색인하고 골라 주는 라우터를 자처한다.

주목 포인트 1 — 스킬을 "더" 만드는 대신 "고르는" 층을 만들었다

대부분의 트렌딩 스킬 저장소는 "내가 만든 232개 스킬 모음!"처럼 양을 자랑한다. UI Skills는 반대 방향이다. 핵심 제품은 스킬이 아니라 라우터 스킬 하나(ui-skills-root)와 레지스트리다. "무엇을 읽을지 결정하는 얇은 뇌"를 맨 앞에 두고, 실제 지식은 필요할 때만 불러온다. 스킬 인플레이션 시대에 "큐레이션과 라우팅이 곧 가치"라는 베팅이고, 이게 신선하게 먹혔다.

주목 포인트 2 — "디슬롭(deslop)"이라는 시대정신

AI가 짠 UI는 특유의 냄새가 있다 — 보라색 그라데이션, 과한 글로우, 아무 데나 붙은 애니메이션, 제각각인 여백. UI Skills의 간판 스킬 baseline-ui는 이걸 "슬롭(slop, AI가 뱉는 밋밋·조잡한 결과물)"이라 부르며, "NEVER use purple or multicolor gradients", "NEVER exceed 200ms for interaction feedback", "MUST use h-dvh not h-screen" 같은 수십 개 규칙으로 잡아낸다. 2026년 "AI 슬롭에 질렸다"는 정서와 정확히 맞물려, 이 안티슬롭 규칙집이 입소문의 중심이 됐다.

주목 포인트 3 — 에이전트 네이티브 웹이라는 설계

UI Skills 웹사이트는 사람만을 위한 게 아니다. 모든 페이지에 기계가 읽는 쌍둥이가 있다 — 사이트 전체 지도는 /llms.txt, 스킬 색인은 /skills/registry.txt(탭 구분 텍스트), 스킬 하나하나는 /skills/<slug>/llms.txt로 원본 SKILL.md를 그대로 내려 준다. 에이전트가 방문해도 곧바로 소화할 수 있는 웹을 어떻게 짓는지 보여 주는 좋은 표본이다.

3기술 스택 전체 지도

UI Skills는 하나의 저장소지만 기술적으로는 세 덩어리로 나뉜다: ① 터미널에서 도는 CLI, ② 클라우드플레어에 배포되는 Astro 웹사이트, ③ 모든 것의 원천인 데이터 레이어(레지스트리). 순서대로 지도를 그려 보자.

① CLI — Node + tsx로 TypeScript를 "그대로" 실행

② 웹사이트 — Astro SSR을 Cloudflare Workers 위에서

③ 데이터 · 폰트 · 빌드

4아키텍처 심화 분석

UI Skills의 아키텍처를 이해하는 열쇠는 딱 하나 — 모든 것이 src/data/registry.ts 배열 하나에서 파생된다는 것이다. 스킬 하나를 이 배열에 추가하면, CLI 목록에도·웹 카탈로그에도·llms.txt에도·registry.txt에도·사이트맵에도 자동으로 나타난다. 이 단일 진실원(SSOT, Single Source Of Truth) 패턴이 전체 구조를 떠받친다.

설계 패턴 1 — 라우터 스킬(Progressive Disclosure)

가장 핵심적인 발상. ui-skills-root/SKILL.md는 "UI 작업을 하는" 스킬이 아니라 "무엇을 읽을지 고르는" 스킬이다. 그 안의 프로토콜은 이렇게 못 박는다:

# ui-skills-root 의 선택 규칙 (요지)
1. UI 작업인가?  아니면 → "no skill needed" 반환
2. 어느 카테고리인가 판단
3. 그 카테고리를 CLI로 열어 봄 (list --category)
4. 가장 작은 유용한 스킬 묶음만 로드
5. 그 컨텍스트로 구현

Prefer 1 skill. Use 2 only when 두 각도가 필요할 때.
Use 3 only for 광범위 리뷰/재설계.  Never more than 3.

이건 점진적 공개(Progressive Disclosure)의 교과서적 구현이다 — 처음엔 얇은 라우터만 컨텍스트에 있고, 필요가 확인된 뒤에야 무거운 지식이 딱 그만큼 열린다. "자율성"이 아니라 "컨텍스트 절약"을 최적화한다.

설계 패턴 2 — 포인터 레지스트리(연합 구조)

레지스트리 179개 중 6개만 로컬 파일, 173개는 rawUrl로 남의 GitHub를 가리키는 포인터다. 제작자는 42명(MengTo 29개, pbakaus 18개, antfu 17개, mattpocock 13개…). 즉 UI Skills는 스킬을 소유·복제하지 않고 주소만 안다. npm 레지스트리가 패키지 소스를 다 품는 게 아니라 "어디서 받을지"를 아는 것과 같은 구조다. 장점은 원저작자가 자기 저장소에서 스킬을 업데이트하면 UI Skills는 fetch로 항상 최신을 가져온다는 것. 단점은 원본이 사라지면 링크가 깨진다는 것(그래서 CLI의 get은 fetch 실패 시 상태코드로 실패를 알린다).

설계 패턴 3 — 파생 데이터와 충돌 해소

레지스트리 원본(registrySource)에는 pathSlug가 없다. 빌드 시 코드가 계산한다 — 기본은 user/slug(예: ibelick/baseline-ui), 만약 같은 경로가 이미 쓰였으면 user/repo/slug로 자동 충돌 해소. 이렇게 하면 서로 다른 제작자가 같은 이름의 스킬을 올려도 URL이 안 겹친다. 표시용 데이터(skills.ts)는 여기서 한 번 더 가공되며, 정렬은 라우터(ui-skills-root)를 맨 앞, 간판 스킬(baseline-ui)을 두 번째로 고정하고 나머지는 알파벳순으로 놓는다.

설계 패턴 4 — 에이전트 네이티브 엔드포인트

웹의 모든 표면에 기계가 읽는 판본이 붙는다. /llms.txt는 사이트 지도 + 전체 스킬 카탈로그를, /skills/registry.txt는 pathSlug ⇥ rawUrl ⇥ description 탭 구분 표를, /skills/<slug>/llms.txt는 그 스킬의 원본 SKILL.md를 rawUrl에서 당겨 그대로 준다. 여기에 X-Robots-Tag: noindex를 달아 사람 검색엔진에는 안 걸리되 에이전트는 소화하게 한다. GitHub 별 수는 Cloudflare Cache API로 24시간 캐시해 API 호출을 아낀다.

5디렉토리 구조 해부

핵심만 다시 짚으면 — 배울 게 가장 많은 세 곳은 ① bin/ui-skills.ts(작고 깔끔한 Node CLI), ② src/data/registry.ts(SSOT 설계의 실물), ③ skills/ui-skills-root와 baseline-ui(스킬 프롬프트 엔지니어링의 표본)다. 셋 다 짧아서 초보자도 한 번에 통독할 수 있다.

6학습 포인트

배울 것 1 — TypeScript를 컴파일 없이 실행하는 CLI 패턴

bin/ui-skills.js는 아주 실용적인 트릭을 보여 준다. npm의 bin은 .js만 안전하게 가리킬 수 있는데, 정작 로직은 TypeScript로 쓰고 싶다. 해법: 얇은 .js 런처가 tsx를 찾아 node --import tsx 본체.ts를 spawn한다. 자식 프로세스의 종료 코드·시그널까지 부모로 전달해 깔끔히 마무리한다. "TS로 CLI를 쓰되 사용자는 빌드 없이 npx로 바로 실행"이라는 요구를 이렇게 푼다.

// bin/ui-skills.js (요지)
const tsxPath = pathToFileURL(require.resolve("tsx")).href;
const child = spawn(process.execPath,
  ["--import", tsxPath, scriptPath, ...process.argv.slice(2)],
  { stdio: "inherit" });
child.on("exit", (code, signal) => { /* 코드·시그널 전달 */ });

배울 것 2 — 단일 진실원(SSOT)에서 여러 출력 뽑기

데이터를 한 곳(registry.ts)에만 두고, CLI 목록·웹 페이지·llms.txt·registry.txt·사이트맵을 전부 여기서 파생하는 구조는 어떤 프로젝트에도 옮겨 붙일 수 있는 값진 패턴이다. 핵심 교훈: 원본 데이터는 최소한만 담고(pathSlug 같은 건 저장하지 말고 계산하라), 표시·정렬·충돌해소 같은 가공은 파생 단계에서 하라. 그러면 스킬 하나를 추가할 때 손댈 곳이 딱 한 군데다.

배울 것 3 — SKILL.md 프롬프트 엔지니어링(라우터 + 규칙집)

두 자작 스킬은 스타일이 정반대라 나란히 읽으면 교육적이다. ui-skills-root는 "의사결정 절차"형 프롬프트(번호 매긴 프로토콜 + "Never more than 3" 같은 상한). baseline-ui는 "단정형 규칙집"(MUST/NEVER/SHOULD로 수십 개 제약). 전자는 어떻게 고를지, 후자는 무엇을 지킬지를 가르친다. 좋은 스킬은 장황한 설명이 아니라 검증 가능한 단문 규칙의 목록이라는 걸 보여 준다.

배울 것 4 — 엣지에서 도는 Astro SSR + 에이전트 네이티브 웹

Astro를 output: "server"로 두고 Cloudflare Workers에 얹는 실전 구성을 통째로 볼 수 있다. 덤으로 배우는 것들: 후행 슬래시를 정리하는 middleware.ts, 외부 API(GitHub 별)를 Cache API로 캐싱하는 법, 그리고 같은 데이터를 사람용 HTML과 기계용 llms.txt 두 판본으로 서빙하는 에이전트 네이티브 설계. 2026년 "웹을 에이전트가 읽는다"는 전제로 사이트를 짓는 감각을 익히기 좋다.

실습 아이디어(가볍게)

내 프로젝트에도 public/llms.txt를 하나 만들어 "이 사이트는 무엇이고, 주요 페이지는 어디"를 적어 보자. UI Skills의 llms.txt.ts가 좋은 최소 예시다. 또 baseline-ui의 규칙 5개를 골라 .cursor/rules나 CLAUDE.md에 붙여 넣고, 실제로 에이전트 출력이 달라지는지 관찰해 보라.

7시스템 · 실행 요구사항

8직접 해볼 수 있는 실습 과제

9관련 기술 심화 학습 로드맵

10핵심 키워드 사전

11참고 링크

저장소 · 사이트
· GitHub: github.com/ibelick/ui-skills (MIT © 2026 Julien Thibeaut · npm v0.2.3)
· 웹사이트: ui-skills.com · 기계용 색인 /llms.txt, /skills/registry.txt
· npm: npmjs.com/package/ui-skills → npx ui-skills start

핵심 파일(클론 후)
· bin/ui-skills.ts — CLI 본체(4개 명령, 순수 Node)
· src/data/registry.ts — 단일 진실원(179 스킬)
· skills/ui-skills-root/SKILL.md — 라우터 스킬
· skills/baseline-ui/SKILL.md — 안티슬롭 규칙집
· AGENTS.md — 저장소 자체의 에이전트 규칙(스킬 추가법)

배경 지식
· 제작자 ibelick: Motion Primitives, Prompt Kit, Zola
· Astro × Cloudflare 어댑터 문서 · Base UI
· llms.txt 관례 · Model Context Protocol