web-artifacts-builder
使用 React 构建 Web 制品
也可从以下获取: ZhanlinCui,davila7,Azeem-2,anthropics
在 Claude Code 中创建复杂的 Web 制品需要设置 React 项目、安装依赖并打包为单个 HTML 文件。此技能可自动化整个工作流程，让您专注于构建制品。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“web-artifacts-builder”。 创建一个名为 'analytics-dashboard' 的新 React 制品项目
预期结果:
一个完全配置好的 React + Vite 项目，包含 Tailwind CSS 和 40 多个 shadcn/ui 组件，可立即开始开发
正在使用“web-artifacts-builder”。 将当前项目打包为 HTML
预期结果:
一个包含所有 JavaScript、CSS 和依赖项的单个 bundle.html 文件 - 可直接粘贴到 Claude 中作为制品使用
安全审计
安全Static analysis flagged 48 potential issues, but all are false positives or benign patterns. The skill uses legitimate build tooling (pnpm, Vite, Parcel) for creating React projects with Tailwind CSS. Network URLs point to official documentation (shadcn/ui). Shell commands and filesystem operations are standard development scripts with hardcoded arguments. No malicious intent detected.
高风险问题 (1)
中风险问题 (2)
低风险问题 (1)
风险因素
⚡ 包含脚本 (1)
⚙️ 外部命令 (15)
质量评分
你能构建什么
创建交互式数据可视化
使用 React 和 shadcn/ui 组件构建复杂的图表、图形和数据仪表板。打包为 HTML 制品以便分享。
构建多表单工作流程
使用 React 和 Tailwind CSS 创建具有状态管理、验证和专业 UI 的多步骤表单。
开发设计系统展示
使用多个变体构建全面的组件展示和设计系统文档。
试试这些提示
使用 web-artifacts-builder 技能初始化一个名为 'my-dashboard' 的新 React 项目。设置 Tailwind CSS 和 shadcn/ui 组件。
使用 web-artifacts-builder 技能创建一个包含交互式图表、筛选控件和数据表的仪表板，使用 shadcn/ui 组件。
使用 bundle-artifact.sh 脚本将当前 React 项目打包为单个 HTML 文件，以便作为制品分享。
在当前项目中添加一个对话框组件和一个使用 react-hook-form 和 zod 进行验证的表单。配置表单以处理用户输入。
最佳实践
- 使用路径别名 (@/) 以实现组件间更清晰的导入
- 利用 shadcn/ui 组件获得一致、可访问的 UI
- 在打包最终分享前在浏览器中测试制品
- 保持组件逻辑简单 - 复杂状态可能会增加捆绑包大小
避免
- 避免在初始设置后安装额外的 npm 包 - 每个包都会增加捆绑包大小
- 不要跳过浏览器测试步骤 - 某些 React 特性行为可能不同
- 避免过多的无法打包到单个 HTML 中的外部依赖