web-artifacts-builder
使用 shadcn/ui 组件构建 React 工件
También disponible en: davila7,Azeem-2,anthropics,sickn33
为 Claude 对话创建多组件 React 工件需要复杂的打包和配置。此技能自动化项目设置，包含 React 18、TypeScript、Tailwind CSS 和 40+ 个 shadcn/ui 组件，然后将所有内容打包成单个 HTML 文件。
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "web-artifacts-builder". 初始化一个名为 "task-board" 的项目，采用看板布局
Resultado esperado:
项目 'task-board' 创建成功，包含 React 18、TypeScript、Vite、Tailwind CSS 3.4.1 和 40+ 个 shadcn/ui 组件。路径别名 (@/) 已配置。运行 'cd task-board && pnpm dev' 启动开发服务器。
Usando "web-artifacts-builder". 将当前 React 项目打包成单个 HTML 工件
Resultado esperado:
打包完成！输出：bundle.html (487 KB)。所有 JavaScript、CSS 和资源已内联。在浏览器中打开 bundle.html 预览，或直接在 Claude 对话中分享。
Auditoría de seguridad
Riesgo bajoStatic analysis flagged 39 patterns across 3 files (451 lines). All findings evaluated as false positives: shell commands are legitimate build tooling with hardcoded arguments, filesystem operations modify only project-local configuration files, network references are documentation URLs only, and weak crypto detections are false matches on CSS color values. The skill is a frontend scaffolding tool with no malicious patterns detected.
Problemas de riesgo bajo (2)
Factores de riesgo
⚡ Contiene scripts (1)
📁 Acceso al sistema de archivos (1)
⚙️ Comandos externos (2)
Puntuación de calidad
Lo que puedes crear
交互式仪表板组件
使用多个 shadcn/ui 组件（如表格、卡片、图表和过滤器）构建复杂的数据可视化仪表板，可直接在 Claude 对话中运行。
多步骤表单应用程序
创建具有验证、状态管理和 UI 组件（如对话框、标签页和手风琴）的复杂表单流程，用于用户引导体验。
设计系统展示
生成全面的组件库，展示 shadcn/ui 主题、深色模式支持和响应式布局，用于设计文档。
Prueba estos prompts
初始化一个名为 "dashboard-demo" 的新 Web 工件项目，配置所有 shadcn/ui 组件。
创建一个客户管理仪表板，包含显示姓名、电子邮件和状态的数据表。使用 select 和 input 组件添加过滤器控件。通过下拉菜单包含分页和行操作。
使用 form、input、select 和 button 组件构建一个 3 步注册表单。使用 react-hook-form 配合 zod 验证。第 1 步收集个人信息，第 2 步处理偏好设置，第 3 步显示确认。包含进度指示器。
使用 next-themes 创建带有深色模式切换的分析仪表板。包含指标卡片、折线图占位符、最近活动表格和设置对话框。使用 card、table、dialog、button 和 switch 组件，并应用正确的 shadcn/ui 主题。
Mejores prácticas
- 在开始开发前始终运行 init-artifact.sh，以确保所有依赖和配置正确设置
- 使用提供的路径别名 (@/components, @/lib) 进行更清晰的导入，符合 shadcn/ui 约定
- 仅在开发完成后运行 bundle-artifact.sh，以最小化构建时间和输出大小
Evitar
- 不要将此技能用于简单的单文件 React 代码片段 - 它专为多组件应用程序设计
- 除非您了解 Parcel 打包配置和路径别名解析，否则避免修改构建脚本
- 不要将 bundle.html 提交到版本控制 - 每次工件分享会话时重新生成
Preguntas frecuentes
此技能与简单 React 工件生成有什么区别？
我可以使用 npm 或 yarn 代替 pnpm 吗？
为什么打包后的 HTML 文件如此之大？
初始化后可以添加自定义 shadcn/ui 组件吗？
此技能是否适用于 Claude Code 工作区模式？
如何自定义 Tailwind 主题，超越默认的 shadcn 颜色？
Detalles del desarrollador
Autor
ZhanlinCuiLicencia
Complete terms in LICENSE.txt
Repositorio
https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builderRef.
main
Estructura de archivos