클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

아티팩트 빌더 (Artifacts Builder)

React·Tailwind·shadcn/ui로 만든 복잡한 앱을 단일 HTML 아티팩트로 번들링해주는 스킬입니다.

개발·코딩중급★ 1,866⑂ 546AI 점수 7/10마지막 업데이트: 2026. 7. 26.

무엇을 해주나

단순한 한 파일 HTML/JSX로는 부족한, 상태 관리·라우팅·shadcn/ui 컴포넌트가 필요한 claude.ai 아티팩트를 만들 때 사용하는 도구 모음입니다.

  • init-artifact.sh로 React 18 + TypeScript + Vite + Tailwind CSS 3.4 + shadcn/ui(40여 개 컴포넌트 사전 설치) 프로젝트를 즉시 생성
  • @/ 경로 알리아스, Radix UI 의존성, Parcel 번들 설정(.parcelrc)까지 자동 구성
  • bundle-artifact.sh로 JS·CSS·자산을 모두 인라인한 bundle.html 생성 → 대화창에 바로 아티팩트로 공유 가능
  • "AI 느낌 나는 디자인"(과한 중앙 정렬, 보라색 그라디언트, 균일한 라운드, Inter 폰트) 회피 가이드 제공
  • 필요 시 Playwright/Puppeteer 등으로 사후 테스트

이런 분께 추천

  • Claude로 대시보드, 다단계 폼, 미니 SaaS 프로토타입 같은 멀티 컴포넌트 아티팩트를 만들고 싶은 분
  • shadcn/ui 룩앤필을 유지하면서도 결과물을 파일 하나로 배포하고 싶은 개발자
  • 프런트엔드 초기 세팅(Tailwind, 경로 알리아스, 번들러) 반복 작업을 줄이고 싶은 분

활용 예시

  1. "매출 대시보드 아티팩트 만들어줘 — 탭, 차트, 다크모드 포함" → 프로젝트 초기화 후 shadcn Tabs/Card로 구성하고 번들 HTML로 전달
  2. "3단계 설문 위저드를 라우팅과 상태 저장 포함해서 만들어줘" → React 상태 관리 + 단일 HTML 번들
  3. "이 아티팩트가 실제로 렌더링되는지 스크린샷으로 확인해줘" → 번들 후 Playwright로 검증

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 composio-community/awesome-claude-plugins 의 artifacts-builder/skills/artifacts-builder 폴더를 내 ~/.claude/skills/artifacts-builder/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/composio-community/awesome-claude-plugins.git /tmp/acp && mkdir -p ~/.claude/skills && cp -r /tmp/acp/artifacts-builder/skills/artifacts-builder ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 Node.js 18 이상이 설치되어 있는지 확인합니다: node -v
  2. 저장소를 클론합니다: git clone https://github.com/composio-community/awesome-claude-plugins.git
  3. 스킬 폴더를 Claude 스킬 경로로 복사합니다: mkdir -p ~/.claude/skills && cp -r awesome-claude-plugins/artifacts-builder/skills/artifacts-builder ~/.claude/skills/
  4. scripts/ 폴더 안의 init-artifact.sh, bundle-artifact.sh가 함께 복사되었는지 확인하고 실행 권한을 줍니다: chmod +x ~/.claude/skills/artifacts-builder/scripts/*.sh
  5. Claude Code를 재시작한 뒤 "복잡한 React 아티팩트를 만들어줘"처럼 요청하면 스킬이 활성화됩니다.
  6. 처음 실행 시 npm 의존성 설치에 몇 분이 걸릴 수 있으니 기다려 주세요.
GitHub에서 원본 보기 ↗