Agent Skills
返回列表
💻

React 单文件 Web 组件打包

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/scaffold-and-bundle-rich-single-file-web-artifacts-with-react-tailwind-and-shadcn-ui。

技能介绍

解决什么问题

当你需要把一个交互丰富的 Web 界面打包成单个可分享的 HTML 文件时——不是完整产品，而是仪表盘、预览页或演示组件——传统的 React 项目搭建往往过于笨重。你要手动配置 Vite、Tailwind、shadcn/ui 依赖和构建链，再想办法把产物压缩成一个文件。Vite 5.1 新增的 --shadcn 标志正是为此而来：它一次性生成包含 React、Tailwind 和 shadcn/ui 基础组件的最小项目，让你直接开始写界面，而不是先折腾工具链。

技能如何工作

整个流程分为三步：

  • 脚手架生成：执行 vite --shadcn 创建新项目，React、Tailwind CSS 和 shadcn/ui 组件均已预装预配置
  • 构建交互界面：引入状态管理或路由逻辑，让组件具备超越静态布局的动态行为
  • 打包为单文件：运行构建命令，将所有资源内联输出为一个可独立分享的 HTML 文件

该技能面向的是 artifact 交付场景，最终产物是一个 HTML 文件，而不是发布一个独立的 React 或 Tailwind 产品。

适用边界与注意点

几点限制需要注意：

  • 需要预先安装 Node.js 18+、React、TypeScript、Vite、Parcel、Tailwind CSS 和 shadcn/ui
  • 不适用于构建完整应用，只聚焦于单文件产物交付
  • 上游技能源自 Anthropic 的 web-artifacts-builder，依赖 Vite 5.1 的 --shadcn 标志，工具链版本不可忽略
  • Frontmatter 仅需要两个字段，配置开销被刻意控制在最低

使用场景

  • 向客户演示数据看板原型，需要把 React 和 Tailwind 写的交互界面打包成一个 HTML 文件现场展示
  • 为设计系统制作可交互的组件模板，用 shadcn/ui 搭建后输出单文件 HTML 供团队复用
  • 在技术文档中嵌入可运行的 React 示例，构建后将全部资源内联为单个 HTML 随文档分发
  • 作为 AI Agent 开发者，需要将包含状态和路由的 React 界面打包为 HTML 交付给最终用户

适合人员

  • 前端工程师需要在会议中快速分享交互原型，不想手动配置 Vite 和 Tailwind 构建链
  • AI 应用开发者正在构建 Agent 技能，需要把包含状态管理的 React 界面输出为单个 HTML 交付
  • 设计系统维护者想用 shadcn/ui 生成可独立运行的组件示例，供非开发同事直接预览效果
  • 技术文档工程师需要在文档中附带可交互的 React 演示，要求打包后无外部依赖