工程交付 · 技能模板

ArtifactsBuilderSkill

复用官方 artifacts-builder 工具链，一键初始化 React + Tailwind + shadcn/ui 项目，并通过打包脚本生成可在 Claude 会话中直接展示的单文件 Artifact。

工作流步骤

运行 `scripts/init-artifact.sh` 创建 Vite + TypeScript + Tailwind 项目。
在生成的仓库内开发组件，支持 40+ shadcn/ui 模块。
执行 `scripts/bundle-artifact.sh`，输出内联资源的 `bundle.html`。

核心文件

scripts/init-artifact.sh —— 初始化项目并安装依赖。
scripts/bundle-artifact.sh —— 调用 Parcel + html-inline 生成单文件。
scripts/shadcn-components.tar.gz —— 预打包的组件库模板。

Skill 配置速览

---
name: artifacts-builder
description: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts.
workflow:
  - 初始化仓库 init-artifact.sh
  - 编辑组件，遵循 "Avoid AI slop" 风格指南
  - 使用 bundle-artifact.sh 打包单文件
stack:
  - React 18 + TypeScript + Vite
  - Tailwind CSS + shadcn/ui
  - Parcel + html-inline for bundling

命令示例

bash scripts/init-artifact.sh dashboard-prototype
cd dashboard-prototype
npm run dev
# 迭代完成后
bash ../scripts/bundle-artifact.sh
open dist/bundle.html

将 `bundle.html` 上传到 Claude 会话，即可展示带状态管理、路由或复杂交互的产物。若需融入现有组件库，可在初始化后追加 `npx shadcn@latest add` 命令并更新 `tailwind.config.js`。