What is it?
claude.ai를 위한 복잡한 다중 컴포넌트 React 아티팩트를 구축하기 위한 종합 툴킷입니다. React 18, TypeScript, Vite, Tailwind CSS, 40개 이상의 사전 설치된 shadcn/ui 컴포넌트를 포함한 완전한 개발 스택을 제공합니다. 이 스킬은 상태 관리, 라우팅 또는 최신 UI 컴포넌트가 필요한 정교한 프론트엔드 애플리케이션을 위해 설계되었으며, 단순한 단일 파일 HTML/JSX 아티팩트용이 아닙니다.
How to use it?
개발 워크플로우는 세 가지 주요 단계로 구성됩니다:
-
프로젝트 초기화 -
bash scripts/init-artifact.sh <project-name>을 실행하여 Tailwind CSS, shadcn/ui 테마, 경로 별칭을 포함한 모든 종속성이 사전 설치된 완전히 구성된 React + TypeScript 프로젝트를 생성합니다. -
아티팩트 개발 - React 컴포넌트, 훅, shadcn/ui 요소를 사용하여 생성된 파일을 편집합니다. 프로젝트에는 사용 준비가 된 40개 이상의 shadcn/ui 컴포넌트(버튼, 폼, 다이얼로그, 테이블 등)가 사전 설치되어 있습니다.
-
단일 HTML로 번들링 -
bash scripts/bundle-artifact.sh를 실행하여 모든 JavaScript, CSS, 종속성이 인라인된 자체 포함 단일 HTML 파일로 패키징합니다. 이렇게 하면 claude.ai 아티팩트로 직접 공유할 수 있는bundle.html이 생성됩니다.
번들링된 아티팩트는 설정 없이 Claude 대화에서 즉시 작동합니다.
Key Features
- Vite 빌드 도구와 함께 완전한 React 18 + TypeScript 스택
- 40개 이상의 shadcn/ui 컴포넌트 사전 설치 (버튼, 폼, 다이얼로그, 테이블, 차트 등)
- 일관된 스타일링을 위한 shadcn/ui 테마 시스템이 포함된 Tailwind CSS 3.4.1
- 깔끔한 import를 위한 경로 별칭 (@/) 사전 구성
- 모든 종속성이 인라인된 단일 HTML 파일로 자동 번들링
- 자동 Vite 버전 감지를 통한 Node 18+ 호환성
- 일반적인 AI 생성 미학을 피하기 위한 디자인 가이드라인
Related Skills
More from Developer ToolsMCP Builder
Guide for creating high-quality MCP servers to integrate external APIs and services
Algorithmic Art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration
Web App Testing
Test local web applications using Playwright for UI verification and debugging