Panduan membaca yang dilokalisasi

web-artifacts-builderTujuan, penggunaan, dan sumber

Serangkaian alat untuk membuat artefak HTML claude.ai yang rumit dan multi-komponen menggunakan teknologi web frontend modern (React, Tailwind CSS,shadcn/ui). Gunakan untuk artefak kompleks yang membutuhkan manajemen status, perutean, ataushadcn/uikomponen - bukan untuk file tunggal sederhanaHTML/JSXartefak.

Sumber diambil: 2026-10-29

Repositori sumber: anthropics/skills
SKILL.md: skills/web-artifacts-builder/SKILL.md
Bintang Repositori: 185,373
Pembaruan terakhir repositori: 2026-10-29
Klasifikasi Kemampuan: Pengembangan
Waktu pengumpulan terbaru: 2026-10-31 10:38 UTC+08:00

Lisensi: File lisensi perlu diverifikasi

SKILL.md asli

Cuplikan alur kerja adalah alat bantu baca, bukan instruksi yang dapat dieksekusi dari Codez. Tidak ada Skill pihak ketiga yang dijalankan untuk menghasilkan halaman ini.

Bagian yang menjelaskan tujuan dan alur kerja di bawah ini merupakan materi dari hulu, yang telah diorganisir dan diterjemahkan untuk dibaca. Bagian ini berbeda dari analisis editorial Codez yang diberi label secara terpisah.

Apa yang dilakukan oleh Skill ini?

Bagaimana alur kerja hulu bekerja

Melangkah1: Inisialisasi Proyek

Jalankan skrip inisialisasi untuk membuat proyek React baru: Ini akan membuat proyek yang sepenuhnya terkonfigurasi dengan: ✅ React + TypeScript (melalui Vite) ✅ Tailwind CSS3.4.1denganshadcn/uisistem tema

Jalur hulu · L24 ↗

Melangkah2Kembangkan Artefak Anda

Untuk membuat artefak, edit file yang dihasilkan. Lihat Tugas Pengembangan Umum di bawah ini untuk panduan.

Jalur hulu · L41 ↗

Melangkah3: Gabungkan ke dalam Satu File HTML

Untuk menggabungkan aplikasi React ke dalam satu artefak HTML tunggal: Ini akan menghasilkanbundle.html- Sebuah artefak mandiri dengan semua JavaScript, CSS, dan dependensi yang sudah terintegrasi. File ini dapat langsung dibagikan dalam percakapan Claude sebagai artefak. Persyaratan: Proyek Anda harus memilikiindex.htmldi direktori root. Apa yang dilakukan skrip ini:

Jalur hulu · L45 ↗

Jalur hulu · bash ↗

bash scripts/init-artifact.sh <project-name>
cd <project-name>

Persyaratan dan pengaturan

Tidak ada bagian persyaratan singkat yang dipilih dari file ini. Ini tidak berarti Skill tersebut tidak memiliki dependensi. Periksa petunjuk pengaturan repositori dan file yang dirujuk.

Batasan dan pemeriksaan kualitas

Tidak ada bagian batasan terpisah yang dipilih dari file ini. Ini tidak berarti Keterampilan ini aman untuk setiap input atau lingkungan. Tinjau sumber lengkapnya dan validasi hasil Anda sendiri.

Mulailah dengan uji coba yang aman.

Periksa host yang didukung dan petunjuk instalasi repositori. Simpan direktori Skill beserta skrip, aset, dan dokumentasi yang dirujuk di dalamnya secara bersamaan;SKILL.mdsendirian dapat menghilangkan dependensi.
Berikan input sebenarnya, output yang diinginkan, dan kriteria penerimaan kepada agen. Sintaks pemanggilan dan alat yang tersedia bergantung pada host; situs ini tidak mengasumsikan perintah instalasi universal.
Cobalah alur kerja sumber dalam proyek sementara atau pada salinannya. Tinjau operasi yang mengubah file, layanan jarak jauh, atau sumber daya yang dapat ditagih sebelum mengizinkannya.
Validasi output terhadap pemeriksaan kualitas sumber dan persyaratan Anda sendiri. Pemicu yang berhasil atau jumlah bintang repositori yang tinggi tidak menjamin hasil yang benar.

Spesifikasi format dan direktori keterampilan ↗

Baca selengkapnya di sumber aslinya.

Terjemahan dan ruang lingkup

Panduan membaca ini memilih bagian-bagian dari teks yang telah disematkan di bagian atas.SKILL.mdTerjemahan ini dibantu. Ini bukan manual lengkap atau klaim kompatibilitas yang telah diuji. Bacalah dokumen asli dan file referensinya sebelum digunakan.

Pendahuluan ini mengacu pada versi yang disematkan di bawah ini; aktivitas repositori saat ini dan waktu pengumpulan ditampilkan secara terpisah.

Sumber yang disematkan: Baca teks aslinya ↗
Sumber diambil: 2026-10-29T09:32:23Z
Komit sumber: ca45fc496a3436251f191354091d557da31c15b5
Sumber SHA-256: 81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8

Kembali ke katalog Keterampilan lengkap