Guía de lectura localizada
web-artifacts-builderFinalidad, uso y origen
Conjunto de herramientas para crear elaborados artefactos HTML de múltiples componentes de claude.ai utilizando tecnologías web frontend modernas (React, Tailwind CSS,shadcn/ui). Úselo para artefactos complejos que requieren administración de estado, enrutamiento oshadcn/uicomponentes - no para archivos individuales simplesHTML/JSXartefactos.
Fuente recuperada:
- Repositorio de origen
- anthropics/skills
- SKILL.md
skills/web-artifacts-builder/SKILL.md- Estrellas del repositorio
- 185,373
- Actualización del repositorio
- 2026-10-29
- Clasificación de habilidades
- Desarrollo
- Última recopilación
Licencia: Documentos de licencia pendientes de verificación
Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.
Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.
Lo que hace esta habilidad
Conjunto de herramientas para crear elaborados artefactos HTML de múltiples componentes de claude.ai utilizando tecnologías web frontend modernas (React, Tailwind CSS,shadcn/ui). Úselo para artefactos complejos que requieren administración de estado, enrutamiento oshadcn/uicomponentes - no para archivos individuales simplesHTML/JSXartefactos.
Cómo funciona el flujo de trabajo ascendente
Paso1Inicializar proyecto
Ejecuta el script de inicialización para crear un nuevo proyecto de React: Esto crea un proyecto completamente configurado con: ✅ React + TypeScript (a través de Vite) ✅ Tailwind CSS3.4.1conshadcn/uisistema de temas
Paso río arriba · L24 ↗Paso2: Desarrolla tu artefacto
Para crear el artefacto, edite los archivos generados. Consulte las Tareas de desarrollo comunes a continuación para obtener más información.
Paso río arriba · L41 ↗Paso3: Agrupar en un único archivo HTML
Para agrupar la aplicación React en un único artefacto HTML: Esto creabundle.html- un artefacto autocontenido con todo el JavaScript, CSS y dependencias integrados. Este archivo se puede compartir directamente en las conversaciones de Claude como un artefacto. Requisitos: Su proyecto debe tener unindex.htmlen el directorio raíz. Lo que hace el script:
bash scripts/init-artifact.sh <project-name>
cd <project-name>Requisitos y configuración
No se seleccionó ningún fragmento de requisitos breves de este archivo. Esto no significa que la habilidad no tenga dependencias. Consulte las instrucciones de configuración del repositorio y los archivos de referencia.
Límites y controles de calidad
No se seleccionó ningún pasaje con límites específicos en este archivo. Esto no significa que la habilidad sea segura para cualquier entrada o entorno. Revise el código fuente completo y valide su propio resultado.
Comience con una prueba segura.
- Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
- Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
- Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
- Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.
Lea más en la fuente
Habilidades relacionadas
Traducción y alcance
Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.
Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.
- Fuente fijada
- Lee el original ↗
- Fuente recuperada
- Confirmación de origen
ca45fc496a3436251f191354091d557da31c15b5- Fuente SHA-256
81c5002c6643b0de7b8710b00e7a9038daa6fb9b68d59870ee6adb12da8d10f8