claudeskills文档Web Artifacts Builder - Claude 的 React Artifact 技能
Web Artifacts Builder 技能如何把 React 和 Tailwind 打包成带 shadcn 组件的单文件 HTML artifact——完整流程解读。
来源：内容改编自 anthropics/skills（MIT 协议）。最后同步于 2026 年 7 月 8 日，对应上游 2026 年 4 月 20 日的更新。
概览
官方描述："Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using React, Tailwind CSS, shadcn/ui. For complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file artifacts."
注意适用边界：简单的单文件 artifact 不需要这个技能。它服务于项目复杂到装不进一个 JSX 块的时刻。
这个技能如何工作
SKILL.md 是一条五步流水线，外加设计指引：
- 初始化：用
scripts/init-artifact.sh生成预配置的 React + Tailwind + shadcn/ui 工作区 - 开发：真组件、状态管理、路由都可用
- 打包：用
scripts/bundle-artifact.sh把一切压成单个 HTML 文件 - 交付 artifact 给用户
- 测试/预览（可选的验证步骤）
技能里自带 shadcn-components.tar.gz 组件包，无需联网也能安装组件。
技能文件夹里有什么
scripts/init-artifact.sh- 项目脚手架scripts/bundle-artifact.sh- 单文件 HTML 打包器scripts/shadcn-components.tar.gz- 离线组件库SKILL.md、LICENSE.txt
对你自己写技能的启示
- 可执行脚本胜过操作说明：与其用文字描述环境搭建，不如像它一样直接给 Claude 可运行的 shell 脚本。
- 打包离线依赖（那个 shadcn 压缩包）让技能能在沙箱环境工作——大多数社区技能都漏了这个细节。