언제: Magic UI·Aceternity에서 익숙한 종류의 이펙트(오로라 배경·텍스트 스크램블·글로우 버튼·틸트 카드·3D 오브젝트)를 가볍게 하나씩 가져오고 싶을 때. mesh-gradient처럼 외부 의존성 없이 파일 하나로 떨어지는 것들이 있어 들여오기 부담이 적다. 비교: 구성이 Magic UI·Aceternity·React Bits와 거의 겹치고 규모는 훨씬 작다 — 그쪽에서 먼저 찾고, 없을 때 보조로. 3D 오브젝트 몇 종은 ThreeUI 계열과 겹친다. 주의: "open source"라 적혀 있지만 GitHub 조직(kraavon)에 공개 저장소가 없고 라이선스 표기도 찾지 못했다 — 상업 프로젝트에 넣기 전 확인 필요. 전체 목록 JSON이 없어 각 컴포넌트 페이지에서 슬러그를 확인해야 한다.
언제: 랜딩·AI 제품 화면에 들어갈 움직이는 조각을 shadcn 방식으로 바로 설치하고 싶을 때. 무료 233종이 MIT로 깔끔하고, 키트 단위로 같은 톤의 조각을 묶어 둬서 "한 디자이너가 만든 것처럼" 페이지를 맞추기 쉽다. 에이전트에게 디자인 가이드 문서를 먼저 읽히고 조립시키는 흐름을 공식으로 지원하는 점이 특이. 비교: 같은 Motion 이펙트 계열인 Magic UI·React Bits(무료 MIT)와 겹치는 영역이 크다. 유료로 보면 All-Access 49달러는 Hover.dev(49달러)와 같고 BuouUI 평생 79달러보다 싸지만 12개월 한정 업데이트. 무료 웹 도구(배경 제거·압축·OG 이미지)는 Design 쪽 단일 도구들 대신 한곳에서 쓸 수 있는 부록. 주의: 프리미엄은 레지스트리에 없어 zip 다운로드로 받고, 재판매·재배포 금지. 홈의 X 후기들은 "축하해요" 류 짧은 반응이라 품질 근거로 보긴 어렵다.
언제: 평범한 컴포넌트에 "만지는 맛"을 얹고 싶을 때 — 토글·슬라이더·토스트·시트처럼 매일 쓰는 조각의 물리적인 손맛 버전이 필요할 때 한 개씩 골라 설치. 각 항목 설명이 "어떻게 움직이는지"를 한 문장으로 적어 둬서 인터랙션 아이디어 사전으로 읽어도 쓸모 있다. Spring playground·Easing editor는 모션 값을 튜닝할 때 학습 도구로 좋다. 비교: 같은 결의 마이크로 인터랙션 모음인 UICapsule(52종)·Skecher UI(26종)·Morphiq(20종)보다 수가 훨씬 많고 MIT로 깔끔하다. 이펙트·배경 중심의 Magic UI·React Bits와는 결이 달라 "기능 컴포넌트의 손맛" 쪽. 주의: 본인이 "라이브러리가 아니라 학습용 실험"이라고 못박는다 — 접근성·엣지 케이스·API 안정성 보장이 없으니 프로덕션에 넣을 땐 코드를 읽고 다듬어서 쓸 것. 2주 만에 204종을 만든 초기 1인 프로젝트라 품질 편차가 있을 수 있다.
언제: "이 유료 앱 대신 쓸 오픈소스 없나" 싶을 때 앱 이름으로 대안을 찾고, 스크린샷·스타·라이선스를 한 화면에서 비교할 때. 손으로 검수하고 Capterra 평점까지 붙여 둬서 "쓸 만한가"를 가늠하기 쉽다. 비교: 같은 목적의 OpenAlternative가 수록 수는 훨씬 많다 — 넓게 찾을 땐 그쪽, 검증된 소수를 빨리 고를 땐 여기. 창작 도구만 보려면 everywhere.tools, 일반 SaaS 도구 탐색은 Toolfolio. 주의: 공개 3일째(2026-10-08)인 1인 프로젝트라 수록 64개로 아직 얇고 지속 여부를 지켜봐야 한다. Trending·평점 섹션은 날짜가 찍힌 스냅샷이라 최신이 아닐 수 있다.
언제: 랜딩·온보딩·빈 상태·마케팅 이미지에 입체감 있는 일러스트형 아이콘이 필요할 때. CC0라 라이선스 고민이 없고 PNG 렌더를 바로 쓰면 돼서 3D 툴 없이도 된다. 비교: AI로 만든 3D 아이콘 수량은 Thiings(10,000+, 유료)가 훨씬 많고, UI용 선 아이콘은 Lucide·Phosphor 등 기존 항목이 맞다. 여기는 사람이 직접 모델링해 톤이 통일된 소량 세트라는 게 장점. 주의: 종 수가 200종으로 적고 범용 메타포 위주라 특정 업종 전용 아이콘은 없을 가능성이 높다. CC0는 V1 기준이므로 Pro 세트나 이후 추가분은 라이선스를 따로 확인할 것. 래스터(PNG/WebP) 렌더라 크게 쓸 땐 해상도를 확인.
언제: 컴포넌트 하나의 "움직임"이나 디테일 아이디어가 필요할 때 — 토글·스텝퍼·티켓·위젯·드로어 같은 단위 인터랙션을 영상으로 훑기 좋다. 완성 화면보다 마이크로 인터랙션·모션 비중이 커서 구현 전 레퍼런스 수집에 맞는다. 비교: 실서비스 앱의 특이한 인터랙션은 Design Spells, React Native로 구현된 화면은 Native Bloom(영상+원본 코드 링크), 모바일·대시보드 정적 화면은 Uiinspoo. 여기는 개인 디자이너의 컨셉·탐구 작업 위주라 실제 제품에 그대로 있는 UI는 아니다. 주의: 출처가 X 게시물이라 원문이 삭제되면 링크가 깨진다. 작품은 각 작가 소유이므로 참고·영감용으로만 쓰고 그대로 베끼지 말 것. 갱신 주기는 수동 큐레이션이라 느린 편(번호상 약 3년간 590여 건).
언제: 히어로 배경·이미지 처리·페이지 전환을 셰이더로 만들고 싶은데 GLSL을 직접 쓰기 싫을 때. 효과를 컴포넌트처럼 겹쳐 쌓는 방식이라 "그라디언트 위에 필름 그레인, 그 위에 커서 물결" 같은 조합을 코드 몇 줄로 만든다. 에디터에서 눈으로 맞추고 코드로 뽑는 흐름이 무료라는 게 가장 큰 장점. 비교: 저장된 Paper Shaders(30종, Apache-2.0, 의존성 0·WebGL)보다 범위가 6배 넓고 프레임워크 지원도 넓다. 대신 WebGPU 전제라 구형 브라우저·일부 기기 대응은 Paper Shaders·Vanta 같은 WebGL 쪽이 안전하다. 디자인 툴로 셰이더를 만드는 건 Unicorn Studio(Design)와 겹치지만 이쪽은 결과물이 오픈소스 코드다. 주의: WebGPU 지원 브라우저가 필요하니 사이트의 System check 페이지로 대상 환경을 먼저 확인할 것. 오픈소스 전환 직후(커밋 12)라 저장소 이력이 짧다. 섹션·프리셋은 Pro 전용.
언제: 랜딩에 눈에 띄는 연출 조각(파티클·카운터·독·배경 이펙트)을 빠르게 붙이고 싶을 때 훑어볼 곳. 네오브루탈리즘 톤의 Brutal UI 35종은 저장된 것 중 드문 스타일이라 그 톤이 필요하면 바로 여기. 비교: 같은 Framer Motion 이펙트 계열 무료 대안이 많다 — Magic UI·React Bits(MIT)와 Aceternity(무료분)가 규모가 커서 먼저 볼 것. 유료로 간다면 Hover.dev(49달러)·The UI Factory(25유로)보다 비싸고, 79달러 Lifetime도 Ruixen Pro(99달러) 근처다. 주의: ① 컴포넌트 목록 다수가 Pro라 무료로 쓸 수 있는 범위가 생각보다 좁다. ② 유료 템플릿 Standard 라이선스는 "최종 제품을 무료로 배포"하는 경우만 허용 — 수익 제품엔 상위 라이선스 확인 필요. ③ 홈의 후기가 같은 이름·회사(@Tencent·@Huawei)를 반복하는 형태라 신뢰 근거로 보기 어렵다. ④ 상시 할인 카운트다운 배너 등 판매 압박이 강하다.
언제: 웹과 모바일 앱을 같은 컴포넌트 코드로 함께 만들어야 할 때 — Next.js 웹과 Expo 앱을 한 디자인 시스템으로 묶는 대표 선택지다. 저장된 RN 토대들(BNA UI·PanelUI·tetra ui)은 Expo 전용이고, 웹까지 같은 코드로 가는 건 여기뿐이다. 비교: 규모·유지 체력은 저장된 RN 계열 중 압도적(GeekyAnts 회사 운영, 릴리스 610). 반면 컴포넌트 수 자체는 41종 안팎의 기본기 위주라 화려한 모션은 Reacticx, 앱 화면 레퍼런스는 Native Bloom에서 보충할 것. 웹 전용 프로젝트라면 shadcn 계열이 더 자연스럽다. 주의: 메이저 버전이 자주 바뀌었다(v1 styled → v2 NativeWind → v5 Tailwind v4/UniWind). 블로그·검색 결과 다수가 v2 기준이라 문서 버전을 확인하고 따라 할 것. 사이트 곳곳에 자사 유료 서비스(pro 템플릿·RapidNative·theappmarket) 배너가 붙어 있다.
언제: 레트로·게임풍 페이지나 사이드 프로젝트에서 shadcn 사용법은 그대로 두고 외형만 픽셀로 바꾸고 싶을 때. import 경로만 @/components/ui/pixelact-ui/로 바꾸면 되는 구조라 기존 shadcn 화면을 부분적으로 갈아 끼우기 쉽다. 비교: 같은 8비트 계열인 8bitcn/ui(121항목, 블록 포함)나 8bit/cnlibs(58종)보다 작다 — 종 수·블록이 필요하면 그쪽, 원본 shadcn과의 차이를 최소로 두고 싶으면 이쪽. 터미널·CRT 톤은 Afterglow, 구형 Mac은 nostalgia-ui. 주의: 2026-10-07 기준 사이트의 /docs 경로가 404라 문서는 GitHub README로 봐야 한다. 마지막 푸시가 7월 말로 2개월 넘게 정체. 픽셀 폰트·CSS를 전역 styles.css로 함께 깔기 때문에 다른 스킨과 한 페이지에 섞으면 스타일이 새어 나갈 수 있다.
언제: 오버레이가 여러 겹 쌓이는 제품 화면(설정 → 팝오버 → 다이얼로그)에서 깊이감과 모션을 손으로 맞추기 싫을 때. 표면 고도와 스프링 강도를 토큰으로 묶어 두어서 컴포넌트를 섞어도 일관된다 — 이 체계 자체가 핵심이라 foundation으로 뒀다. 비교: Base UI 기반이라 9ui·Space UI·PaceUI·Ruixen(Base 모드)과 프리미티브를 공유한다. 차트 13종은 덤으로 쓸 만하지만 차트가 주목적이면 evilcharts·chartcn 쪽이 넓다. 폼 입력 다양성은 Hirael이 더 두껍다. 주의: 1인 프로젝트(2026-03 시작, 스타 27)라 규모가 작고, 고도·모션 체계를 쓰려면 surface-context/motion-tokens lib를 같이 들여와야 해서 다른 kit와 섞을 때 토큰이 충돌할 수 있다.
언제: 랜딩의 "Trusted by"/기술 스택 로고 섹션을 shadcn 프로젝트에 컴포넌트로 바로 넣고 싶을 때. 다크모드·모노 변형을 직접 손대기 싫을 때. 비교: 종 수가 더 필요하면 theSVG(7,400+)·logos by lndev(15,017), 라이트/다크 SVG만 필요하면 SVGL, 국내 브랜드는 로고착착. Logoforge의 차별점은 shadcn 레지스트리 설치 + 로고 클라우드 섹션 생성. 주의: 2026-10 공개된 신생 레포(커밋 6, 스타 20). 코드는 MIT, 아트워크는 Simple Icons·gilbarbara/logos(CC0) 기반이나 일부는 브랜드 자체 아트워크라 상표권은 각 브랜드에 있음. 사이트 내 유료 스폰서 영역 있음.
언제: SaaS·인디 툴의 OG/소셜 카드 레퍼런스를 빠르게 훑거나, 내 사이트 OG 이미지 크기·메타 태그를 점검할 때(Analyzer). 비교: 브랜드 전반을 손으로 고른 레퍼런스는 OGimage.gallery(844장·카테고리 분류), OG 이미지를 직접 만들 땐 ogimagecn(UI Components). 툴 자체를 찾을 땐 Toolfolio(Tools). 주의: Toolfolio 등재 툴 중심이라 SaaS/인디 쪽으로 치우침(홍보 성격). 이미지는 각 브랜드 자산이므로 레퍼런스로만 사용.
포트폴리오·에이전시·브랜드 사이트처럼 "여백 많고 타이포 중심"의 톤을 잡을 때. 10년 넘게 한 가지 취향(미니멀)으로 큐레이션을 이어 와서 3,000곳이 넘는데도 결이 일정하다는 게 장점이고, 유형 태그(에이전시 758·이커머스 142·건축 119 등)로 같은 업종만 모아 보기 좋다.
저장된 웹 갤러리들과 역할을 나누면 — SEESAW는 폰트로 검색, Curated는 산업별 실사이트, dark.design은 다크 테마, Supahero·Navbar Gallery·CTA Gallery·Details.so는 특정 섹션·디테일만 모은다. 이건 페이지 전체 인상을 미니멀 쪽으로 넓게 훑을 때 쓰는 출발점이다.
템플릿 메뉴는 Framer·Webflow 등 유료 템플릿 판매 링크가 대부분이라 영감용으로 보고, 코드로 가져올 거면 저장된 UI Components 쪽 블록 모음을 쓰는 게 맞다. 도구 메뉴는 106개로 작아서 이 저장소의 Tools 컬렉션을 대체하진 않는다.
2026년에 운영자가 바뀌었다(About 기준). 스폰서 카드가 목록에 섞여 나오니 구분해서 볼 것.
랜딩 히어로·광고 배너·SNS 카드에 쓸 이미지를 AI로 뽑아야 하는데 "어떻게 써야 저런 톤이 나오는지"부터 막힐 때. 결과 이미지를 먼저 보고 마음에 드는 걸 고른 뒤 프롬프트를 가져오는 순서라, 빈 입력창에서 시작하는 것보다 훨씬 빠르다.
쓸모의 핵심은 구조다. 묘사 단락은 그대로 두고 대괄호 칸(색 조합·요소·여백·화면비)만 내 브랜드 색과 소재로 바꾸면 같은 톤의 이미지를 여러 장 만들 수 있다. 연작 단위로 묶여 있어서 한 페이지 안에서 일관된 비주얼 세트(히어로 + 섹션 배경 + 카드 썸네일)를 맞출 때 특히 좋다. "여백" 칸이 따로 있어 텍스트를 얹을 자리를 남긴 이미지를 요청하기 쉬운 점도 웹 용도에 맞다.
저장된 BananaX가 한국어 인포그래픽 프롬프트, Kage·VibePrompts가 UI 화면·레이아웃 프롬프트라면 여기는 UI가 아니라 일러스트·사진풍 비주얼 쪽이다. 섹션 배경이 필요할 때 코드형 배경(Aura Gradients, designali 패턴)으로 갈지 이미지 생성으로 갈지 고르는 갈림길에서 함께 보면 된다.
주의: 예시 이미지가 어떤 모델로 만들어졌는지 표시가 없어 같은 프롬프트라도 모델에 따라 결과가 꽤 다를 수 있다. 사이트에 이용 조건 문서가 보이지 않으므로 예시 이미지를 그대로 가져다 쓰지 말고 프롬프트로 직접 생성해 쓸 것. "Golden Gate Bridge", "Kyoto Pagoda" 같은 실제 장소 프롬프트는 상업 광고에 쓸 때 초상·상표 문제를 따로 확인해야 한다.
랜딩·포트폴리오를 만들면서 블록뿐 아니라 그 주변 재료(기기 목업, 기술 스택 로고, 배경 패턴, 장식용 도형)까지 한 출처에서 맞춰 쓰고 싶을 때. 저장된 kit 중 이렇게 코드·SVG 자산·Figma 디자인을 한 사이트에서 같이 주는 곳은 드물다. 특히 쓸모가 큰 건 세 가지 — · 애플 기기 목업 6종(iPhone·iPad·MacBook 등): 스크린샷을 기기 프레임에 넣는 컴포넌트라 제품 소개 섹션에 바로 쓴다. 저장된 Opensource UI의 기기 목업과 같은 자리. · CSS 배경 패턴 약 500종: 클릭 한 번으로 CSS를 복사하는 방식이라 bg.ibelick(20종)·Aura Gradients(206종)보다 폭이 넓다. · 기술 로고 282종: npm 패키지(@aliimam/logos)로도 받을 수 있어 "사용 기술" 섹션에 쓰기 좋다. 저장된 svgl·theSVG가 더 크지만 프레임워크·라이브러리 쪽은 여기도 충분하다.
반대로 "컴포넌트 라이브러리"로 기대하면 실망한다 — 레지스트리 324항목 중 162개는 shadcn 기본 컴포넌트를 꾸민 예제이고, 고유 UI는 14종뿐이다. 블록도 38종이라 Shadcnblocks·Ruixen 같은 대형 블록 모음을 대체하진 못한다.
주의 넷.
kit로 둔 이유: 코드 블록·UI·자산이 섞인 통합 허브라 특정 역할 하나(section·asset)로 좁히면 다른 절반이 묻힌다.
새 제품이나 랜딩 페이지를 공개하기 전에 공유 미리보기 카드를 어떻게 꾸밀지 감을 잡을 때. OG 이미지는 링크를 붙여넣는 모든 곳(메신저·X·슬랙·카톡)에서 첫인상이 되는데, 일반 디자인 레퍼런스 사이트에서는 거의 다루지 않는 영역이라 이렇게 한곳에 모아 둔 곳이 드물다.
저장된 Recent에도 OG 이미지 범주가 있지만 여러 분야 중 하나일 뿐이고, 여기는 OG만 800장 넘게 범주별로 나눠 둬서 SaaS·앱·스토어 등 내 제품과 같은 업종끼리 비교하기 좋다. Animated·Dynamic 범주는 움직이는 OG(GIF 등)나 페이지마다 내용이 바뀌는 동적 OG 사례라 따로 볼 가치가 있다.
보고 정했으면 만드는 건 저장된 ogimagecn(shadcn 방식 OG 이미지 컴포넌트)이나 Next.js의 ImageResponse로 넘어가면 된다. 동적 OG를 만들 계획이면 Dynamic 범주 사례부터 확인할 것.
이미지는 각 회사의 브랜드 자산이므로 다운로드는 참고용으로만 쓰고 그대로 가져다 쓰지 말 것. 브라우저 확장 프로그램 링크(ogimg.gallery)는 2026-10-06 확인 시 열리지 않았다.
대시보드에 "현재 값이 범위 안 어디쯤인지"를 한눈에 보여야 할 때 — CPU·메모리 사용률, 목표 달성률, 온도·습도, 속도·RPM, 배터리·연료, 타이머처럼 최소~최대가 정해진 단일 값. 저장된 data 항목들(dashboardcn, livedocs, Evil Charts, Rosen Charts 등)은 막대·선·영역 같은 시계열 차트가 중심이고 게이지는 있어도 반원 하나 정도인데, 이건 게이지만 다루는 대신 눈금·구간 색·바늘·중심 값 표시를 따로 조합하게 해 둬서 계기판·스마트홈 패널·운동 링·나침반까지 같은 부품으로 만든다는 게 다르다.
쓰는 방법은 두 가지다. Studio에서 모양을 맞춘 뒤 코드를 가져오거나, 사이트가 제안하듯 에이전트에게 "@/components/gauge 프리미티브로 0~240 속도계, 상단 빨간 구간" 식으로 시키면 된다. 부품이 컴포지션 방식이라 에이전트가 조립하기 쉬운 구조다.
값 변화는 내장 스프링 애니메이션으로 움직이고 GaugeControl로 드래그 입력도 받을 수 있어 표시용뿐 아니라 다이얼형 입력(온도 설정 등)에도 쓸 수 있다. 다만 SVG 텍스트로 값을 그리므로 스크린리더용 aria 레이블(현재 값·범위)은 직접 붙여 확인할 것.
2026-09 말에 시작한 신생 프로젝트(1인)라 API가 바뀔 수 있다. 소스가 내 프로젝트로 복사되는 방식이라 업스트림 변화의 영향은 적다.
Corey Haines의 기술 마케터·창업자용 마케팅 스킬 라이브러리. Claude Code·Codex·Cursor 등 에이전트에서 마케팅 조사·기획·문서·구현 작업을 안내한다. 소스 MIT. 확인일 2026-10-05.
공식 사이트의 '50 skills'를 main의 skills/*/SKILL.md 50개와 대조했다. Claude Code와 Codex 플러그인 manifest 모두 버전 2.11.17이며 개별 스킬은 자체 metadata.version을 갖는다. 현재 50개: ab-testing, ad-creative, ads, ai-seo, analytics, aso, attribution, churn-prevention, co-marketing, cold-email, community-marketing, competitor-profiling, competitors, content-strategy, copy-editing, copywriting, cro, customer-research, directory-submissions, emails, events, free-tools, image, influencer-marketing, launch, lead-magnets, marketing-council, marketing-ideas, marketing-loops, marketing-plan, marketing-psychology, offers, onboarding, paywalls, popups, pricing, product-marketing, programmatic-seo, prospecting, public-relations, referrals, revops, sales-enablement, schema, seo-audit, signup, site-architecture, sms, social, video.
product-marketing을 먼저 사용해 제품·고객·포지셔닝·메시지를 .agents/product-marketing.md에 기록하고 다른 스킬이 이를 재사용하도록 설계했다. 기존 코드베이스의 README·랜딩페이지·메타데이터·제품 문서를 분석한 초안을 사용자가 검토·수정하거나, 질문을 통해 처음부터 작성할 수 있다. 변경 시 문서 버전과 Changelog를 갱신한다. v2에서 기존 .claude/product-marketing-context.md 등의 경로·이름이 변경됐다. 오래된 경로는 fallback으로 찾는다. 연결 예: customer-research 결과를 copywriting·cro·competitors에 반영, copywriting ↔ cro ↔ ab-testing, seo-audit ↔ schema ↔ ai-seo, revops ↔ sales-enablement ↔ cold-email.
페이지 종류, 전환 목표, 유입 경로를 확인하고 가치 제안의 명확성·헤드라인·CTA 위치와 문구·시각적 계층·신뢰·마찰 요소 등을 분석한다. 빠르게 적용할 개선, 우선순위가 높은 변경, 실험 아이디어로 결과를 정리한다. 가입 흐름은 signup, 가입 후 활성화는 onboarding, 팝업은 popups로 역할을 구분한다. 페이지/폼 검토 지침과 근거 기반 실험 제안이 중심이며 전환율 상승을 보장하는 자동 최적화 서비스로 해석하지 않는다.
전체 설치: npx skills add coreyhaines31/marketingskills 선택 설치: npx skills add coreyhaines31/marketingskills --skill cro copywriting 목록 조회: npx skills add coreyhaines31/marketingskills --list CLI는 설치된 에이전트를 확인하고 위치를 선택하게 한다. README는 Claude Code .claude/skills/와 범용 .agents/skills/ 경로를 구분하며 에이전트 세션 안 비대화형 설치 시 -a claude-code를 명시하는 경로를 안내한다. Claude Code 플러그인: claude plugin marketplace add coreyhaines31/marketingskills claude plugin install marketing-skills@marketingskills Codex 플러그인: codex plugin marketplace add coreyhaines31/marketingskills 이후 Codex 세션의 /plugins에서 marketing-skills를 선택한다. 이는 저장소가 안내하는 경로이며 이번 작업에서 설치·호환 실행을 검증하지 않았다. 설치 후 '랜딩페이지 전환을 개선해 줘', 'SaaS 홈페이지 카피를 작성해 줘', 'GA4 가입 추적을 설정해 줘', '웰컴 이메일 5개를 만들어 줘' 같은 요청 또는 /cro, /emails, /seo-audit로 사용할 수 있다.
tools/REGISTRY.md가 도구별 API·MCP·CLI·SDK 가능 여부를 정리하고 tools/integrations/ 문서와 tools/clis/ 스크립트로 상세 경로를 연결한다. GA4·Mixpanel·Amplitude·PostHog 같은 분석 도구와 SEO·광고·메일·CRM 등 도구를 다룬다. 레지스트리에 MCP가 있다고 모든 MCP 서버를 이 라이브러리가 직접 제공하거나 자동 연결하는 것은 아니다. 라이브러리 코드는 무료 MIT다. 에이전트 모델 사용료와 연동 서비스의 계정·키·요금, 광고 집행 비용 등은 별도다. 이번 북마크 작업에서 설치·계정 연결·광고 집행·메시지 발송을 실행하지 않았다. 사이트는 스킬 문서 외에 examples·learn·free-tools·tools 자료를 제공한다. /tools는 작업별 도구 지형도이며 사이트에서 순위가 아니라고 명시한다. Converly·Ploy는 공개된 Verified Partners다. 레지스트리는 유료 후원 관계를 밝히고 중립 선택지와 함께 표시하며, 파트너 표시는 '최고 도구' 평가와 구분한다고 설명한다.
theskillmd.com은 여러 작성자의 스킬 메타데이터를 색인하는 디렉터리다. Marketing Skills는 Corey Haines가 관리하는 실제 마케팅 스킬과 실행 지침을 제공한다. Startup Skill은 창업 가설 검증·경쟁 분석·포지셔닝·피치 중심이고, 이 모음은 마케팅 실행·채널·전환·측정·유지까지 확장한다. 같은 Kidow / Tools에 분류한다.
사이트: https://marketing-skills.com/ 소스·README·라이선스: https://github.com/coreyhaines31/marketingskills 전체 스킬: https://marketing-skills.com/skills 공통 제품 맥락 지침: https://github.com/coreyhaines31/marketingskills/blob/main/skills/product-marketing/SKILL.md CRO 지침: https://github.com/coreyhaines31/marketingskills/blob/main/skills/cro/SKILL.md 도구 연동 레지스트리: https://github.com/coreyhaines31/marketingskills/blob/main/tools/REGISTRY.md 도구별 지도: https://marketing-skills.com/tools 커버는 공식 사이트 Open Graph 이미지(1200×630 PNG)를 사용한다.
Claude Code의 프로젝트 지침·서브에이전트·슬래시 스킬·훅을 게임 개발 스튜디오의 역할과 작업 절차로 구성한 공개 GitHub 템플릿. 제작 Donchitos, MIT. 확인일 2026-10-05. project.yaml의 framework.version은 1.1.2다.
현재 main 트리 실측:
감독(creative-director·technical-director·producer), 부서 리드, 분야별 전문가의 3단계 구조다. 디자인·프로그래밍·아트·오디오·내러티브·QA·릴리스·현지화 및 경제·네트워크·접근성·라이브 운영 등을 나눈다. 상위 역할이 하위 역할에 위임하고, 같은 단계의 역할은 상담하며, 이견은 공통 상위 역할로 올린다. 여러 부서에 영향을 주는 변경은 producer가 조율한다. /brainstorm, /map-systems, /design-system, /quick-design, /create-architecture, /create-stories, /dev-story, /sprint-plan, /code-review, /balance-check, /qa-plan, /playtest-report, /release-checklist 등이 아이디어부터 출시까지 문서와 작업을 안내한다. /team-combat, /team-ui, /team-narrative, /team-audio, /team-level, /team-qa 등은 기능별 전문 역할을 조율한다.
Godot 4, Unity, Unreal Engine 5별 전문가 정의와 엔진 참조 문서를 제공한다. Godot은 GDScript·C#·셰이더·GDExtension, Unity는 DOTS/ECS·셰이더/VFX·Addressables·UI Toolkit, Unreal은 GAS·Blueprints·Replication·UMG/CommonUI 등을 다룬다. 코드 루트는 Godot src/, Unity Assets/, Unreal Source/<Module>/로 엔진별 처리한다. 현재 src/에는 .gitkeep와 CLAUDE.md만 있어 완성된 게임이나 실행 가능한 게임 샘플을 배포하는 저장소로 해석하지 않는다. 엔진 설치·프로젝트 생성은 별도 작업이다.
저장소를 clone하거나 GitHub 'Use this template'으로 자신의 게임 프로젝트를 만들고 해당 폴더에서 Claude Code를 연 뒤 /start를 실행한다. /start는 아이디어가 없는 상태·막연한 컨셉·명확한 설계·기존 프로젝트를 확인해 적절한 워크플로로 안내한다. project.yaml에 프로젝트 단계·rigor·automation 설정을 기록한다. 예: /brainstorm, /setup-engine godot 4.6, /project-stage-detect. 기존 프로젝트 도입은 /adopt, 설정 조정은 /settings, 이전 템플릿 업그레이드는 UPGRADING.md를 안내한다. 필수: Git, Claude Code, Python 3, Bash. jq는 권장이다. Python은 프로젝트 YAML 설정을 읽고 데이터 JSON을 검증한다. 없으면 설정이 기본값으로 떨어지고 데이터 JSON을 포함한 커밋이 차단될 수 있다. Bash가 없으면 훅이 실행되지 않는다. README는 Windows Git Bash 중심 개발과 macOS/Linux 훅 검증을 설명한다. 알림 훅은 Windows PowerShell 토스트이며 macOS/Linux 데스크톱 알림은 아직 연결되지 않았다고 명시한다.
기본 collaborative 모드는 질문·선택지·사용자 결정·초안·승인 순서다. 현재 automation 문서는 guided(큰 결정만 질문), autonomous(결정 기록 후 진행, 예외 항목은 질문) 모드도 제공한다. README의 '항상 협업' 소개와 실제 선택 가능한 모드를 함께 본다. 49개 역할의 모델은 모두 같은 설정이 아니다. README는 감독 3개 Opus, lead-programmer와 전문가 15개 Sonnet, 나머지 30개 세션 모델 상속을 안내한다. 스킬 frontmatter의 model 적용은 직접 /명령으로 실행하는지 에이전트가 Skill 도구로 실행하는지에 따라 달라진다고 설명하며 Haiku 표기만으로 비용 절감을 보장하지 않는다. 일반 team-*는 한 Claude Code 세션 안의 서브에이전트 방식이다. 독립 세션을 공유 작업 목록으로 조율하는 Agent Teams는 선택적 실험 기능으로 구분하며 이 프로젝트에서는 아직 사용하지 않았다고 명시한다. 템플릿 코드는 MIT로 제공되지만 실제 실행에는 Claude Code 접근과 모델 사용량이 필요하다. Codex/ChatGPT용으로 이 구성을 직접 설치·호환 검증한 것은 아니다.
커밋·푸시·에셋·스킬 변경 검증, 세션 시작/종료 기록, 서브에이전트 감사 로그와 압축 전후 훅을 제공한다. 압축 훅 출력 자체가 Claude에 전달되는 것은 아니며 세션 시작 과정으로 맥락을 복원한다고 설명한다. CCGS Skill Testing Framework는 게임 테스트와 구분되는 스킬/에이전트 정의 품질 검사 자료다. /skill-test static, category, spec, audit와 /skill-improve로 구조 검사·범주별 기준·행동 명세·커버리지·수정 후 재평가를 안내한다. 실제 게임 테스트는 프로젝트 tests/에서 수행한다. 이번 작업에서는 공개 파일 구성·설정·라이선스를 확인했으며 저장소 설치나 스킬 실행은 하지 않았다.
Startup Skill처럼 특정 분야의 에이전트 작업 절차를 제공하고, UI Craft처럼 프로젝트 지침·검증 도구까지 포함하는 개발 도구이므로 Kidow / Tools에 분류한다. 이 자료는 게임 개발 전 과정의 역할 조직과 엔진별 프로젝트 작업을 중심으로 한다.
저장소·README·소스: https://github.com/Donchitos/Claude-Code-Game-Studios 라이선스: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/main/LICENSE 시작 스킬: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/main/.claude/skills/start/SKILL.md 설치 요구사항: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/main/.claude/docs/setup-requirements.md 역할 조율: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/main/.claude/docs/coordination-rules.md 자동화 모드: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/main/.claude/docs/automation-modes.md 문서 깊이/워크플로 모드: https://github.com/Donchitos/Claude-Code-Game-Studios/blob/main/.claude/docs/workflow-modes.md 커버는 저장소가 제공한 GitHub Open Graph 이미지(1200×600 PNG)를 사용한다.
텍스트와 임의의 라벨 목록으로 분류를 요청하는 HTTP 서비스. Michael Ryaboy(mrmps) 제작. 공식 소스는 MIT 라이선스이며 Cloudflare Worker·CLI·MCP·평가 코드 등을 공개한다. 확인일 2026-10-05.
고객 문의를 billing/technical로 라우팅하거나 피드백을 bug/feature/praise로 분류하고, 검색 결과·로그·대량 문서를 먼저 걸러 비싼 추론 단계의 입력을 줄이는 데 활용한다.
기본 fast는 TypeSafe의 Jev 결정 모델이다. smart는 Jev 신뢰도 0.7 미만 결과를 추론 모델로 다시 묻는다. 재검토된 결과나 확률을 제공하지 않는 경로는 confidence/scores가 null일 수 있으므로 숫자 임계값을 바로 적용하지 않는다. 점수는 주어진 라벨 사이의 선택 확률이며 입력 사실의 진위나 판단 정확도를 보증하지 않는다. 필요하면 'none of these' 라벨을 포함한다. 공식 벤치마크는 특정 공개 데이터셋·측정 시점의 결과이며 모든 분야에 같은 정확도를 약속하는 수치가 아니다. 추가 Laya(ModernBERT-large)·Kev(Qwen2.5-0.5B) 경로도 안내하며 문맥·처리 제한이 다르다. Jev 벤치마크를 이 모델들의 정확도로 옮겨 해석하지 않는다.
REST: POST https://classifier.dev/v1/classify 예시 요청: {"input":"Please refund this charge","labels":["billing","technical"],"share_data":false} 루트 POST는 현재 주 버전 별칭이며 /v1/classify/batch도 제공한다. GET URL/쿼리 요청은 기본적으로 라벨 문자열, verbose 또는 JSON Accept 설정 시 JSON 응답을 제공한다. CLI: npm i -g classifier-dev 예: classify bug,feature,praise < feedback.txt 현재 저장소 CLI package.json은 0.1.4, Node.js 18 이상, MIT다. MCP: https://classifier.dev/mcp 분류 도구 5개: classify_texts, classify_dimensions, classify_multi_label, count_labels, review_uncertain. 문서 MCP: https://classifier.dev/mcp/docs 문서 도구 4개: list_docs, read_doc, search_docs, get_examples. 공식 문서는 Claude·ChatGPT·Codex·Cursor 연결을 안내하고 public 연결은 인증 없이 사용할 수 있다. 워크스페이스 사용량 귀속은 Bearer 키로 연결한다. 별도 에이전트 스킬/플러그인도 제공한다. 이번 북마크 작업에서는 설치·계정 생성·분류 요청을 실행하지 않았다.
익명 무료 표준 한도는 fast 분당 3,000·일 20,000결정, smart 분당 200·일 2,000결정(IP 기준)이다. 동일 라벨 집합의 공용 한도와 제공자 비용 풀 제한도 적용돼 무제한 무료 서비스로 해석하지 않는다. 다차원은 텍스트 수와 차원 수만큼 결정을 소비한다. 가격 페이지 기준 Pro 월 $20(포함 사용액 $20, 3좌석, 10배 한도), Scale 월 $200(포함 사용액 $200, 무제한 좌석, 100배 한도). 워크스페이스의 사용액은 잔액에서 차감한다. URL 분류는 Context.dev가 공개 HTTP(S) 페이지를 수집한 뒤 Jev가 Markdown을 분류한다. 충전된 워크스페이스 키가 필요하고 수집은 제공자 청구 요청 1,000회당 $2.20에 분류 비용이 추가된다. 로그인·차단 페이지는 실패할 수 있으며 성공한 수집 후 분류가 실패해도 수집 비용은 남을 수 있다. 기본 Jev 입력이 32,000자를 넘으면 유료 장문 경로를 사용한다. 이 경로는 fast만 지원하고 원문 문맥 토큰 100만 개당 $0.084를 안내한다. 일반 무료 입력·signup credit와 구분한다. 비동기 전체 문서 업로드 경로는 최대 1,000만 토큰/100MB를 별도로 안내한다.
2026-10-04 발효 공식 정책은 동기 분류의 요청 텍스트·라벨·지침·결과를 기본적으로 학습 및 운영자 검토용 저장소에 보관한다고 명시한다. 제외하려면 매 요청에 JSON boolean share_data:false, 헤더 X-Classifier-Share-Data:false, GET share_data=false 또는 MCP share_data:false를 적용한다. 로그인·유료 플랜 자체가 제외 설정을 대신하지 않는다. 공유를 허용하면 분당·일일 할당량이 2배지만 결제·비용 제한·입력 크기는 그대로다. 학습용 보관 제외와 운영·청구 기록, 별도로 켤 수 있는 워크스페이스 콘텐츠 로그는 구분한다. 상세 조건은 공식 privacy 페이지를 참조한다.
UI Craft·PolicyStack·OpenStatus처럼 REST/CLI/MCP를 통해 작업에 연결하는 개발 도구이므로 Kidow / Tools에 저장한다. 핵심 역할은 제품 UI 제작이나 모니터링보다 대량 텍스트의 라벨 분류·파이프라인 라우팅이다.
사이트: https://classifier.dev/ 소스·MIT 라이선스: https://github.com/mrmps/classifier-dev API 스키마: https://classifier.dev/openapi.json 에이전트용 색인: https://classifier.dev/llms.txt MCP 연결: https://classifier.dev/mcp-setup 가격: https://classifier.dev/pricing 데이터 정책: https://classifier.dev/privacy 벤치마크: https://classifier.dev/benchmark 커버: 공식 저장소 brand/og-opt.png(1200×630 PNG). 공개 health 응답 ok:true 확인.
창업 아이디어를 조사하고 사업 가설·포지셔닝·피치 자료를 만드는 AI 에이전트용 Markdown 스킬 모음. 제작자 Ferdinando Bons. 저장 시점 2026-10-05, 공식 marketplace.json 버전 1.10.0, MIT 라이선스.
웹 조사와 출처 교차 확인을 수행하고 주장에 [Data], [Estimate], [Assumption], [Opinion]을 붙이도록 지시한다. 원시 조사 자료와 정리된 Markdown 문서를 저장하고 PROGRESS.md로 단계·중단·재개를 관리한다. 단계별 위험 신호와 다음 행동을 기록하고 최종 점수에 따라 진행·조건부 진행·우려·중단 또는 전환을 제안한다. 재무 모델은 가정 기반 Stage A와 고객 인터뷰 근거를 반영하는 Stage B를 표시하며 추정을 확정 사실로 취급하지 않는다.
Full 모드의 고객 발견 단계는 실제 인터뷰 최소 5회와 기록·종합을 요구한다. Fast Track은 기존 고객 대화 5회 이상이면 창업자 보고 자료로 기록할 수 있고, 부족하면 최소 3회 인터뷰를 진행하도록 지시한다. Fast Track은 아이디어 3개, 조사 일부 단계, Lean Canvas, 가정 기반 수익 모델, 점수표와 상위 실험 3개로 축소하고 브랜드·제품 정의를 생략한다. 사이트의 ‘45분에 검증’, ‘30개 이상 결과물’은 제품 안내 문구다. 기본·축약 모드의 산출물과 실제 인터뷰 소요 시간이 다르므로 전체 실증 검증 완료를 보장하는 시간으로 해석하지 않는다.
Claude Code:
claude plugin marketplace add ferdinandobons/startup-skill
claude plugin install startup@startup-skill
예: /startup:startup-design <아이디어>
Agent Skills CLI: npx skills add ferdinandobons/startup-skill
README는 네 스킬 폴더를 .agents/skills/에 복사하는 경로와 Claude.ai용 .skill 파일도 안내한다. 스킬 문서는 MIT로 공개되지만 실행에는 사용 에이전트의 모델·웹 조사 기능 및 사용량이 필요하다. README는 병렬 조사에 많은 토큰이 들 수 있다고 안내하며 단계 기록을 통한 재개를 제공한다. 이 북마크 작업에서 설치·실행 검증은 하지 않았다.
What Ships는 스타트업 런치 영상 사례를 찾아보는 디렉터리다. Startup Skill은 자신의 창업 가설을 조사하고 사업 자료를 작성하는 작업 절차이므로 같은 Kidow / Tools에 분류한다. UI Craft와는 에이전트 스킬 형태가 같지만, UI Craft의 디자인 엔지니어링·코드 검사 대신 시장 검증·사업 전략·피치 준비를 다룬다.
사이트: https://startupskill.me/ 소스 코드·README·MIT 라이선스: https://github.com/ferdinandobons/startup-skill 창업 검증 지침: https://github.com/ferdinandobons/startup-skill/blob/main/startup-design/SKILL.md 경쟁 분석: https://github.com/ferdinandobons/startup-skill/blob/main/startup-competitors/SKILL.md 포지셔닝: https://github.com/ferdinandobons/startup-skill/blob/main/startup-positioning/SKILL.md 피치 준비: https://github.com/ferdinandobons/startup-skill/blob/main/startup-pitch/SKILL.md 커버는 공식 저장소 assets/banner.png를 사용한다.
skills.smoothui.dev의 현재 제품명은 UI Craft다. Eduardo Calvo(educlopez)가 만든 코딩 에이전트용 디자인 엔지니어링 스킬·검사 도구이며 SmoothUI 컴포넌트 라이브러리 자체와는 구분한다. 공식 지침은 UI 코드를 쓰기 전에 기존 CSS 변수·Tailwind 설정·폰트·컴포넌트 테마·브랜드를 조사하고, 불명확한 스타일·색·폰트·모션 선택을 사용자에게 확인하도록 한다. 레이아웃·타이포·색·상태·모션·접근성을 함께 다루며 기존 시스템을 존중하는 방향이다.
확인일의 GitHub 디렉터리를 기준으로:
Ask: 설치 후 평소처럼 UI 작업을 요청하면 프로젝트 조사와 디자인 지침을 적용. Direct: /craft·/critique·/polish·/animate 등으로 특정 패스를 지정. Persist: /brief·/tokens·/remember로 다음 세션도 읽을 디자인 맥락을 저장. Enforce: /finalize·리뷰 에이전트·MCP·검사 CLI로 리뷰와 CI 조건을 연결. 프로젝트 디자인 맥락은 .ui-craft/brief.md, tokens.md, patterns.md, decisions.md, surfaces/<name>.md 등 일반 Markdown으로 저장하도록 안내한다. 토큰을 메모에 적는 것과 실제 CSS·디자인 토큰 파일에 적용하는 작업은 구분한다.
npm ui-craft-detect 최신 0.13.0 확인. Node 18 이상, dependencies 없음. 별도 계정·모델 호출 없이 코드에서 패턴을 찾는 CLI다. 검사 예: npx ui-craft-detect src scripts/detect/rules.mjs의 id를 세면 43개다. transition: all, 과도한 z-index, 특정 장식 패턴·카피, 보이지 않는 포커스, 레이블 없는 아이콘 버튼, placeholder를 레이블로 쓰는 폼, 헤딩 순서 등의 규칙이 포함된다. 추가 접근성 정적 검사는 5개(img alt, 비의미적 클릭 요소, 양수 tabindex, 오류 설명 연결, 모션 감소)이며 토큰 검사는 raw hex·스케일 밖 radius/spacing·magic z-index를 다룬다. 공식 자료는 이를 총 52개 게이트로 설명한다. 검출기 43규칙에도 일부 접근성 규칙이 들어 있으므로 모두 순수 시각 스타일 규칙으로 세지 않는다. UICraftScore는 발견 수·심각도에 따라 0–100과 등급을 계산한다. 현재 score 문서는 직접 만든 React/Tailwind 평가 예제 11개를 회귀 기준으로 제시한다. 이 점수는 정적 규칙 검사 결과이며 화면의 실제 시각적 적절성·키보드 흐름·모든 접근성을 증명하지 않는다. 문서도 예제 점수 차이와 설치 효과의 인과 실험을 구분하며, 일반 CSS보다 React/Tailwind 코드에서 규칙이 더 강하다고 설명한다.
실제 mcp/src/server.mjs에서 8개 등록을 확인했다: route_task, check_anti_slop, tokens_lint, acceptance_bar, ux_coverage, score_ui, fold_candidates, check_fold. 작업을 관련 참조·명령으로 연결하고, 코드 검사·토큰·화면 구성 요소 체크·점수·랜딩 첫 화면 조합 및 URL 렌더 검사를 제공한다. 자연어 디자인 판단은 스킬이, 정해진 규칙 검사는 별도 도구가 담당한다. npm ui-craft-mcp 최신 0.9.0, Node 20 이상. 문서·distribution-manifest.json은 ui-craft-mcp@0.9.0처럼 버전을 고정한 실행을 사용한다. README 일부의 7도구 표기는 현재 등록 8개와 구분한다.
스킬만: npx skills add educlopez/ui-craft 이 경로는 기본 디자인 지침과 변형 스킬을 가져오는 용도이며 전체 명령·리뷰 에이전트·MCP·훅이 함께 구성된다고 가정하지 않는다.
전체 시스템: 공식 ui-craft CLI를 설치한 뒤 ui-craft install. macOS는 Homebrew cask, Windows는 Scoop 경로도 문서화돼 있다. 전체 설치 도구는 Claude Code·Codex·Cursor·Gemini·OpenCode 구성을 연결한다. Claude Code의 공식 플러그인 경로: /plugin marketplace add educlopez/ui-craft /plugin install ui-craft Codex 등에는 명령을 하위 스킬로 변환한 배포본을 제공한다. 이 북마크 작업에서는 스킬·패키지를 설치하거나 전역 에이전트 설정을 바꾸지 않았다.
확인일: 2026-10-05. 공식 사이트: https://skills.smoothui.dev/ 저장소: https://github.com/educlopez/ui-craft 실제 스킬: https://github.com/educlopez/ui-craft/blob/main/skills/ui-craft/SKILL.md 설치 차이: https://skills.smoothui.dev/docs/install-options MCP: https://skills.smoothui.dev/docs/mcp 점수·검사 한계: https://skills.smoothui.dev/docs/score 검출 규칙: https://github.com/educlopez/ui-craft/blob/main/scripts/detect/rules.mjs npm: https://www.npmjs.com/package/ui-craft-detect 공식 LICENSE: MIT, Copyright 2026 Eduardo Calvo. https://github.com/educlopez/ui-craft/blob/main/LICENSE
https://github.com/Yousuf-developer/Viscose-carousel 라이브 데모: https://viscose-carousel.vercel.app/ 제작자: Yousuf Soomro. 사용자 제공 데모와 저장소의 homepage를 대조했고 실제 Carousel.jsx 및 관련 파일을 확인했다.
일반 이미지 슬라이더보다 재질 표현에 집중한 단일 포트폴리오 캐러셀이다. 큰 원형 링 대부분이 화면 밖에 놓이고, 일부 호를 따라 작품이 지나간다. 도입부에는 중앙에 모인 카드들이 좌우로 갈라지며 실 같은 연결부를 끌고 나온다. 카드들은 각각의 DOM 이미지가 아니라 전체 화면 fragment shader 안에서 그린 SDF 형태다. smooth minimum으로 인접 표면을 합치고, 별도의 연결 형태를 늘리고 끊어 점성이 있는 재질처럼 표현한다. 커서 주변의 표면 변형·카드 기울기와 연결부, 가장자리 굴절, View 커서 태그도 이 링 셰이더에 포함된다. projects.js 실측은 Matchday부터 MVN까지 18개다. 이름·분야·연도는 예시 데이터이며 18종의 독립 컴포넌트가 아니다.
README는 휠·드래그·터치 스와이프로 링을 회전시키고 카드가 정면에서 멈추는 동작을 설명한다. Carousel.jsx에 wheel·pointerdown/move/up/cancel·click 이벤트가 있다. 실제 브라우저에서 캔버스, 작품 카드와 좌우 메타데이터, 18개 이름 목록이 렌더링되는 것을 확인했다. 모든 입력·뷰포트·기기 성능을 실행 시험한 것은 아니다.
완성 npm 라이브러리·shadcn 레지스트리보다 공개 Next.js 프로젝트를 복제해 수정하는 방식이다. 실제 저장소 주소를 사용한다: git clone https://github.com/Yousuf-developer/Viscose-carousel cd Viscose-carousel npm install npm run dev
README는 Node 20 이상을 요구한다. package.json에서 Next 16·React 19·Three.js·GSAP·lil-gui, 개발 의존성 Tailwind v4를 확인했다. 이 세션에서는 설치·빌드하지 않았다. 콘텐츠는 projects.js, 모양·반응형·타이밍·커서·연결부·유리 효과는 params.js와 관련 모듈을 함께 수정한다. 개발 모드의 lil-gui는 README 기준 약 136개 조절값을 제공하고 NODE_ENV 조건부 동적 import로 로드된다. 조절값의 픽셀 기준은 참조 창 크기에 맞춰 정규화돼 있어 README가 먼저 기준 창을 맞추도록 안내한다.
README가 작업 중인 실험으로 명시한다.
LICENSE에서 소스 코드는 MIT임을 직접 확인했다. GitHub 자동 분류의 Other/NOASSERTION 대신 실제 라이선스 내용을 기준으로 기록한다. LICENSE는 public/ 에셋을 이 MIT 적용 범위에서 제외한다.
확인일: 2026-10-05. GitHub 소스: https://github.com/Yousuf-developer/Viscose-carousel 동작·설치·현황: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/README.md 재질 구현 설명: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/BREAKDOWN.md 메인 컴포넌트: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/components/Carousel.jsx 셰이더: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/components/shaders/planeShaders.js 라이선스·에셋 조건: https://github.com/Yousuf-developer/Viscose-carousel/blob/main/LICENSE
Eric Zakariasson(ericzakariasson)의 Scandinavian Design 에이전트 스킬. README는 Cursor agent skill로 소개하며 실제 배포 단위는 skills/scandinavian-design/ 폴더다. 완성 UI 컴포넌트·npm 런타임·MCP 서버보다 에이전트의 디자인 판단과 검증 절차를 정하는 지침에 가깝다. 스킬 폴더에는 약 52KB의 SKILL.md, 원본 소스에 접근할 수 없는 웹사이트를 다루는 websites.md, JavaScript 보조 스크립트 11개와 scripts/package.json이 있다.
흑백 바탕, 흰색 위 알파 검정으로 만든 중간톤, 산세리프 타이포, 명확한 위계와 절제된 장식을 사용한다. 제품 이미지가 표현을 담당하고 인터페이스는 차분하게 유지하는 방향이다. 다만 무조건 비우거나 회색으로 바꾸는 것을 좋은 디자인으로 보지 않는다. 이해·길 찾기, 작업 완료·접근성, 유용한 정보 밀도, 브랜드·의미, 시각적 절제, 즐거움의 순서로 판단하도록 지시한다. 의미 있는 상태 색과 브랜드, 제품 성격을 보존하고 스타일 자체보다 개선 이유를 요구한다. 기존 토큰을 바꿀 때는 소비하는 모든 요소를 조사하고, 같은 값이 배경·테두리·상태에 다른 역할로 쓰이면 역할을 분리하도록 설명한다. 정적 위계가 먼저이며 모션은 이후에 조절한다.
skills.sh 안내: npx skills add https://github.com/ericzakariasson/scandinavian-design --skill scandinavian-design
README는 Cursor 수동 설치 경로 ~/.cursor/skills/와 보조 도구의 npm 설치도 안내한다. 이 북마크 작업에서는 설치·호출하지 않았다. scripts/package.json의 의존성은 playwright-core다. 보조 스크립트는 페이지 조사·스타일 탐침·선을 그리는 방식·색조·화면당 정보 밀도·스크린샷 분할 등을 다룬다. 예: recon.js, probe.js, lines.js, tints.js, density.js, bands.js. 파일을 읽어 역할과 의존성을 확인했으며 직접 실행하지 않았다. 지침은 데스크톱·모바일 전후 캡처, 계산된 hover/focus/pressed 스타일, 좁은 화면과 긴 페이지, 로딩·오류·비활성·빈 상태 등을 검증하도록 요구한다. 스크립트 실행이 성공했다는 것과 디자인이 검증됐다는 것은 구분하도록 명시한다.
demos/sites.json에서 Hacker News, Craigslist, Wikipedia, GitHub, Stripe, IKEA, Yahoo Finance, Discord, IMDb, AWS의 10개 실측 항목을 확인했다. 정보 밀도·색인·긴 글·제품·마케팅·커머스·데이터·다크·미디어·카탈로그를 각각 점검하는 구성이다. 공식 전후 비교 뷰어: https://scandinavian-design.vercel.app/ README는 이 예시들이 외부 사이트에 CSS override를 적용한 데모이며 desktop/mobile 캡처로 평가·보완했다고 설명한다. websites.md는 기존 DOM이 허용하는 범위만 바꿀 수 있고, 원본 소스 수준의 구조 개선보다 한계가 있다고 명시한다. 실제 서비스에 변경이 배포됐다는 뜻은 아니다. 이 세션에서는 데모 수·파일·지침·뷰어 페이지를 확인했으며 평가 도구를 재실행하지 않았다.
GitHub의 license 값은 null, 루트 목록에 LICENSE 파일 없음, 루트 및 검증 도구 package.json에도 license 필드 없음. 공개 소스는 확인되지만 MIT 등 명시된 사용·재배포 라이선스로 표시하지 않는다.
확인일: 2026-10-04. 사용자가 제공한 상세 페이지: https://www.skills.sh/ericzakariasson/scandinavian-design/scandinavian-design 공식 저장소: https://github.com/ericzakariasson/scandinavian-design 실제 지침: https://github.com/ericzakariasson/scandinavian-design/blob/main/skills/scandinavian-design/SKILL.md 외부 사이트 처리 지침: https://github.com/ericzakariasson/scandinavian-design/blob/main/skills/scandinavian-design/websites.md 검증 도구: https://github.com/ericzakariasson/scandinavian-design/tree/main/skills/scandinavian-design/scripts 데모 목록: https://github.com/ericzakariasson/scandinavian-design/blob/main/demos/sites.json
게임 캐릭터·아이템·타일맵용 픽셀 이미지와 프레임 애니메이션을 그리는 독립 편집기. 완성된 스프라이트를 제작하는 도구이므로 Kidow / Tools에 분류한다. 핵심 기능은 실시간 애니메이션 미리보기, 어니언 스킨, 여러 스프라이트 동시 편집, 기본·사용자 팔레트, 레이어와 프레임, 반복되는 패턴·텍스처를 위한 타일 그리기, 채워진 윤곽·다각형·음영 등 픽셀 정밀 도구다.
확인일 2026-10-04 기준 GitHub 최신 안정 릴리스는 v1.3, 발행일 2026-10-02. 실제 첨부 파일:
https://libresprite.github.io/online/ Emscripten 기반 온라인판이 제공된다. 실제 브라우저에서 로딩 후 File·Edit·Sprite·Layer·Frame·View·Scripts 메뉴와 New File / Open File 시작 화면을 확인했다. 초기 HTML 제목은 1.1-dev였으나 실행 후 제목과 앱 하단은 LibreSprite 1.2-dev였다. 실제 실행 표시를 기준으로 기록한다. 데스크톱 v1.3과 버전이 같다고 가정하지 않는다. 시작 화면까지 확인했으며 그림 제작·파일 저장·모든 브라우저 기능과 태블릿 입력을 시험한 것은 아니다.
공식 소스의 png_format.cpp, gif_format.cpp, ase_format.cpp에서 각각 onLoad·onSave 구현을 확인했다. PNG 정지 이미지, GIF 애니메이션, ASE 작업 파일을 다룰 수 있는 편집기다. 현행 Aseprite의 모든 새 기능·파일을 완전히 호환한다고 검증한 것은 아니다. SCRIPTING.md에는 Sprite의 팔레트·레이어 접근, crop·resize·save·saveAs 등 자동화 API가 문서화돼 있다. 테마 변경도 공식 README에서 안내한다.
Aseprite가 2016-08-26 라이선스를 변경하기 전 마지막 GPLv2 커밋을 기반으로 포크됐으며, 이후 LibreSprite가 독립 개발된다. 최신 Aseprite 소스를 그대로 배포하는 프로젝트로 해석하지 않는다. 공식 LICENSE.txt는 GNU General Public License Version 2이고 GitHub 메타데이터도 GPL-2.0이다. MIT 라이선스 도구로 표시하지 않는다.
공식 사이트: https://libresprite.github.io/ 기능: https://libresprite.github.io/#!/features 다운로드: https://libresprite.github.io/#!/downloads 브라우저판: https://libresprite.github.io/online/ 저장소·역사·기능: https://github.com/LibreSprite/LibreSprite 최신 안정판: https://github.com/LibreSprite/LibreSprite/releases/tag/v1.3 라이선스: https://github.com/LibreSprite/LibreSprite/blob/master/LICENSE.txt 스크립팅: https://github.com/LibreSprite/LibreSprite/blob/master/SCRIPTING.md 파일 형식 소스: https://github.com/LibreSprite/LibreSprite/tree/master/src/app/file
Mariana Castilho(@mrncst)의 "Small laboratory of fine UI". 화려한 배경 효과보다 제품 안에서 상태·정보·행동을 연결하는 작은 인터랙션 실험이 중심이다. 기존 컴포넌트를 재사용·확장·변형해 새로운 문맥을 만드는 방식이 특징이다. 페이지 최상위 데모 12개와 실제 브라우저 하단의 "12 Components"를 대조했다. Animated Cards 내부의 "56 Components"는 예시 데이터이므로 라이브러리 수량으로 세지 않는다.
각 실험에 React·Tailwind CSS·Framer Motion 태그가 표시되고, Beta Feedback 및 Parameters iOS Slider에는 Radix UI도 표시된다. 모든 실험이 같은 의존성을 쓰는 것은 아니다. 사이트 자체는 Next.js로 제작됐다고 하단에 표시한다. 공개 페이지는 설명과 조작 가능한 데모 중심이다. 코드 복사 버튼, 컴포넌트 소스 링크, npm·shadcn 설치 명령, 레지스트리·MCP·공개 코드 라이선스 안내는 확인되지 않았다. 제작자 GitHub 계정에서 uilabs 이름의 공개 저장소 검색도 결과가 없었다. 이는 다른 이름의 소스가 전혀 없다는 뜻은 아니다. 따라서 Design 컬렉션에 인터랙션 레퍼런스로 분류한다. 사이트의 React·Tailwind 태그를 곧바로 복사 가능한 코드 제공으로 해석하지 않는다. Animations.dev 강의 연결은 애니메이션 학습 자료 안내이며 UI Labs 설치 경로가 아니다. 실험 전체의 접근성·모션 감소·브라우저 호환성을 검증한 것은 아니다.
확인일: 2026-10-04. 공식 페이지와 브라우저의 12 Components 표시, 팝오버 열림 상태 확인. 모든 데모의 전체 흐름을 실행 시험하지는 않았다. 공식 사이트: https://www.uilabs.dev/ 제작자: https://twitter.com/mrncst 사이트에 표시된 제작자 GitHub 계정: https://github.com/mrnbpt 별도 코드 라이선스: 공개 페이지에서 확인되지 않음.
Nikhil Singh(nikhils4)의 웹용 React 모션 UI 라이브러리. 런타임 UI 패키지를 통째로 설치하는 방식보다 원하는 컴포넌트의 소스를 프로젝트에 가져와 직접 수정하는 방식이다. 실측 /r/registry.json은 55항목: registry:ui 52종 + registry:block 3종. 홈페이지의 "55 components"는 블록을 포함한 총합이다. 문서 범주별 합계도 55다.
공식 요구 환경은 React 19·Tailwind CSS v4·Motion. 대부분 Motion이 필요하고 일부는 cn 클래스 헬퍼도 사용한다. npx shadcn@latest add https://uibeats.com/r/border-beam.json 또는 컴포넌트 문서의 소스를 복사하고 명시된 의존성을 설치한다. shadcn CLI는 파일과 의존성을 함께 설치한다. 이름에 Beats가 있지만 오디오·효과음 라이브러리가 아니다.
실제 공개 JSON 표본에서 확인한 차이:
공식 README는 UI 52종 각각 /playground/<category>/<name>에서 props를 조절하고 변경한 값만 포함한 스니펫을 복사할 수 있다고 설명한다. Motion Studio는 cubic-bezier와 스프링 stiffness·damping·mass를 조절해 Motion transition 또는 CSS를 가져오는 도구로 안내된다. 별도 페이지의 컴포넌트 선택·props 컨트롤·스니펫도 확인했다. MCP 패키지 @uibeats/mcp는 search_components, get_component, list_components, get_install_command 4개 도구를 제공한다. 설정 예: npx -y @uibeats/mcp 에이전트가 URL로 읽을 수 있는 /llms.txt, /docs/<category>/<name>.md, /r/components.json도 제공한다. MCP나 패키지를 이 세션에 설치하지 않고 제공 방식만 기록한다.
공식 README는 전체 레지스트리가 prefers-reduced-motion을 고려하고 CI로 검사한다고 설명한다. tests/reduced-motion.test.ts에 preference 조회·사용 여부와 client directive 검사 코드가 있음을 확인했다. 위의 레지스트리 표본 5종에도 useReducedMotion이 들어 있다. 감소 처리 방식은 항목별로 다르다. README 예시는 입장 효과를 즉시 정착시키고, 자동 재생을 멈추되 수동 동작을 허용하며, Flip Card는 뒷면 전환을 즉시 처리한다고 설명한다. 실제 전 컴포넌트의 브라우저 동작·접근성·성능을 시험한 것은 아니다.
확인일: 2026-10-04. 공식 LICENSE.md와 컴포넌트 Markdown에서 MIT 확인. 공식 사이트: https://uibeats.com/ 공개 레지스트리: https://uibeats.com/r/registry.json 설치: https://uibeats.com/docs/getting-started/installation CLI: https://uibeats.com/docs/getting-started/cli MCP: https://uibeats.com/docs/getting-started/mcp Motion Studio: https://uibeats.com/motion-studio 저장소: https://github.com/nikhils4/ui-beats 라이선스: https://github.com/nikhils4/ui-beats/blob/main/LICENSE.md 모션 감소 검사: https://github.com/nikhils4/ui-beats/blob/main/tests/reduced-motion.test.ts
Eduard Bodak이 만든 작은 버튼 모션 라이브러리·실험 갤러리. 공개 페이지의 데모 링크를 세면 43종이다. Webflow 복제 CTA와 맨 위로 이동 버튼은 제외했다. GSAP 표시 3종(GSAP-Teleport, GSAP Color, GSAP-FUN), 나머지 40종은 CSS 중심의 버튼 연출이다. 31종은 개별 button-* 클래스, 12종은 .button-default에 is-* 변형 클래스를 붙인 구조다. 별도 입력·체크박스·라디오 컴포넌트는 FAQ의 향후 계획으로만 안내한다.
공식 Webflow Cloneable: https://webflow.com/made-in-webflow/website/tiny-mighty-buttons FAQ는 Webflow에서 사이트를 복제하고 구조·스타일을 살펴보라고 안내한다. 공통 스타일은 상단 global-button-css, 개별 버튼의 CSS는 해당 버튼 앞의 이름 붙은 embed에 있으며 나머지 기본 스타일은 Webflow에 설정돼 있다. 필요한 스타일을 함께 확인해 자신의 클래스·마크업으로 재구현한다. 개발자 도구로 검사하는 경로도 안내한다. 간편 복사 버튼은 학습·재구현을 유도하려고 제공하지 않는다고 설명한다. npm 설치, React 컴포넌트, shadcn 레지스트리, GitHub 저장소 경로는 확인되지 않았다. GSAP 3종은 SplitText·CustomEase를 사용한다. 실제 데모 페이지에는 Webflow 런타임·jQuery·Locomotive Scroll·SplitType도 로드된다. 사이트 전체의 의존성과 특정 CSS 버튼에 필요한 의존성은 구분한다.
CSS에서 hover: hover / pointer: fine 조건, focus-visible 스타일, prefers-reduced-motion 대응을 확인했다. 공통 모션 감소 규칙은 CSS 애니메이션·전환 시간을 줄인다. GSAP 버튼은 pointerenter와 focus 이벤트로 실행한다. 이를 전체 버튼의 모든 브라우저 접근성 검증으로 해석하지 않는다. 데모 43종은 a 링크로 렌더링된다. 실제 액션 버튼으로 쓸 때는 FAQ가 안내하는 button 요소와 type="button"으로 바꾸고 마크업을 점검한다. 페이지는 button 안에 div를 넣지 말라는 주의도 표시한다. CSS vendor prefix는 작성자가 생략했다고 설명하므로 적용 환경에 맞춰 보완한다. 문서·공개 소스를 확인했으며 실제 브라우저별 실행 시험은 하지 않았다.
확인일: 2026-10-04. 공식 페이지의 최신 기재 변경 기록: v0.39 / 2025-05-07, GSAP 버튼 3종 추가. 이는 패키지 배포 버전이 아닌 사이트 변경 기록이다. Webflow 페이지의 Clone in Webflow 링크 확인. 제작자 사이트·프로젝트 페이지에서 별도 MIT 등 코드 라이선스 선언은 확인되지 않았다. 공식 데모·FAQ·Changelog: https://tiny-mighty-buttons.webflow.io/ 공식 복제 페이지: https://webflow.com/made-in-webflow/website/tiny-mighty-buttons 제작자: https://webflow.com/@eduardbodak
Artur Bień의 작은 JavaScript 풍선 효과 라이브러리. 성공·완료·생일·출시 같은 이벤트에서 화면 전체에 잠깐 축하 연출을 얹는 용도로 적합하다. 일반 SVG 풍선과 풍선처럼 부풀린 텍스트·이모지 두 모드이며, UI 컴포넌트 갤러리나 상시 배경 파티클 엔진은 아니다.
npm install balloons-js import { balloons, textBalloons } from "balloons-js";
balloons(); textBalloons([{ text: "🎉축하해요", fontSize: 120, color: "#ff4081" }]);
일반 풍선은 뷰포트 크기로 크기·개수를 계산하고 최소 7개를 띄운다. 노랑·빨강·파랑·초록·보라의 5가지 색 조합, 3D transform과 원근, 기울기·블러로 거리감을 만든다. 각 풍선 애니메이션은 약 25~30초이며 순서에 따른 지연이 있다. 텍스트 풍선은 SVG morphology·blur·specular lighting으로 볼륨·광택을 만든다. 줄 사이 지연은 1초, 글자 사이는 0.1초로 소스에 지정돼 있다. 두 모드 모두 fixed 레이어와 pointer-events: none을 사용한다. 공개 API에 개수·속도·색 팔레트·취소 핸들 설정은 없다(일반 풍선 기준). 텍스트 모드는 개별 풍선은 제거하지만 컨테이너 제거 코드는 확인되지 않았다. 반복 호출을 제품에 넣을 때 정리가 필요하다. 두 구현에 prefers-reduced-motion 분기는 없어 모션 감소 처리는 호출부에서 추가해야 한다. 텍스트 모드의 Intl.Segmenter와 Web Animations API 지원도 대상 브라우저에서 확인한다. 문서·소스 확인이며 실제 브라우저 실행 시험은 하지 않았다.
확인일: 2026-10-04. 공식 LICENSE: MIT, Copyright 2024 Artur Bień. npm 메타데이터도 MIT. 공식 데모: https://arturbien.github.io/balloons-js/ 저장소: https://github.com/arturbien/balloons-js npm: https://www.npmjs.com/package/balloons-js 일반 풍선 소스: https://github.com/arturbien/balloons-js/blob/main/src/balloons.ts 텍스트 풍선 소스: https://github.com/arturbien/balloons-js/blob/main/src/textBalloons.ts 라이선스: https://github.com/arturbien/balloons-js/blob/main/LICENSE
