artifacts-builder

anthropics/skills · Agent Skill

構建具有正確結構的互動式網頁工件：單頁應用程式、儀錶板和遊戲。

總覽

發布者	anthropics組織
儲存庫	anthropics/skills ↗
技能資料夾	`web-artifacts-builder`
星	176,064
附帶檔案	僅 SKILL.md
授權	未標示 — 請向作者確認
連結	技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性

低風險 · 未發現明顯風險 — 完整報告會顯示細節

相容性

僅含說明 — 適用於多數代理

相似技能

找到 144 個相似技能

訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理，在專案根目錄的終端機（macOS、Linux 或 Windows 的 Git Bash）執行指令。

把提示貼到 Claude、Codex 或其他助理：它會自行檢查並安裝技能。

Install the “artifacts-builder” skill from mozgi.io (https://mozgi.io/skills/artifacts-builder/) for me.

1. Take the skill folder from the source: https://github.com/anthropics/skills/tree/main/skills/web-artifacts-builder
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “artifacts-builder” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/artifacts-builder/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .claude/skills
cp -r /tmp/skills/skills/web-artifacts-builder .claude/skills/web-artifacts-builder

重新啟動 Claude Code — 技能就會出現在清單中，手動呼叫：/artifacts-builder。要套用到所有專案，請放在 ~/.claude/skills。

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .agents/skills
cp -r /tmp/skills/skills/web-artifacts-builder .agents/skills/web-artifacts-builder

Codex 會從目前資料夾往上到儲存庫根目錄，在 .agents/skills 中尋找技能；用 /skills 或 $artifacts-builder 呼叫。所有專案：~/.agents/skills。

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .cursor/skills
cp -r /tmp/skills/skills/web-artifacts-builder .cursor/skills/web-artifacts-builder

Cursor 啟動時會載入技能；在 Agent 聊天輸入「/」呼叫。Cursor 也會讀取 .claude/skills 與 .agents/skills。所有專案：~/.cursor/skills。

git clone --depth 1 --branch main https://github.com/anthropics/skills.git /tmp/skills
mkdir -p .gemini/skills
cp -r /tmp/skills/skills/web-artifacts-builder .gemini/skills/web-artifacts-builder

任務符合時，Gemini CLI 會提議啟用技能，由你確認。所有專案：~/.gemini/skills。

SKILL.md 內容

作者原文 · 唯讀

Web Artifacts Builder

To build powerful frontend claude.ai artifacts, follow these steps:

1. Initialize the frontend repo using scripts/init-artifact.sh

2. Develop your artifact by editing the generated code

3. Bundle all code into a single HTML file using scripts/bundle-artifact.sh

4. Display artifact to user

5. (Optional) Test the artifact

Stack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui

Design & Style Guidelines

VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.

Quick Start

Step 1: Initialize Project

Run the initialization script to create a new React project:

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

This creates a fully configured project with:

✅ React + TypeScript (via Vite)
✅ Tailwind CSS 3.4.1 with shadcn/ui theming system
✅ Path aliases (@/) configured
✅ 40+ shadcn/ui components pre-installed
✅ All Radix UI dependencies included
✅ Parcel configured for bundling (via .parcelrc)
✅ Node 18+ compatibility (auto-detects and pins Vite version)

Step 2: Develop Your Artifact

To build the artifact, edit the generated files. See Common Development Tasks below for guidance.

Step 3: Bundle to Single HTML File

To bundle the React app into a single HTML artifact:

bash scripts/bundle-artifact.sh

This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.

Requirements: Your project must have an index.html in the root directory.

What the script does:

Installs bundling dependencies (parcel, @parcel/config-default, parcel-resolver-tspaths, html-inline)
Creates .parcelrc config with path alias support
Builds with Parcel (no source maps)
Inlines all assets into single HTML using html-inline

Step 4: Share Artifact with User

Finally, share the bundled HTML file in conversation with the user so they can view it as an artifact.

Step 5: Testing/Visualizing the Artifact (Optional)

Note: This is a completely optional step. Only perform if necessary or requested.

To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.

Reference

shadcn/ui components: https://ui.shadcn.com/docs/components

常見問題

artifacts-builder 技能有什麼用途？

構建具有正確結構的互動式網頁工件：單頁應用程式、儀錶板和遊戲。

如何安裝 artifacts-builder？

打開本頁的「安裝」區塊並選擇你的代理 — Claude Code、Codex、Cursor 或 Gemini CLI：那裡有把技能資料夾複製到正確位置的現成指令。也可以複製「透過助理」分頁中的提示，讓助理自行檢查並安裝技能。

artifacts-builder 適用哪些 AI 模型？

技能是純 Markdown 指示（Agent Skills 格式），因此 artifacts-builder 適用任何讀取 SKILL.md 的代理：Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時，模型才會載入指示。

artifacts-builder 是免費的嗎？

此技能由 anthropics 公開發布。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。儲存庫未標示授權 — 商業使用前請向作者確認條款。

安裝技能安全嗎？

技能是代理會遵循的指示，安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作，不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同？

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程：如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

總覽