현대적인 프런트엔드 웹 기술(React, Tailwind CSS, shadcn/ui)을 사용하여 정교한 다중 컴포넌트 claude.ai용 HTML artifact를 제작하기 위한 툴킷입니다. 상태 관리, 라우팅 또는 shadcn/ui 컴포넌트가 필요한 복잡한 artifact에 사용하세요. 단순한 단일 파일 HTML/JSX artifact용이 아닙니다.
/plugin marketplace add icartsh/icartsh_plugin/plugin install icartsh-plugin@icartsh-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
LICENSE.txtscripts/bundle-artifact.shscripts/init-artifact.shscripts/shadcn-components.tar.gz강력한 프런트엔드 claude.ai artifact를 제작하려면 다음 단계를 따르세요:
scripts/init-artifact.sh를 사용하여 프런트엔드 레포지토리를 초기화합니다.scripts/bundle-artifact.sh를 사용하여 모든 코드를 단일 HTML 파일로 번들링합니다.기술 스택(Stack): React 18 + TypeScript + Vite + Parcel (번들링) + Tailwind CSS + shadcn/ui
매우 중요: "AI가 만든 뻔한 느낌(AI slop)"을 피하기 위해, 과도한 중앙 정렬 레이아웃, 보라색 그라데이션, 일률적인 둥근 모서리, Inter 폰트 사용을 지양하세요.
초기화 스크립트를 실행하여 새로운 React 프로젝트를 생성합니다:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
이 명령은 다음이 구성된 프로젝트를 생성합니다:
@/) 설정 완료생성된 파일들을 편집하여 artifact를 빌드합니다. 안내가 필요한 경우 아래의 일반적인 개발 작업을 참조하세요.
React 앱을 단일 HTML artifact로 번들링합니다:
bash scripts/bundle-artifact.sh
이 명령은 bundle.html을 생성합니다. 이는 모든 JavaScript, CSS 및 종속성이 인라인화된 독립적인 artifact 파일입니다. 이 파일은 Claude 대화에서 artifact로 직접 공유할 수 있습니다.
요구 사항: 프로젝트 루트 디렉토리에 index.html이 있어야 합니다.
스크립트 동작 원리:
.parcelrc 설정 생성번들링된 HTML 파일을 사용자에게 공유하여 artifact로 볼 수 있게 합니다.
참고: 이 단계는 완전히 선택 사항입니다. 필요한 경우 또는 요청이 있을 때만 수행하세요.
artifact를 테스트하거나 시각화하려면 가용한 도구들(다른 SKILL이나 Playwright, Puppeteer와 같은 내장 도구 포함)을 사용하세요. 일반적으로 artifact 테스트를 미리 수행하는 것은 요청과 결과 확인 사이의 지연 시간(latency)을 유발하므로 피하는 것이 좋습니다. 요청이 있거나 문제가 발생했을 때, artifact를 먼저 제시한 후에 테스트를 진행하세요.