Skill 多語言閱讀指南
web-artifacts-builder用途、用法與原始來源
一套用於使用現代前端 Web 技術（React、Tailwind CSS 等）創建複雜的多組件 claude.ai HTML 工件的工具。shadcn/ui）。用於需要狀態管理、路由或shadcn/ui元件－不適用於簡單的單一文件HTML/JSX人工製品。
原文擷取時間:
- 來源儲存庫
- anthropics/skills
- SKILL.md
skills/web-artifacts-builder/SKILL.md- 儲存庫 Star
- 185,373
- 儲存庫最近更新
- 2026-10-29
- 能力分類
- 開發
- 最近採集時間
授權：授權檔案待核驗
流程片段用來協助閱讀上游說明。本頁沒有執行第三方 Skill，不屬於實測評測。
下面的用途與操作片段來自上游文件，由本站整理並翻譯，和另行標示的 Codez 編輯分析分開呈現。
這個 Skill 能做什麼
一套用於使用現代前端 Web 技術（React、Tailwind CSS 等）創建複雜的多組件 claude.ai HTML 工件的工具。shadcn/ui）。用於需要狀態管理、路由或shadcn/ui元件－不適用於簡單的單一文件HTML/JSX人工製品。
如何使用：上游操作流程
步1初始化專案
執行初始化腳本以建立新的 React 專案：這將建立一個配置完整的項目，其中包含：✅ React + TypeScript（透過 Vite）✅ Tailwind CSS3.4。1和shadcn/ui主題系統
原文片段 · L24 ↗步3將文件打包成單一 HTML 文件
要將 React 應用程式打包成單一 HTML 檔案：這將創建bundle.html- 一個包含所有 JavaScript、CSS 和相依性的獨立工件。此文件可直接作為工件在 Claude 對話中共用。要求：您的項目必須包含一個index.html在根目錄中。該腳本的功能如下：
bash scripts/init-artifact.sh <project-name>
cd <project-name>環境與相依需求
本次未從該檔案選出獨立的環境需求片段，不代表無須相依套件。請繼續核對儲存庫的安裝說明和引用檔案。
限制與結果檢查
本次未從該檔案選出獨立的限制片段，不代表適用於所有輸入或環境。請閱讀完整原文，並自行驗證實際結果。
開始使用前
- 先核對支援的 Agent 宿主和儲存庫安裝說明。保留完整 Skill 目錄及其引用的腳本、資源和文件，只複製 SKILL.md 可能遺漏相依需求。
- 向 Agent 提供實際輸入、預期輸出和驗收標準。呼叫方式與可用工具取決於宿主環境，本站不假定存在通用的安裝指令。
- 先在暫存專案或輸入副本上試用。涉及修改檔案、遠端服務或計費資源的操作，應逐項核對後再授權。
- 依照原文檢查項目和自己的需求驗證輸出。成功觸發或儲存庫 Star 較高，都不能證明結果正確。
繼續閱讀原始文件
相關 Skill
翻譯與介紹範圍
本頁從固定版本的上游 SKILL.md 整理用途與操作片段，譯文使用輔助翻譯。它不是完整手冊，也不代表經過相容性實測；使用前請核對原文及其引用檔案。
介紹依據下方列出的固定版本；目前儲存庫動態和目錄擷取時間分開呈現。
- 固定版本來源
- 閱讀原文 ↗
- 原文擷取時間
- 來源提交版本
ca45fc496a3436251f191354091d557da31c15b5- 原文 SHA-256
81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8