用途：构建功能丰富、多组件的 claude.ai HTML 工件（artifacts），基于现代前端技术栈实现，并将整个应用打包为单个自包含 HTML 文件供用户查看。
主要能力：提供从初始化到打包的完整流程。技术栈为 React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui。
使用方式（五步）：
- 初始化前端项目：创建 React + TypeScript（通过 Vite）项目，预装 Tailwind CSS 3.4.1 与 shadcn/ui 主题系统，配置路径别名 @/，预装 40+ shadcn/ui 组件及全部 Radix UI 依赖，并配置 Parcel 用于打包。
- 编辑生成的文件来开发工件。
- 打包为单个 HTML 文件：生成 bundle.html，所有 JavaScript、CSS 和依赖均内联其中。前提是项目根目录必须有 index.html。打包会安装依赖（parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline），创建支持路径别名的 .parcelrc 配置，用 Parcel 构建（不含 source map），再用 html-inline 内联所有资源。
- 在对话中分享打包好的 HTML 文件，用户即可将其作为工件查看。
- （可选）测试/可视化工件：可使用其他 Skill 或 Playwright、Puppeteer 等工具，但不建议一开始就测试，以免增加从请求到看到成品之间的延迟。
设计风格提示：为避免所谓“AI slop”，应避免过度使用居中布局、紫色渐变、统一圆角以及 Inter 字体。
限制：打包要求项目根目录存在 index.html；其余具体限制资料暂未提供。
参考：shadcn/ui 组件文档见 https://ui.shadcn.com/docs/components