claude.ai için React, Tailwind CSS ve shadcn/ui gibi modern frontend teknolojilerini kullanarak karmaşık, çok bileşenli HTML artifact'ları oluşturmak için tasarlanmış araç seti. State management, routing veya shadcn/ui bileşenleri gerektiren kompleks artifact'lar için kullanın - basit tek dosyalı HTML/JSX artifact'ları için değil.
cd ~/.claude/skills
git clone https://github.com/ComposioHQ/awesome-claude-skills.git awesome-claude-skillsmkdir -p ~/.claude/skills/artifacts-builder
curl -fsSL https://raw.githubusercontent.com/ComposioHQ/awesome-claude-skills/HEAD/artifacts-builder/SKILL.md \
-o ~/.claude/skills/artifacts-builder/SKILL.mdGüçlü frontend claude.ai artifact'ları oluşturmak için şu adımları izleyin:
scripts/init-artifact.sh kullanarak frontend repo'sunu initialize edinscripts/bundle-artifact.sh kullanarak tek bir HTML dosyasına paketleyinStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
ÇOK ÖNEMLİ: Genellikle "AI slop" olarak adlandırılan şeyden kaçınmak için, aşırı ortalanmış layoutlar, mor gradientler, tekdüze yuvarlatılmış köşeler ve Inter fontunu kullanmaktan kaçının.
Yeni bir React projesi oluşturmak için initialization scriptini çalıştırın:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
Bu, şu özelliklere sahip tam yapılandırılmış bir proje oluşturur:
@/) yapılandırılmışArtifact'ı oluşturmak için oluşturulan dosyaları düzenleyin. Rehberlik için aşağıda Yaygın Geliştirme Görevleri'ne bakın.
React uygulamasını tek bir HTML artifact'ına paketlemek için:
bash scripts/bundle-artifact.sh
Bu, tüm JavaScript, CSS ve bağımlılıkları içinde barındıran kendi kendine yeterli bir artifact olan bundle.html dosyası oluşturur. Bu dosya doğrudan Claude sohbetlerinde bir artifact olarak paylaşılabilir.
Gereksinimler: Projenizin kök dizininde bir index.html dosyası olması gerekir.
Script'in yaptıkları:
.parcelrc config'i oluştururSon olarak, paketlenmiş HTML dosyasını sohbette kullanıcı ile paylaşın, böylece artifact olarak görüntüleyebilsinler.
Not: Bu tamamen opsiyonel bir adımdır. Yalnızca gerekli veya istenirse gerçekleştirin.
Artifact'ı test etmek/görselleştirmek için mevcut araçları kullanın (diğer Skills'ler veya Playwright veya Puppeteer gibi yerleşik araçlar dahil). Genel olarak, istek ile bitmiş artifact'ın görülebilmesi arasında gecikme eklemediği için artifact'ı önceden test etmekten kaçının. Gerekirse veya sorunlar ortaya çıkarsa, artifact'ı sunduktan sonra test edin.
Herhangi bir yaratıcı çalışmaya başlamadan önce bunu mutlaka kullanın - feature oluştururken, component inşa ederken, functionality eklerken veya davranış değiştirirken. Kullanıcı niyetini, gereksinimleri ve tasarımı implementation öncesinde araştırır.
Uygulama tamamlandığında, tüm testler geçtiğinde ve çalışmanızı nasıl entegre edeceğinize karar vermeniz gerektiğinde kullanın - merge, PR veya cleanup seçeneklerini sunarak geliştirme sürecinin tamamlanmasını rehberlik eder.
Kod incelemesi geri bildirimi alırken, önerileri uygulamadan önce kullanın; özellikle geri bildirim belirsiz veya teknik olarak şüpheli görünüyorsa - performatif anlaşmadan veya körü körüne uygulamadan ziyade teknik titizlik ve doğrulama gerekir.
Görevleri tamamlarken, büyük özellikleri hayata geçirirken veya merge etmeden önce çalışmanın gereksinimleri karşıladığını doğrulamak için kullanın.
Yeni bir feature üzerinde çalışmaya başlarken veya implementasyon planını yürütmeden önce kullanın - native araçlar veya git worktree fallback aracılığıyla izole edilmiş bir workspace sağlar.
Herhangi bir konuşma başlatırken kullanın - skill'lerin nasıl bulunacağını ve kullanılacağını belirler, clarification soruları da dahil olmak üzere HERHANGİ bir yanıt vermeden önce skill invocation gerektirir.