83.3K+İndir
Kullanım kılavuzuna geç
web-artifacts-builderyazan Anthropic

Web Artifacts Builder Skill.

Claude Code ve Codex için bir UI tasarım skill'i: React, Tailwind ve shadcn/ui ile çok bileşenli interaktif HTML artifact'ler.

  • Web & UI
  • HTML
OpenDesign İndirKullanım kılavuzunu görüntüle
anthropics/skills · skills/web-artifacts-builder/SKILL.mdSKILL.md
--- name: web-artifacts-builder description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. --- ## Design & Style Guidelines ## Quick Start
Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okundu · Tam hali 3.073 karakter

01 Ne yapar

web-artifacts-builder Skill'in Claude Code ve Codex İçinde Yaptığı İşlemler

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

React 18, TypeScript, Vite, Parcel, Tailwind CSS ve shadcn/ui'den oluşan modern bir yığın kullanarak claude.ai için karmaşık, çok bileşenli React artifact'ları oluşturmaya yönelik bir skill. Skill, 40'tan fazla önceden yüklenmiş shadcn/ui bileşeniyle tam yapılandırılmış bir proje kuran başlatma betikleri ve her şeyi tek bir bağımsız HTML dosyasına derleyen paketleme betikleri sağlar.

Durum yönetimi, routing veya shadcn/ui bileşenleri gerektiren artifact'lar için tasarlanmıştır; basit tek dosyalık HTML veya JSX artifact'lar için değildir. Workflow beş adımı takip eder: frontend deposunu başlatma, oluşturulan kodu düzenleyerek artifact'ı geliştirme, tek bir HTML dosyasına paketleme, kullanıcıya gösterme ve isteğe bağlı olarak test etme.

HTML
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Yapılandırılmış Bir React Projesini Başlatın

    React, TypeScript, Tailwind CSS, path alias'ları, 40'tan fazla shadcn/ui bileşeni ve Parcel paketleme yapılandırmasıyla tam yapılandırılmış bir proje oluşturmak için init-artifact.sh betiğini bir proje adıyla çalıştırın.

  2. 02
    Oluşturulan Dosyaları Düzenleyerek Geliştirin

    Skill'de sağlanan yaygın geliştirme görevleri kılavuzunu takip ederek, başlatma sırasında oluşturulan dosyaları düzenleyerek artifact'ı oluşturun.

  3. 03
    Bağımsız HTML'ye Paketleyin

    React uygulamasını, Parcel ve html-inline kullanılarak tüm JavaScript, CSS ve bağımlılıkların satır içine alındığı tek bir dosya olan bundle.html'ye derlemek için bundle-artifact.sh'yi çalıştırın.

  4. 04
    Artifact'ı Kullanıcıya Gösterin

    Kullanıcının bunu bir claude.ai artifact'ı olarak görebilmesi için paketlenmiş HTML dosyasını konuşmada paylaşın.

02 Uyumunuzu bulun

web-artifacts-builder Skill Ne Zaman Kullanılır

Bu tür kullanıcı arayüzü tasarımı için Claude Code veya Codex'te web-artifacts-builder skill'ini kullanın. Uygunluk ve sınırlar, skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • shadcn/ui bileşen kütüphanesini kullanan çok bileşenli arayüzler

Sınırları Bilin

  • Durum yönetimi, yönlendirme veya shadcn/ui bileşenleri gerektiren karmaşık artifact'ler için kullanın - basit tek dosyalı HTML/JSX artifact'leri için değil.

Ne Sağlamalısınız

  • Başlatma için proje adıinit-artifact.sh betiği çalıştırılırken yeni React proje dizini için bir ad.

03 Skill'in içinde

web-artifacts-builder Skill'in Claude Code ve Codex'e Verdiği Kurallar

Ajanın için SKILL.md dosyasının belirlediği 5 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Sadece Karmaşık Üretimler İçin Kullanın

    Bu skill özellikle durum yönetimi, yönlendirme (routing) veya shadcn/ui bileşenleri gerektiren karmaşık üretimler içindir. Basit, tek dosyalık HTML veya JSX üretimleri için kullanmayın.

  2. AI Slop Tasarım Kalıplarından Kaçının

    AI slop olarak adlandırılan durumdan kaçınmak için aşırı ortalanmış düzenler, mor gradyanlar, tek tip yuvarlatılmış köşeler veya Inter yazı tipi kullanmayın.

  3. Projenin Kök Dizininde index.html Olmalıdır

    Paketleme betiği, projenizin kök dizininde bir index.html dosyası bulunmasını gerektirir.

  4. Sadece Gerektiğinde Test Edin

    Test etme tamamen isteğe bağlıdır ve yalnızca gerekli olduğunda veya talep edildiğinde yapılmalıdır.

  5. Beş Adımlı İş Akışını Takip Edin

    Üretim oluşturma süreci belirli bir sırayı takip eder: frontend deposunu başlatma, oluşturulan kodu düzenleyerek geliştirme, tüm kodu tek bir HTML dosyasında paketleme, kullanıcıya gösterme ve isteğe bağlı olarak test etme.

04 İşe koyun

Claude Code veya Codex'e web-artifacts-builder Yükleme

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza web-artifacts-builder Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder

skills/web-artifacts-builder/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Build a task management dashboard artifact with a sidebar navigation, data table showing tasks with status filters, and a modal form for adding new tasks. Use shadcn/ui components for the table, dialog, and form elements. Include state management for the task list and filtering logic.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Talep edilirse veya sorun ortaya çıkarsa üretimi test etmek veya görselleştirmek için Playwright veya Puppeteer gibi mevcut araçları kullanın
  • Tasarımın aşırı ortalanmış düzenler, mor gradyanlar, tek tip yuvarlatılmış köşeler ve Inter yazı tipinden kaçındığını doğrulayın

OpenDesign'da web-artifacts-builder gömülüdür: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill dosyası
skills/web-artifacts-builder/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 34040c9
License
Apache-2.0 skills/web-artifacts-builder/LICENSE.txt dosyasından; SKILL.md "Tam koşullar LICENSE.txt içinde" diyor.
Repository yıldızları
176.183 GitHub anlık görüntüsü, bu katalogda 7 skill içeren anthropics/skills deposunun tamamı için 2026-09-14 tarihinde alındı. web-artifacts-builder için bir değerlendirme veya kullanım sayısı değil.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Tasarım ve Stil KurallarıAşırı ortalama, mor gradyanlar, tek tip yuvarlatılmış köşeler ve Inter yazı tipi gibi AI slop kalıplarından kaçınma talimatları
  2. Hızlı BaşlangıçBaşlatmadan geliştirmeye, paketlemeye, paylaşıma ve isteğe bağlı teste kadar beş adımlı iş akışı
  3. Adım 1: Projeyi BaşlatınTypeScript, Tailwind, shadcn/ui bileşenleri ve Parcel ile yapılandırılmış bir React projesi oluşturmak için init-artifact.sh'i çalıştırın
  4. Adım 2: Üretiminizi GeliştirinOrtak geliştirme görevleri kılavuzunu takip ederek üretimi oluşturmak için oluşturulan dosyaları düzenleyin
  5. Adım 3: Tek Bir HTML Dosyasında PaketleyinSatır içi JavaScript, CSS ve bağımlılıklara sahip kendi kendine yeten bir bundle.html oluşturmak için bundle-artifact.sh'i çalıştırın
  6. Adım 4: Üretimi Kullanıcıyla PaylaşınPaketlenmiş HTML dosyasını bir üretim olarak görüntülenmesi için konuşmada paylaşın
  7. Adım 5: Üretimi Test Etme/Görselleştirme (İsteğe Bağlı)Gecikmeyi azaltmak için ön test etmeden kaçınarak Playwright veya Puppeteer gibi araçlarla isteğe bağlı test
  8. Referansshadcn/ui bileşenleri dokümantasyonuna bağlantı
Skill'in Kendi Açıklaması
"Modern ön yüz web teknolojileri (React, Tailwind CSS, shadcn/ui) kullanarak ayrıntılı, çok bileşenli claude.ai HTML ürünleri oluşturmak için araç paketi. Durum yönetimi, yönlendirme veya shadcn/ui bileşenleri gerektiren karmaşık ürünler için kullanın - basit tek dosya HTML/JSX ürünleri için değil."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 3.073 karakter. Tam dosyayı GitHub'da okuyun.

06 Kurmadan önce

web-artifacts-builder Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Hangi bileşenler ve kütüphaneler zaten kurulu?

Başlatma betiği; React 18, Vite üzerinden TypeScript, shadcn/ui temalı Tailwind CSS 3.4.1, önceden kurulmuş 40'tan fazla shadcn/ui bileşeni, tüm Radix UI bağımlılıkları ve paketleme için yapılandırılmış Parcel içeren bir proje oluşturur. İçe aktarmaları at-slash önekiyle yapabilmeniz için path alias'ları yapılandırılmıştır.

Web Artifacts Builder

web-artifacts-builder'ı Gerçek Bir Kullanıcı Arayüzü Tasarım Görevinde Çalıştırın.

web-artifacts-builder skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills içinden skill'i seçin, yukarıdaki promptu yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/anthropics/skills --skill web-artifacts-builder