Artifacts Builder — 多组件前端 Artifact 构建套件
用 React、Tailwind CSS 和 shadcn/ui 快速搭建并打包复杂的 claude.ai HTML artifact，一键生成单文件可分享成品。
两个脚本行为透明：init 脚本在工作目录创建项目、安装 pnpm 及 npm 依赖，bundle 脚本仅读取项目并输出 bundle.html，无敏感数据读取、隐蔽外传或破坏性默认操作；已扣分项：无用户确认门槛（init 会静默全局安装 pnpm）、依赖从 npm 实时拉取未锁定完整性、无回滚说明。
脚本内部自洽：Node 版本检测与 Vite 固定版本、OS 相关 sed 处理、package./index.html 前置检查与清晰错误消息都做得较好；扣分项：create-vite 用 latest 未固定、依赖需联网安装、无针对该 skill 关键路径的测试，失败模式未验证。
description 明确了适用（复杂多组件 artifact）与不适用（简单单文件 HTML/JSX）边界，触发条件较清晰；扣分项：强绑定 claude.ai artifact 用途、文档仅英文、核心流程完全依赖 npm 生态联网下载，未说明离线或网络受限环境（含中国大陆 npm 源）下的可用性。
结构清晰、渐进式步骤说明合理、包含设计风格提示与外部参考；扣分项：frontmatter 称许可条款见 LICENSE.txt 但该文件未在证据中出现，skill 无独立版本/变更记录，正文引用 'Common Development Tasks' 一节实际缺失，维护责任未对 skill 单独声明。
声称可生成自包含单文件 HTML artifact，脚本逻辑与该目标一致，边际价值在于免去手工搭建 React+shadcn 工程的成本；扣分项：静态审查无法验证产物可直接使用，'40+ 组件预装' 依赖 tarball 完整性，效果无执行证据。
脚本是可审计的一手材料，错误处理逻辑可读；扣分项：无 CI 或测试覆盖该 skill 关键路径，shadcn-components.tar.gz 内容不可从提供文件核实，关键声明（组件数量、Node 兼容性）仅作者自述。
- 初始化脚本会静默全局安装 pnpm 并从 npm 实时拉取未锁定版本的依赖，运行前请确认可接受此改动。
- SKILL.md 引用的 'Common Development Tasks' 章节缺失，frontmatter 指向的 LICENSE.txt 未见，使用前请核对仓库完整性。
- 核心流程完全依赖 npm 生态联网下载，网络受限环境（含中国大陆）可能不可用，建议配置镜像源。
- 本评估为静态源码审查，未执行脚本，产物可用性与失败模式未经实测验证。
- shadcn-components.tar.gz 为二进制打包内容，无法从源码核实其组件数量与内容，建议使用前解包检查。
这个 Skill 能做什么，适合哪些场景？
Artifacts Builder 是 Mini-Agent 仓库（MiniMax-AI/Mini-Agent，共 15 个技能之一）中的一个前端构建技能。它通过两个脚本把复杂的 artifact 开发流程标准化：init-artifact.sh 生成一个预配置的 React 18 + TypeScript + Vite 项目，内含 40 多个 shadcn/ui 组件、Tailwind 主题和路径别名；bundle-artifact.sh 再用 Parcel 把整个应用打包并内联为一个可直接分享的 bundle.html。它明确面向需要状态管理、路由或 shadcn/ui 组件的复杂 artifact，不适用于简单单文件 HTML/JSX。技能还附带反“AI 味”的设计守则（避免紫色渐变、居中滥用、Inter 字体等）。
运行 scripts/init-artifact.sh <project-name> 生成配置完整的 React + TypeScript（Vite）项目，预装 Tailwind CSS 3.4.1、shadcn/ui 主题系统、@/ 路径别名、40+ shadcn/ui 组件及全部 Radix UI 依赖；开发者在生成的代码上编写 artifact；随后运行 scripts/bundle-artifact.sh，脚本安装 parcel、@parcel/config-default、parcel-resolver-tspaths 和 html-inline，创建支持路径别名的 .parcelrc 配置，用 Parcel 构建（不含 source maps），并把所有 JS、CSS 与资源内联进单个 bundle.html；该文件可直接在对话中作为 artifact 分享。可选地用 Playwright、Puppeteer 等工具做后续可视化测试。
- 需要在 claude.ai 对话中交付带路由和多页面状态的前端原型的开发者，可直接打包成单文件 artifact 分享
- 熟悉 shadcn/ui 组件体系的前端工程师，想用预装好的 40+ 组件快速搭出仪表盘或后台界面原型
- 团队需要把 React 演示以零依赖单 HTML 文件形式发给非技术同事查看
- 希望产出物避开“AI 味”审美（紫色渐变、千篇一律圆角）的设计敏感型用户，可遵循其内置风格守则
- 已有 Vite + React 经验、想跳过繁琐配置直接进入业务开发的用户
这个 Skill 有哪些优点和局限？
- 初始化脚本预配置了 Tailwind 主题、路径别名、40+ shadcn/ui 组件和全部 Radix 依赖，省去手动搭建
- 打包脚本自动处理 Parcel 配置与资产内联，产出真正自包含的单 HTML 文件
- 自动检测 Node 18+ 并固定对应 Vite 版本，兼容性处理到位
- 内置反“AI slop”设计守则，产出物视觉上更专业
- MIT 许可的开源仓库，代码可审查、可修改
- 明确不适用于简单单文件 HTML/JSX artifact，小型需求用它反而增加负担
- 依赖 Node 18+ 与 npm 网络安装（parcel、html-inline 等），首次运行需要网络和本地构建环境
- 测试被标记为可选且建议延后，源文档未提供该技能自身的自动化测试证据
- 打包生成的 bundle.html 体积会包含全部依赖，可能偏大（源文档未给出体积数据）
- SKILL.md 许可写明“完整条款见 LICENSE.txt”，与仓库级 MIT 许可的关系未在源文档中说明
如何安装这个 Skill？
该技能以文件形式随 Mini-Agent 仓库分发，技能路径为 mini_agent/skills/artifacts-builder/。要获得整套技能，克隆仓库即可：git clone https://github.com/MiniMax-AI/Mini-Agent.git；开发模式下还需执行 git submodule update --init --recursive 初始化 Claude Skills。SKILL.md 本身未单独说明把该技能文件夹复制到某个客户端技能目录的步骤，此细节在源文档中未提供。
如何使用这个 Skill？
按 SKILL.md 的流程：1) bash scripts/init-artifact.sh <project-name> 初始化项目并 cd 进入；2) 编辑生成的代码开发 artifact；3) bash scripts/bundle-artifact.sh 打包（要求项目根目录有 index.html），得到自包含的 bundle.html；4) 将 bundle.html 分享给用户。可选第 5 步：用 Playwright/Puppeteer 等工具测试——技能建议先交付、按需再测，以免增加延迟。可用的触发提示示例：“用 shadcn/ui 做一个带侧边栏路由的项目管理面板 artifact”。