artifacts-builder
使用 React 和 shadcn/ui 建構複雜的 HTML 工件
也可從以下取得: Cam10001110101,DYAI2025,davila7,ComposioHQ
為 Claude 對話建立精緻的 HTML 工件需要複雜的工具鏈。此技能提供完整的開發工作流程，透過 React、Vite 與 shadcn/ui 元件來建置、打包並分享專業級工件。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「artifacts-builder」。 Create a new project called 'calculator' with React and shadcn/ui
預期結果:
- Initialized React + Vite project: calculator
- Installed Tailwind CSS 3.4.1 with shadcn/ui theming
- Configured path aliases (@/) in tsconfig.json
- Installed 40+ shadcn/ui components
- Setup complete! Run: cd calculator && pnpm dev
正在使用「artifacts-builder」。 Bundle the current React app into a single HTML file
預期結果:
- Installing bundling dependencies: parcel, html-inline
- Building with Parcel (no source maps)
- Inlining all assets into single HTML file
- Bundle complete! Output: bundle.html (1.2MB)
- Ready to share as a Claude artifact
安全審計
低風險Standard development tooling for building React-based artifacts. All static findings are false positives: LICENSE.txt was misidentified (license URLs flagged as 'network', legal text as 'weak crypto'), CSS hsl() colors flagged as 'weak crypto', and documentation text flagged as 'system reconnaissance'. The scripts perform legitimate project initialization, dependency installation from npmjs.com, and file modifications for project configuration. No data exfiltration, no malicious behavior, and all capabilities align with the stated purpose.
風險因素
⚙️ 外部命令 (7)
📁 檔案系統存取 (3)
🌐 網路存取 (1)
品質評分
你能建構什麼
專業 UI 元件
使用 React 狀態管理與 shadcn/ui 元件建立互動式儀表板與資料視覺化
複雜工件示範
建立具路由、表單與精緻 UI 的多頁工件，用於展示 AI 能力
互動式文件
開發具導覽、摺疊面板與動態內容展示的文件網站
試試這些提示
Use the artifacts-builder skill to create a new project called 'my-dashboard' with React, TypeScript, and shadcn/ui components
Use artifacts-builder to bundle the current React app into a single HTML file called 'bundle.html'
Initialize a new artifact project named 'data-explorer', then create a dashboard with cards, charts, and interactive tables using shadcn/ui components, and bundle it for Claude
Use artifacts-builder to build the React project in the current directory and output a self-contained HTML artifact
最佳實務
- 以具描述性的名稱初始化專案，清楚表達工件用途
- 使用 shadcn/ui 元件以維持視覺一致性
- 在開發完成後再打包工件，以降低延遲
- 在分享到對話前先於瀏覽器測試工件
避免
- 避免過度置中版面與紫色漸層（AI slop）
- 不要使用 Inter 字體搭配預設樣式
- 避免所有元素統一使用圓角
- 不要將未完成的工件連同開發相依性一起打包