Habilidades web-artifacts-builder
📦

web-artifacts-builder

Riesgo bajo ⚡ Contiene scripts📁 Acceso al sistema de archivos⚙️ Comandos externos

Crear Artefactos React con Componentes shadcn/ui

También disponible en: davila7,Azeem-2,anthropics

Crear artefactos React con múltiples componentes para conversaciones de Claude requiere configuración y empaquetado complejos. Esta habilidad automatiza la configuración del proyecto con React 18, TypeScript, Tailwind CSS y más de 40 componentes shadcn/ui, luego empaqueta todo en un único archivo HTML.

Soporta: Claude Codex Code(CC)
🥉 73 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "web-artifacts-builder". Inicializar un proyecto llamado "task-board" con layout de tablero kanban

Resultado esperado:

Proyecto 'task-board' creado exitosamente con React 18, TypeScript, Vite, Tailwind CSS 3.4.1 y más de 40 componentes shadcn/ui. Alias de ruta (@/) configurados. Ejecuta 'cd task-board && pnpm dev' para iniciar el servidor de desarrollo.

Usando "web-artifacts-builder". Empaquetar el proyecto React actual en un único artefacto HTML

Resultado esperado:

¡Empaquetado completo! Salida: bundle.html (487 KB). Todo JavaScript, CSS y assets en línea. Abre bundle.html en el navegador para previsualizar, o comparte directamente en conversaciones de Claude.

Auditoría de seguridad

Riesgo bajo
v1 • 2/24/2026

Static 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.

3
Archivos escaneados
451
Líneas analizadas
5
hallazgos
1
Auditorías totales
Problemas de riesgo bajo (2)
scripts/bundle-artifact.sh:1-54scripts/init-artifact.sh:1-323
Shell Script Execution
Build scripts execute shell commands for project scaffolding. All commands use hardcoded arguments with no user input injection vectors. Standard pattern for development tooling.
scripts/init-artifact.sh:228-251
Filesystem Modification
Scripts modify project configuration files (tsconfig.json, tailwind.config.js) using Node.js fs module. Operations are scoped to the created project directory only.

Factores de riesgo

⚡ Contiene scripts (1)
scripts/init-artifact.sh:93
📁 Acceso al sistema de archivos (1)
scripts/init-artifact.sh:230-250
⚙️ Comandos externos (2)
scripts/bundle-artifact.sh:1-54 scripts/init-artifact.sh:1-323
Auditado por: claude

Puntuación de calidad

45
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
86
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Componentes de Panel de Control Interactivo

Construye paneles de visualización de datos complejos con múltiples componentes shadcn/ui como tablas, tarjetas, gráficos y filtros que funcionan directamente en conversaciones de Claude.

Aplicaciones de Formularios Multi-Paso

Crea flujos de formularios sofisticados con validación, gestión de estado y componentes de UI como diálogos, pestañas y acordeones para experiencias de onboarding de usuarios.

Demostraciones de Sistemas de Diseño

Genera librerías de componentes comprehensivas mostrando temas shadcn/ui, soporte de modo oscuro y layouts responsivos para documentación de diseño.

Prueba estos prompts

Inicio Rápido - Inicializar Proyecto 
Inicializa un nuevo proyecto de artefacto web llamado "dashboard-demo" con todos los componentes shadcn/ui configurados.
Construir Tabla de Datos con Filtros 
Crea un panel de gestión de clientes con una tabla de datos mostrando nombre, email y estado. Añade controles de filtro usando los componentes select e input. Incluye paginación y acciones de fila mediante menú desplegable.
Formulario Multi-Paso con Validación 
Construye un formulario de registro de 3 pasos usando los componentes form, input, select y button. Usa react-hook-form con validación zod. El Paso 1 recoge información personal, el Paso 2 maneja preferencias, el Paso 3 muestra confirmación. Incluye indicador de progreso.
Panel de Analíticas con Modo Oscuro 
Crea un panel de analíticas con interruptor de modo oscuro usando next-themes. Incluye tarjetas de métricas, un placeholder de gráfico de líneas, tabla de actividad reciente y un diálogo de configuración. Usa los componentes card, table, dialog, button y switch con temas shadcn/ui apropiados.

Mejores prácticas

  • Ejecuta siempre init-artifact.sh antes de iniciar el desarrollo para asegurar que todas las dependencias y configuraciones estén correctamente configuradas
  • Usa los alias de ruta proporcionados (@/components, @/lib) para imports más limpios consistentes con las convenciones shadcn/ui
  • Ejecuta bundle-artifact.sh solo después de completar el desarrollo para minimizar el tiempo de compilación y el tamaño de salida

Evitar

  • No uses esta habilidad para snippets simples de React de un solo archivo - está diseñada para aplicaciones con múltiples componentes
  • Evita modificar los scripts de compilación a menos que entiendas la configuración de empaquetado de Parcel y la resolución de alias de ruta
  • No hagas commit del bundle.html al control de versiones - genéralo nuevo para cada sesión de compartir artefactos

Preguntas frecuentes

¿Cuál es la diferencia entre esta habilidad y la generación simple de artefactos React?
Esta habilidad crea aplicaciones React completas con múltiples componentes con herramientas de compilación apropiadas, mientras que los artefactos simples son snippets JSX de un solo archivo. Usa esto para UIs complejas que requieren gestión de estado, routing o muchos componentes shadcn/ui.
¿Puedo usar npm o yarn en lugar de pnpm?
Los scripts están escritos para pnpm. Puedes adaptar manualmente los comandos para npm o yarn, pero se recomienda pnpm para compatibilidad con los scripts proporcionados e instalación más rápida de dependencias.
¿Por qué el archivo HTML empaquetado es tan grande?
El bundle incluye toda la librería React, todos los componentes shadcn/ui y Tailwind CSS en línea en un único archivo. Esta compensación permite compartirlo como un artefacto autocontenido sin dependencias externas.
¿Puedo añadir componentes shadcn/ui personalizados después de la inicialización?
Sí. La configuración components.json está configurada para el CLI de shadcn/ui. Ejecuta 'pnpm dlx shadcn-ui@latest add <component>' para añadir más componentes a tu proyecto.
¿Funciona esta habilidad con el modo workspace de Claude Code?
Sí. Los scripts operan dentro del directorio del proyecto actual. Al usar Claude Code, asegúrate de ejecutar comandos desde la raíz del proyecto del artefacto donde existe package.json.
¿Cómo personalizo el tema de Tailwind más allá de los colores shadcn por defecto?
Edita tailwind.config.js para añadir colores, fuentes personalizados o extender el tema. La config está preconfigurada con variables CSS de shadcn que puedes modificar o extender.

Detalles del desarrollador

Licencia

Complete terms in LICENSE.txt

Repositorio

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-artifacts-builder

Ref.

main

Estructura de archivos

📁 scripts/

📄 bundle-artifact.sh

📄 init-artifact.sh

📄 shadcn-components.tar.gz

📄 SKILL.md