스킬 web-artifacts-builder
📦

web-artifacts-builder

낮은 위험 ⚡ 스크립트 포함📁 파일 시스템 액세스⚙️ 외부 명령어

shadcn/ui 컴포넌트로 React 아티팩트 구축

또한 다음에서 사용할 수 있습니다: davila7,Azeem-2,anthropics

Claude 대화용 다중 컴포넌트 React 아티팩트를 생성하려면 복잡한 번들링과 구성이 필요합니다. 이 스킬은 React 18, TypeScript, Tailwind CSS, 40개 이상의 shadcn/ui 컴포넌트로 프로젝트 설정을 자동화한 후, 모든 것을 단일 HTML 파일로 번들링합니다.

지원: Claude Codex Code(CC)
🥉 73 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"web-artifacts-builder" 사용 중입니다. 칸반 보드 레이아웃으로 'task-board'라는 프로젝트 초기화

예상 결과:

프로젝트 'task-board'가 React 18, TypeScript, Vite, Tailwind CSS 3.4.1, 40개 이상의 shadcn/ui 컴포넌트로 성공적으로 생성되었습니다. 경로 별칭(@/) 구성됨. 'cd task-board && pnpm dev'를 실행하여 개발 서버를 시작하세요.

"web-artifacts-builder" 사용 중입니다. 현재 React 프로젝트를 단일 HTML 아티팩트로 번들링

예상 결과:

번들 완료! 출력: bundle.html (487 KB). 모든 JavaScript, CSS 및 자산 인라인됨. 브라우저에서 bundle.html을 열어 미리보거나 Claude 대화에서 직접 공유하세요.

보안 감사

낮은 위험
v1 • 2/24/2026

Static analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.

3
스캔된 파일
451
분석된 줄 수
5
발견 사항
1
총 감사 수
낮은 위험 문제 (2)
scripts/bundle-artifact.sh:1-54scripts/init-artifact.sh:1-323
Shell Script Execution
Build scripts execute shell commands for project scaffolding. All commands use hardcoded arguments with no user input injection vectors. Standard pattern for development tooling.
scripts/init-artifact.sh:228-251
Filesystem Modification
Scripts modify project configuration files (tsconfig.json, tailwind.config.js) using Node.js fs module. Operations are scoped to the created project directory only.

위험 요인

⚡ 스크립트 포함 (1)
scripts/init-artifact.sh:93
📁 파일 시스템 액세스 (1)
scripts/init-artifact.sh:230-250
⚙️ 외부 명령어 (2)
scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323
감사자: claude

품질 점수

45
아키텍처
100
유지보수성
87
콘텐츠
50
커뮤니티
86
보안
91
사양 준수

만들 수 있는 것

대시보드 컴포넌트

테이블, 카드, 차트, 필터 등 다양한 shadcn/ui 컴포넌트로 복잡한 데이터 시각화 대시보드를 구축하여 Claude 대화에서 직접 작동하도록 합니다.

다단계 폼 애플리케이션

유효성 검사, 상태 관리, 다이얼로그, 탭, 아코디언 같은 UI 컴포넌트가 포함된 정교한 폼 흐름을 만들어 사용자 온보딩 경험을 제공합니다.

디자인 시스템 쇼케이스

shadcn/ui 테마, 다크 모드 지원, 반응형 레이아웃을 보여주는 포괄적인 컴포넌트 라이브러리를 생성하여 디자인 문서화를 지원합니다.

이 프롬프트를 사용해 보세요

빠른 시작 - 프로젝트 초기화 
모든 shadcn/ui 컴포넌트가 구성된 'dashboard-demo'라는 새로운 웹 아티팩트 프로젝트를 초기화합니다.
필터가 있는 데이터 테이블 구축 
이름, 이메일, 상태를 보여주는 고객 관리 대시보드를 만듭니다. select 및 input 컴포넌트를 사용하여 필터 컨트롤을 추가합니다. 드롭다운 메뉴를 통해 페이지네이션과 행 작업을 포함합니다.
유효성 검사가 있는 다단계 폼 
form, input, select, button 컴포넌트를 사용하여 3단계 등록 폼을 만듭니다. react-hook-form과 zod 유효성 검사를 사용합니다. 1단계는 개인 정보, 2단계는 선호도, 3단계는 확인을 표시합니다. 진행률 표시기를 포함합니다.
다크 모드 분석 대시보드 
next-themes를 사용하여 다크 모드 전환이 있는 분석 대시보드를 만듭니다. 메트릭 카드, 라인 차트 플레이스홀더, 최근 활동 테이블, 설정 다이얼로그를 포함합니다. card, table, dialog, button, switch 컴포넌트와 적절한 shadcn/ui 테마를 사용합니다.

모범 사례

  • 개발을 시작하기 전에 항상 init-artifact.sh를 실행하여 모든 의존성과 구성이 올바르게 설정되었는지 확인하세요
  • shadcn/ui 규칙과 일치하는 깔끔한 가져오기를 위해 제공된 경로 별칭(@/components, @/lib)을 사용하세요
  • 빌드 시간과 출력 크기를 최소화하려면 개발이 완료된 후에만 bundle-artifact.sh를 실행하세요

피하기

  • 단순한 단일 파일 React 스니펫에는 이 스킬을 사용하지 마세요 - 다중 컴포넌트 애플리케이션을 위해 설계되었습니다
  • Parcel 번들링 구성과 경로 별칭 해결을 이해하지 않는 한 빌드 스크립트를 수정하지 마세요
  • 버전 관리에 bundle.html을 커밋하지 마세요 - 아티팩트 공유 세션마다 새로 생성하세요

자주 묻는 질문

이 스킬과 단순한 React 아티팩트 생성의 차이점은 무엇인가요?
이 스킬은 적절한 빌드 도구로 전체 다중 컴포넌트 React 애플리케이션을 생성하는 반면, 단순한 아티팩트는 단일 파일 JSX 스니펫입니다. 상태 관리, 라우팅 또는 많은 shadcn/ui 컴포넌트가 필요한 복잡한 UI에 사용하세요.
pnpm 대신 npm이나 yarn을 사용할 수 있나요?
스크립트는 pnpm용으로 작성되어 있습니다. npm이나 yarn으로 수동으로 명령을 조정할 수 있지만, 제공된 스크립트와의 호환성과 더 빠른 의존성 설치를 위해 pnpm이 권장됩니다.
번들된 HTML 파일이 왜这么大的가요?
번들에는 전체 React 라이브러리, 모든 shadcn/ui 컴포넌트, Tailwind CSS가 단일 파일로 인라인되어 있습니다. 이权衡은 외부 의존성 없이 自包含 아티팩트로 공유할 수 있게 합니다.
초기화 후 사용자 정의 shadcn/ui 컴포넌트를 추가할 수 있나요?
네. components.json 구성이 shadcn/ui CLI용으로 설정되어 있습니다. 'pnpm dlx shadcn-ui@latest add <component>'를 실행하여 프로젝트에 더 많은 컴포넌트를 추가하세요.
이 스킬이 Claude Code 워크스페이스 모드와 작동하나요?
네. 스크립트는 현재 프로젝트 디렉토리 내에서 작동합니다. Claude Code를 사용할 때 package.json이 있는 아티팩트 프로젝트 루트에서 명령을 실행하세요.
기본 shadcn 색상之外에서 Tailwind 테마를 사용자 정의하려면 어떻게 해야 하나요?
tailwind.config.js를 편집하여 사용자 정의 색상, 글꼴을 추가하거나 테마를 확장하세요. 구성은 수정하거나 확장할 수 있는 shadcn CSS 변수로 사전 구성되어 있습니다.

개발자 세부 정보

작성자

ZhanlinCui

라이선스

Complete terms in LICENSE.txt

리포지토리

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder

참조

main

파일 구조

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md