artifacts-builder
React와 shadcn/ui로 복잡한 HTML 아티팩트 빌드
也可从以下获取: davila7,DYAI2025,Cam10001110101,ComposioHQ
Claude 대화를 위한 정교한 HTML 아티팩트를 만들려면 복잡한 도구가 필요합니다. 이 스킬은 React, Vite, shadcn/ui 컴포넌트를 사용하여 전문가 수준의 아티팩트를 빌드, 번들링 및 공유할 수 있는 완전한 개발 워크플로우를 제공합니다.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“artifacts-builder”。 Create a new project called 'calculator' with React and shadcn/ui
预期结果:
- Initialized React + Vite project: calculator
- Installed Tailwind CSS 3.4.1 with shadcn/ui theming
- Configured path aliases (@/) in tsconfig.json
- Installed 40+ shadcn/ui components
- Setup complete! Run: cd calculator && pnpm dev
正在使用“artifacts-builder”。 Bundle the current React app into a single HTML file
预期结果:
- Installing bundling dependencies: parcel, html-inline
- Building with Parcel (no source maps)
- Inlining all assets into single HTML file
- Bundle complete! Output: bundle.html (1.2MB)
- Ready to share as a Claude artifact
安全审计
低风险Standard development tooling for building React-based artifacts. All static findings are false positives: LICENSE.txt was misidentified (license URLs flagged as 'network', legal text as 'weak crypto'), CSS hsl() colors flagged as 'weak crypto', and documentation text flagged as 'system reconnaissance'. The scripts perform legitimate project initialization, dependency installation from npmjs.com, and file modifications for project configuration. No data exfiltration, no malicious behavior, and all capabilities align with the stated purpose.
风险因素
⚙️ 外部命令 (7)
📁 文件系统访问 (3)
🌐 网络访问 (1)
质量评分
你能构建什么
전문적인 UI 컴포넌트
React 상태 관리와 shadcn/ui 컴포넌트를 사용하여 인터랙티브 대시보드 및 데이터 시각화 빌드
복잡한 아티팩트 데모
AI 기능 시연을 위한 라우팅, 폼, 세련된 UI가 포함된 다중 페이지 아티팩트 생성
인터랙티브 문서
내비게이션, 아코디언, 동적 콘텐츠 표시 기능이 있는 문서 사이트 개발
试试这些提示
Use the artifacts-builder skill to create a new project called 'my-dashboard' with React, TypeScript, and shadcn/ui components
Use artifacts-builder to bundle the current React app into a single HTML file called 'bundle.html'
Initialize a new artifact project named 'data-explorer', then create a dashboard with cards, charts, and interactive tables using shadcn/ui components, and bundle it for Claude
Use artifacts-builder to build the React project in the current directory and output a self-contained HTML artifact
最佳实践
- 아티팩트 목적을 나타내는 설명적인 이름으로 프로젝트 초기화
- 시각적 일관성을 유지하기 위해 shadcn/ui 컴포넌트 사용
- 지연 시간을 줄이기 위해 개발이 완료된 후에만 아티팩트 번들링
- 대화에서 공유하기 전에 브라우저에서 아티팩트 테스트
避免
- 과도한 중앙 정렬 레이아웃과 보라색 그라데이션 사용 피하기 (AI slop)
- 기본 스타일로 Inter 폰트 사용하지 않기
- 모든 요소에 균일한 모서리 둥글기 사용 피하기
- 개발 종속성이 포함된 불완전한 아티팩트 번들링하지 않기