Artifacts Builder
Build complex claude.ai HTML artifacts using React, Tailwind CSS, and shadcn/ui components
16,112 스타
1,415 포크
2,100 다운로드
claude-skill install artifacts-builder무엇인가요?
A comprehensive suite of tools for creating sophisticated, multi-component Claude.ai HTML artifacts using modern frontend technologies including React 18, TypeScript, Vite, Tailwind CSS, and shadcn/ui. Designed for complex artifacts requiring state management, routing, or UI component libraries.
사용 방법
Follow the 4-step process: (1) Initialize with init-artifact.sh script to scaffold a React project, (2) Develop your artifact by editing the generated code files, (3) Bundle with bundle-artifact.sh to compile into a single HTML file, (4) Share the bundled HTML artifact in Claude conversations.
주요 기능
- Pre-configured React + TypeScript environment
- 40+ shadcn/ui components pre-installed
- Tailwind CSS 3.4.1 with theming support
- Path aliases (@/) for cleaner imports
- Parcel bundler with automatic asset inlining
- Single-file HTML output for easy sharing
- Node 18+ compatible
- Optional Playwright testing support
관련 스킬
Algorithmic Art
Create generative art using p5.js with seeded randomness, flow fields, and particle systems
MCP Builder
Comprehensive guide for creating high-quality MCP servers to integrate external APIs and services
Web App Testing
Test local web applications using Playwright for UI verification, debugging, and automated testing