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

웹 아티팩트 빌더

공식

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

개발·코딩중급★ 167,132⑂ 19,920AI 점수 9/10마지막 업데이트: 2026. 8. 7.

무엇을 해주나

Claude가 claude.ai 아티팩트로 바로 보여줄 수 있는 본격적인 프론트엔드 앱을 만들어 줍니다.

  • scripts/init-artifact.sh로 React 18 + TypeScript + Vite 프로젝트를 즉시 생성 (Tailwind 3.4.1, shadcn/ui 40여 개 컴포넌트, Radix UI, @/ 경로 별칭 사전 설정)
  • 코드를 작성/수정한 뒤 scripts/bundle-artifact.sh 실행 → Parcel + html-inline으로 JS·CSS·에셋을 전부 인라인한 bundle.html 한 개 파일 생성
  • 그 파일을 대화창에 그대로 아티팩트로 공유
  • 필요하면 Playwright/Puppeteer로 사후 테스트

또한 "AI 티 나는 디자인(과도한 중앙 정렬, 보라색 그라디언트, 획일적인 둥근 모서리, Inter 폰트)"을 피하라는 디자인 가이드가 내장되어 결과물의 완성도를 높여줍니다.

이런 분께 추천

  • 상태 관리·라우팅·다중 화면이 필요한 복잡한 아티팩트를 만들고 싶은 분
  • shadcn/ui 컴포넌트를 기반으로 깔끔한 UI 데모를 빠르게 뽑고 싶은 기획자·개발자
  • 결과물을 파일 하나로 배포/공유해야 하는 분 (사내 데모, 프로토타입 전달)
  • 반대로, 버튼 몇 개짜리 단일 JSX 아티팩트만 필요하다면 이 스킬은 과합니다.

활용 예시

  1. 대시보드 프로토타입: "매출 지표 카드 + 차트 + 사이드바 네비게이션이 있는 관리자 대시보드를 만들어줘" → 다중 컴포넌트 React 앱을 생성하고 bundle.html로 전달.
  2. 인터랙티브 학습 도구: 탭·모달·폼 검증이 들어간 퀴즈 앱을 shadcn/ui 컴포넌트로 구성해 단일 HTML로 공유.
  3. 클라이언트 제안용 랜딩페이지: 라우팅과 다크모드 토글을 갖춘 마이크로사이트를 만든 뒤, 파일 하나만 이메일로 전달.

· · · 설치 가이드 · · ·

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

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

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

직접 명령으로 설치하기

git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/web-artifacts-builder ~/.claude/skills/

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

  1. 터미널을 열고 Node.js 18 이상이 설치되어 있는지 확인합니다: node -v
  2. 공식 스킬 저장소를 내려받습니다: git clone https://github.com/anthropics/skills.git
  3. 스킬 폴더를 만듭니다: mkdir -p ~/.claude/skills
  4. 이 스킬만 복사합니다: cp -r skills/skills/web-artifacts-builder ~/.claude/skills/
  5. 스크립트에 실행 권한을 줍니다: chmod +x ~/.claude/skills/web-artifacts-builder/scripts/*.sh
  6. Claude Code를 재시작한 뒤 "web-artifacts-builder 스킬로 대시보드 아티팩트를 만들어줘"처럼 요청하면 됩니다.
  7. 첫 실행 시 npm 패키지 설치로 몇 분 걸릴 수 있으니 네트워크 연결을 유지하세요.
GitHub에서 원본 보기 ↗