mcpField
W
web-artifacts-builder

web-artifacts-builder

github.com/sickn33开发48.7k554 次安装1 天前更新
代码仓库

关于 web-artifacts-builder

web-artifacts-builder 是用于制作 Claude 对话前端产物的技能。它可初始化 React/TypeScript 项目，指导开发并将结果打包为 HTML 文件以供分享。

主要功能

  1. 01初始化 React/TypeScript 项目
  2. 02使用 Tailwind 和 shadcn 风格组件
  3. 03将资源打包到单个 HTML 文件
  4. 04可选测试生成的产物

适用场景

  1. 01为 Claude 对话制作前端产物
  2. 02将 React 界面打包为可分享的 HTML 文件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sickn33/agentic-awesome-skills --skill web-artifacts-builder

安装后在 Claude Code 中输入/web-artifacts-builder确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
scripts/
bundle-artifact.sh
init-artifact.sh

详细介绍

Web Artifacts 构建器

按照以下步骤构建功能强大的前端 claude.ai artifacts：

  1. 使用 scripts/init-artifact.sh 初始化前端仓库
  2. 编辑生成的代码来开发你的 artifact
  3. 使用 scripts/bundle-artifact.sh 将所有代码打包到单个 HTML 文件中
  4. 向用户展示 artifact 5.（可选）测试 artifact

技术栈：根据版本选择的 React/TypeScript/Vite 脚手架，搭配 Parcel、Tailwind 3.x 和打包在项目中的 shadcn 风格组件快照。快照与依赖项版本混用时，必须验证构建结果。

目录修改说明：修复了初始化路径和版本处理逻辑，保留了现有输出，并添加了针对打包组件快照的明确检查。Apache-2.0 许可证文本已保留。此目录中的归档文件没有逐文件的上游声明或固定来源，因此其完整来源和许可证兼容性尚未确定，请勿声称已完成全面的第三方许可证审查。

从已安装的 skill 目录中解析脚本，并在临时输出父目录中运行初始化。安装和构建命令会获取软件包，也可能运行生命周期脚本；请检查所选版本并保留锁文件。请提供经过明确审查的 CREATE_VITE_VERSION，以及兼容且受支持的 Node/pnpm 工具链。切勿在客户端打包文件中嵌入凭据或私密数据；即使是自包含 HTML，也会执行 JavaScript，并可能请求外部资源。

设计与样式指南

非常重要：为避免常被称为“AI 垃圾”的设计，请避免过度使用居中布局、紫色渐变、统一的圆角和 Inter 字体。

快速开始

步骤 1：初始化项目

运行初始化脚本以创建新的 React 项目：

CREATE_VITE_VERSION=<reviewed-version> bash "$SKILL_DIR/scripts/init-artifact.sh" <project-name>
cd <project-name>

这将创建一个配置完整的项目，其中包含：

  • ✅ React + TypeScript（通过 Vite）
  • ✅ 带有 shadcn/ui 主题系统的 Tailwind CSS 3.4.1
  • ✅ 已配置路径别名（@/）
  • ✅ 预装 40 多个 shadcn/ui 组件
  • ✅ 包含所有 Radix UI 依赖项
  • ✅ 已配置 Parcel 以进行打包（通过 .parcelrc）
  • 需要与明确选定的脚手架兼容且受支持的 Node 工具链；不能笼统地认为与 Node 18 兼容
步骤 2：开发你的 Artifact

要构建 artifact，请编辑生成的文件。请参阅下文的常见开发任务以获取指引。

步骤 3：打包为单个 HTML 文件

要将 React 应用打包为单个 HTML artifact：

bash "$SKILL_DIR/scripts/bundle-artifact.sh"

这会创建 bundle.html，其中内联了可打包的 JavaScript/CSS/资源。在称其为自包含或可离线使用之前，请检查动态 URL、字体、图片、worker 分块和运行时请求。此文件可以直接作为 artifact 分享到 Claude 对话中。

要求：项目根目录中必须有一个 index.html。

脚本的功能：

  • 安装打包依赖项（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline）
  • 创建支持路径别名的 .parcelrc 配置
  • 使用 Parcel 构建（不生成源映射）
  • 使用 html-inline 将所有资源内联到单个 HTML 文件中
步骤 4：与用户分享 Artifact

最后，在对话中与用户分享打包后的 HTML 文件，让他们可以将其作为 artifact 查看。

第 5 步：测试／查看产物（可选）

运行生成项目的类型检查／构建检查，并在描述其可用之前进行有代表性的浏览器检查。验证主要交互、键盘／焦点行为、响应式布局以及最终打包文件（而不仅是在 Vite 开发模式下）。如果某项检查无法运行，在分享产物时说明这一限制。发布或上传到外部平台需要获得相应授权。

打包快照注意事项：日历样式包含较新的 Tailwind 语法，可能无法与 Tailwind 3.4.1 配合使用；可调整面板 API 对版本较为敏感；初始化程序会修补缺失的 Progress 值传递问题和 Menubar 的 displayName 拼写错误。表单辅助工具需要组合使用 FormProvider/FormField/FormItem，且对话框／命令对话框需要设置无障碍标题和描述。这些只是起始组件，并非经过无障碍认证的组件套件。

参考

适用场景

当任务与上述概述中描述的工作流或操作明确匹配时，可使用此技能。

限制

  • 仅当任务明确符合上述范围时，才使用此技能。
  • 不要将输出视为特定环境验证、测试或专家审核的替代品。
  • 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。

评论

支持 Markdown