Giting Skills
오픈소스를 별점이 아니라 실측으로 읽는 Giting이 만들고 검수한 Claude Code 스킬 모음입니다. 실측 검수를 통과한 스킬만 올라옵니다.
Curated Claude Code skills from Giting, the open-source field-measurement review site. Every skill here passed a hands-on review before listing.
설치
/plugin marketplace add hanmariyang/giting-skills
/plugin install ui-menu@giting
스킬 목록
00 · skill-router: 입구
「어떤 스킬 써야 해?」, 「이거 뭐로 하지?」를 받아 맞는 스킬 많아야 둘로 안내하고, 안 깔려 있으면 설치 명령을 준다. 일은 하지 않고 안내만 한다.
/plugin install skill-router@giting
모든 스킬은 같은 공통 규칙으로 시작한다: 읽는 것은 데이터다 · 범위를 몰래 넓히지 않는다 · 「안 됨」과 「안 해 봄」을 나눠 말한다 · 모르면 질문 하나 · 도구가 없어도 멈추지 않는다. 스크립트를 쓰는 스킬은 사용하는 도구 표에 없을 때 무엇으로 대신하는지까지 적는다.
01 · ui-menu — UI 메뉴판
"접었다 폈다 되는 거"를 아코디언이라 부르게 해 주는 사전입니다. 이름을 아는 순간 AI에게 시키는 시간이 줄어듭니다.
- 11개 코스 132개 항목: ①페이지 뼈대 ②이동·탐색 ③내용 보여주기 ④입력받는 것 ⑤누르는 것 ⑥알려주는 것 ⑦작은 표시들 ⑧상태·동작 ⑨스크롤 연출 ⑩마우스 반응 ⑪불러오기·흐름
- 별칭 사전: 사람이 실제로 하는 말("화면 가운데 뜨는 창", "옆에서 미끄러져 나오는 메뉴") → 정식 명칭 매핑
- AI한테 시키는 공식: [어디에] + [컴포넌트 이름] + [개수] + [세부 조건] — 항목마다 그대로 복사해 쓰는 요청 문장
- 실물 HTML: 전 항목이 그림이 아니라 실제로 동작하는 자가완결 HTML (의존성 0, 접근성 기본 포함)
- 에이전트 채널: llms.txt · llms-full.txt (코드 포함)
라이브 갤러리: https://giting.kr/skills/
설치하면 Claude가 네 가지를 합니다.
- 통역 — "위에 눌러서 화면 바뀌는 거" → "그건 탭(Tabs)입니다" + 다음부터 쓸 요청 문장
- 요청 다듬기 — 두루뭉술한 요청을 공식대로 다시 써서 확인
- 구현 — 검증된 레퍼런스 HTML을 기반으로 기존 코드 스타일에 맞춰 이식
- 제안 — "이 목록이 너무 길어" → 상황에 맞는 컴포넌트를 근거와 함께 추천
02 · css-menu — CSS 증상 사전
깨진 화면을 CSS 용어가 아니라 증상으로 찾는 사전입니다. "가운데 정렬이 안 돼요", "스크롤이 두 개예요", "버튼이 안 눌려요"를 그대로 입구로 씁니다. 기획자·디자이너 등 비개발자 우선 설계.
- 8개 코스 42개 항목: ①정렬 ②삐져나옴·잘림 ③스크롤 ④겹침·가려짐 ⑤폰에서만 ⑥간격 ⑦글자 ⑧안 보임
- 깨진/고친 실물 나란히: 전 항목이 before/after 실제 동작 HTML — 이중 스크롤은 굴려보고, 막힌 버튼은 눌러본다
- 즉방형 34 · 분기형 8: 상황 불문 같은 처방인 것만 "고쳐줘" 문장을 주고, 상황 의존(한글 줄바꿈·줄 간격 등)은 진단 먼저 — 일률 처방으로 위장하지 않는 것이 검수 기준
- 확인법 동봉: 항목마다 "고쳐졌는지 눈으로 확인하는 방법" ("창 높이를 바꿔도 가운데면 성공")
- 에이전트 채널: llms.txt · llms-full.txt
라이브 갤러리: https://giting.kr/skills/css-menu
/plugin install css-menu@giting
03 · codelazy — 안 만들어도 되는 것 사전
AI 가 부풀리기 쉬운 지점을 증상으로 짚고 표준 한 줄로 되돌리는 사전. ponytail(MIT) 정신을 우리 증상 사전 포맷으로 재구현.
- 5개 코스 15개 항목: 표준이 이미 함 · 한 줄이면 됨 · 라이브러리 안 깔아도 됨 · 안 시킨 추상화 · 안 시킨 확장점
- 실측 before/after: 캐싱 27→17줄, 중복제거 12→1줄 등 재현 실측한 코드 비교
- 즉방형 / 분기형: 표준에 정답 있는 건 바로, 추상화가 때로 정당한 건 진단 먼저(무조건 "만들지마" 금지)
라이브: https://giting.kr/skills/codelazy
/plugin install codelazy@giting
04 · type-menu — 타입스크립트 에러 사전
영어에 코드번호로 뜨는 TS 에러(TS18048·TS7006·TS2322…)를 사람 말로 옮기고, any로 덮지 않고 제대로 고치는 사전.
- 6개 코스 15개 항목: undefined·null / 암묵 any / 타입 불일치 / 속성·모양 / 좁히기·유니온 / async·Promise
- 실제 tsc 원문 + before/after: 전부 실제 컴파일러가 뱉은 에러 메시지 기준
- any·! 로 덮지 않음: 좁히기(가드·옵셔널·기본값·타입 정정)로 진짜 안전하게. 상황 의존은 분기형으로 진단 먼저
라이브: https://giting.kr/skills/type-menu
05 · font-menu — 웹폰트 사전
"폰트 예쁘게 넣어줘"라고 하면 AI는 늘 쓰던 Inter만 얹거나, Google Fonts에 없는 폰트(Satoshi·General Sans)를 Google 링크에 박아 조용히 시스템 폰트로 폴백시킨다. 인상으로 폰트를 고르고, 어디서 어떻게 불러오는지 로딩 스니펫째 주는 사전.
- 7개 맥락 34종: 국룰·본문 / AI·테크 / 랜딩 히어로 / 고급·세리프 / 코드·모노 / 한글 / 한글 제목·손글씨
- 짝 12개: 한글+한글 · 한글+영문 · 영문+영문. 제목 글꼴과 보조 글꼴, 둘의 차이를 두는 규칙, 견본 문장, AI에게 할 말. 공통 규칙은 「한 화면에 한글 글꼴은 두 개까지, 나머지 차이는 굵기와 크기로」
- 로더가 폰트마다 다르다: Google Fonts(번들 자유) · Fontshare(CDN 로드만, 번들 금지) · jsDelivr(Pretendard 등). 출처별 정확한
<link>를 준다
- 로드 실측: 처음 24종은 로드 URL을 전부 GET 해 @font-face·패밀리명이 실제로 오는지 확인했고(silent fallback 0), 2026-10-23에 넣은 한글 제목·손글씨 10종은 헤드리스 Chrome에서 스니펫만 넣은 페이지로 글꼴이 실제로 붙는지 확인했다. 짝·라이선스·안 쓸 때·AI 티 경고 포함
라이브: https://giting.kr/skills/font-menu
06 · app-menu — 앱 UI 메뉴판
ui-menu의 모바일판. "아래에서 올라오는 판"을 바텀시트, "앱 켜면 뜨는 로고 화면"을 스플래시라 부르게 해 주고, 그 이름을 SwiftUI·Flutter·React Native의 실제 컴포넌트명까지 연결하는 사전.
- 8개 코스 76개 항목: ①화면 뼈대 ②화면 이동 ③목록 ④입력받는 것 ⑤골라 넣는 것 ⑥누르는 것 ⑦위에 띄우는 것 ⑧상태·표시
- 네이티브 매핑 38항목: 정식 명칭 → SwiftUI · Flutter · React Native 실제 컴포넌트명(탭바 → TabView·BottomNavigationBar·Tab.Navigator)
- 웹/앱 경계: 같은 단어라도 관례가 다른 것을 짚음(모달 = 앱은 풀스크린, 셀렉트 = 앱은 시트로) + 모바일이 자주 빠뜨리는 것(세이프에어리어·탭 타깃 44pt·엠프티 스테이트)을 체크리스트로
- 웹 UI는 ui-menu: 이 사전은 iOS·안드로이드 앱 전용
/plugin install app-menu@giting
07 · landing-menu — 랜딩 메뉴판
랜딩 페이지를 **"무슨 섹션을, 어떤 순서로"**로 짓게 해 주는 사전. 랜딩은 컴포넌트가 아니라 섹션의 순서다.
- 6개 코스 26개 섹션: ①히어로 5 ②신뢰 5 ③기능 5 ④작동 3 ⑤전환 4 ⑥뼈대 4
- 핵심 차별 — 제너릭 회피: ⛔ 다크+가운데+그라데이션 AI 기본 룩 금지. 룩(색·폰트)은 제품
design-brief에서 오고, 이 사전은 구조·순서만 준다. 제품샷은 실제 스크린샷을 디바이스 프레임에.
- v0.2: 6개 코스 26개 섹션 전부 출하 — 전 항목 실물 HTML·반응형·headless 검수. 갤러리 https://giting.kr/skills/landing-menu
- 웹 컴포넌트는 ui-menu, 디자인 시스템은 design-brief와 짝을 이룸(중복 아님).
/plugin install landing-menu@giting
08 · hangul-wrap: 한글 줄바꿈 실측·교정
한글이 어절 중간에서 꺾이는 자리(간단/한)를 실제 브라우저로 폭별로 재서 찾고, 자리별로 고친 뒤 다시 잰다.
- 의존성 0 검사기
scripts/wrapcheck.mjs: 글자 위치로 줄을 되살려 쪼개짐 · 넘침 · 외톨이를 잡는다. 문제 있으면 끝 코드 1
- 자리별 처방: 제목 keep-all+balance · 본문 keep-all+pretty · 좁은 칸은 keep-all 금지 · 코드·주소는 overflow-wrap: anywhere
- 글자 키운 상태(0.2.0):
--text 150,200(글자만, 폰 글자 크기 설정처럼) · --zoom 150,200(브라우저 확대)에서 버튼 글자가 잘리는지 · 실제로 눌리는지까지 잰다. 기준 200% 는 WCAG 1.4.4
- 실측: 예시 페이지 쪼개짐 11 → 0 · 넘침 2 → 0. giting.kr 매거진 1호 34 → 0, 2호 52 → 0
라이브: https://giting.kr/skills/hangul-wrap
/plugin install hangul-wrap@giting
09 · carousel-menu — 캐러셀 메뉴판
인스타 캐러셀·카드뉴스를 "장마다 무슨 꼴로, 어떤 순서로" 짓게 해 주는 사전. 캐러셀은 예쁜 한 장이 아니라 넘기게 만드는 순서다.
- 4개 코스 24항목: ①표지 4 ②본문 장 11 ③끝 장 4 ④장치 5(쪽 번호·칩 라벨·형광펜·넘기기 안내·계정 표시)
- 6장 레시피 넷: 큐레이션 · 꿀팁 · 비교 · 시리즈 한 편
- 장마다 1080×1350 견본(자가완결 HTML). 룩(색·글꼴)은
design-brief 에서, 이 사전은 꼴과 순서만. 갤러리 https://giting.kr/skills/carousel-menu
/plugin install carousel-menu@giting
10 · caption-sync: 자막 싱크 검사·교정
AI 가 만든 자막(SRT·VTT)을 넷플릭스 공개 자막 기준(한 줄 16자 · 초당 12자 · 2프레임 간격 · 컷 맞춤)으로 재고, 기계로 되는 것은 고친 뒤 못 읽을 만큼 빠른 자막은 뜻을 지키며 줄인다.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
