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 karmaşık 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/anthropics/skills.git skillsmkdir -p ~/.claude/skills/web-artifacts-builder
curl -fsSL https://raw.githubusercontent.com/anthropics/skills/HEAD/skills/web-artifacts-builder/SKILL.md \
-o ~/.claude/skills/web-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 başlatınscripts/bundle-artifact.sh kullanarak tüm kodu tek bir HTML dosyasında paketleyinStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
ÇOK ÖNEMLİ: Genellikle "AI slop" olarak adlandırılan şeylerden kaçınmak için, aşırı ortalanmış düzenler, mor gradyanlar, düzgün köşeler ve Inter fontundan kaçının.
Yeni bir React projesi oluşturmak için başlatma scriptini çalıştırın:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
Bu, tamamen 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ğıdaki Yaygın Geliştirme Görevlerine 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ı satır içine yerleştirilmiş kendi kendine yeterli bir artifact olan bundle.html oluşturur. Bu dosya doğrudan Claude konuşmalarında artifact olarak paylaşılabilir.
Gereksinimler: Projenizin kök dizininde bir index.html dosyası olması gerekir.
Script'in yaptığı şeyler:
.parcelrc config'i oluştururSon olarak, paketlenmiş HTML dosyasını konuşmada kullanıcıyla paylaşın böylece onu artifact olarak görüntüleyebilsin.
Not: Bu tamamen isteğe bağlı bir adımdır. Yalnızca gerekli olursa veya istenirse gerçekleştirin.
Artifact'ı test etmek/görselleştirmek için mevcut araçları kullanın (diğer Skills veya Playwright veya Puppeteer gibi yerleşik araçlar dahil). Genel olarak, istek ile bitmiş artifact'ın görülebilmesi arasındaki gecikmeyi artırdığı için artifact'ı baştan itibaren test etmekten kaçının. Gerekirse veya sorunlar ortaya çıkarsa artifact'ı sunulduktan 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.