아티팩트 빌더 (Artifacts Builder)

무엇을 해주나

• scripts/init-artifact.sh로 React 18 + TypeScript + Vite 프로젝트를 자동 생성합니다. Tailwind CSS 3.4.1, shadcn/ui 컴포넌트 40여 개, Radix UI 의존성, @/ 경로 알리아스가 미리 설정됩니다.
• 코드를 편집해 아티팩트를 개발한 뒤 scripts/bundle-artifact.sh로 Parcel + html-inline을 통해 JS·CSS·에셋을 모두 인라인한 bundle.html 단일 파일을 만듭니다.
• 완성된 HTML을 대화창에 그대로 아티팩트로 공유할 수 있습니다.
• 과도한 중앙 정렬, 보라색 그라디언트, 균일한 라운드 코너, Inter 폰트 남용 같은 이른바 'AI slop' 디자인을 피하라는 스타일 가이드가 포함됩니다.
• 필요할 때만 Playwright·Puppeteer로 사후 테스트하도록 안내해 응답 지연을 줄입니다.

이런 분께 추천

• 상태 관리·라우팅·shadcn/ui 컴포넌트가 필요한 다중 컴포넌트 아티팩트를 만드는 분
• 프로토타입 대시보드나 인터랙티브 데모를 한 파일로 배포하고 싶은 프론트엔드 개발자·디자이너
• 단순 단일 파일 HTML/JSX 아티팩트로는 부족한 작업을 자주 하는 분 (단순 작업에는 오히려 과잉입니다)

활용 예시

1. "shadcn/ui 테이블과 차트로 매출 대시보드 아티팩트 만들어줘" → 프로젝트 초기화 → 컴포넌트 작성 → bundle.html 공유
2. "여러 화면을 탭으로 오가는 설문 도구를 하나의 HTML로 뽑아줘" → 라우팅/상태 관리 포함 앱을 단일 파일로 번들링
3. "기존 프로젝트를 공유 가능한 단일 HTML 아티팩트로 묶어줘" → 번들 스크립트만 실행해 인라인 HTML 생성

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/composio-community/awesome-claude-plugins/HEAD/artifacts-builder/skills/artifacts-builder/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

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