최근 1주 사이 생긴 저장소 가운데 Claude Code에 붙여 쓰는 스킬 3개를 골랐습니다. 별 수는 2026년 11월 2일 기준이고, 아래 화면 설명은 각 README를 바탕으로 했습니다. 이번에는 직접 실행하지 않았습니다.
| 저장소 | ★ | 하는 일 | 필요한 것 |
|---|---|---|---|
| elvarofficial/teardown | 1.1k | 기계를 뜯어 보는 3D 시뮬레이터 페이지 | Node 20+, Playwright, (영상) ffmpeg |
| caru-ini/stack-diagram | 922 | 한 문장으로 공식 로고 구조도 | 스킬을 지원하는 에이전트 |
| NiazMorshed2007/reanimate | 848 | 남의 애니메이션을 녹화해 똑같이 재현 | Bun 1.1+, macOS·Linux |
teardown
“4행정 오토바이 엔진을 분해할 수 있는 시뮬레이터 만들어 줘”처럼 말하면, Claude가 오프라인에서 열리는 HTML 한 장을 만듭니다. 가운데에서 기계가 돌고, 주변 패널에 실제 수치가 뜨고, 버튼을 누르면 해당 부품이 열립니다. V8 엔진, 세스나, 스트랜드비스트 예제 3개가 들어 있습니다.
npx skills add elvarofficial/teardown -g -a claude-code
# 설치된 폴더에서 한 번
npm install && npx playwright install chromiumstack-diagram
“Next.js와 Hono API는 Vercel, DB는 Neon, 인증은 Clerk, 결제는 Stripe” 같은 한 문장을 주면 공식 로고가 들어간 구조도를 그립니다. 클라우드 구성 말고도 모노레포 도구, AI 앱 흐름까지 그립니다.
npx skills add caru-ini/stack-diagramreanimate
마음에 드는 사이트 애니메이션이나 화면 녹화, gif, Lottie를 주면 헤드리스 브라우저로 원본을 녹화해 시간·이징·위치를 표로 뽑고, 내 프로젝트가 쓰는 방식(CSS, Framer Motion, GSAP 등)으로 다시 만듭니다. 그다음 복사본도 같은 방식으로 녹화해 비교하고, 차이가 줄어들 때까지 보통 2~5번 반복합니다.
npx skills add NiazMorshed2007/reanimate -g -a claude-code남의 사이트를 따라 만들 때는 그 사이트의 디자인과 라이선스를 존중하세요. 동작 원리를 배우고 내 것으로 바꿔 쓰는 용도가 맞습니다.
오늘 할 일
셋 중 가장 가볍게 써 볼 수 있는 건 stack-diagram입니다. 지금 만드는 서비스를 한 문장으로 적어 구조도를 하나 받아 보세요. 문서나 발표 자료에 바로 씁니다.
지난번에 고른 스킬 4개: 이번 주 깃허브 별 쏟아진 Claude Code 스킬 4개