工件构建器

用于为 claude.ai 构建复杂的多组件 React 作品的综合工具包。它提供了完整的开发堆栈,包括 React 18、TypeScript、Vite、Tailwind CSS 和 40 多个预安装的 shadcn/ui 组件。此技能专为需要状态管理、路由或现代 UI 组件的精细前端应用程序设计,而非简单的单文件 HTML/JSX 作品。

开发工作流程包含三个主要步骤:

1. 初始化项目 - 运行 bash scripts/init-artifact.sh <project-name> 创建一个完全配置的 React + TypeScript 项目,所有依赖项都已预安装,包括 Tailwind CSS、shadcn/ui 主题和路径别名。

2. 开发您的作品 - 使用 React 组件、hooks 和 shadcn/ui 元素编辑生成的文件。项目预装了 40 多个来自 shadcn/ui 的组件(按钮、表单、对话框、表格等),可随时使用。

3. 打包为单个 HTML - 运行 bash scripts/bundle-artifact.sh 将所有内容打包成一个自包含的 HTML 文件,其中内联了所有 JavaScript、CSS 和依赖项。这将创建可直接作为 claude.ai 作品分享的 bundle.html。

打包的作品无需任何设置即可在 Claude 对话中立即运行。