Claude.ai için React, Tailwind CSS ve shadcn/ui gibi modern frontend teknolojileri kullanarak karmaşık, çok bileşenli HTML artifact'ları oluşturmaya yönelik bir araç seti. State management, routing veya shadcn/ui bileşenleri gerektiren karmaşık artifact'lar için kullanılır; basit tek dosyalı HTML/JSX artifact'ları için değil.
cd ~/.claude/skills
git clone https://github.com/smartnews/claude-skills.git claude-skillsmkdir -p ~/.claude/skills/artifacts-builder
curl -fsSL https://raw.githubusercontent.com/smartnews/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İ: Sıklıkla "AI slop" olarak adlandırılan şeyden kaçınmak için, aşırı ortalanmış layoutlar, mor degradeler, uniform köşe yuvarlamaları ve Inter font kullanmaktan kaçının.
Yeni bir React projesi oluşturmak için initialization script'ini çalıştırın:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
Bu, aşağıdakilerle tam olarak 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ı içinde sahip olan bundle.html dosyasını oluşturur. Bu dosya doğrudan Claude sohbetlerinde artifact olarak paylaşılabilir.
Gereksinimler: Projenizin kök dizininde bir index.html dosyası olması gerekir.
Script ne yapar:
.parcelrc config'i oluştururSon olarak, paketlenmiş HTML dosyasını sohbette kullanıcı ile paylaşın ve artifact olarak görüntülemesini sağlayın.
Not: Bu tamamen isteğe bağlı bir adımdır. Yalnızca gerekli olduğunda veya istendiğinde gerçekleştirin.
Artifact'ı test etmek/görselleştirmek için mevcut araçları (diğer Skills veya Playwright ya da Puppeteer gibi yerleşik araçlar dahil) kullanın. Genel olarak, artifact'ı önceden test etmekten kaçının çünkü bu, istek ile bitmiş artifact'ın görülebileceği zaman arasında gecikme ekler. Gerekli ise veya sorun 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.