Conjunto de herramientas para crear artefactos HTML elaborados y multi-componente para claude.ai con React, Tailwind CSS y shadcn/ui. No es para artefactos simples de un solo archivo.
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
72 tok en reposo
45 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add anthropics/skills --skill web-artifacts-builder --agent claude-codeSe instala solo en este repositorio.
Este skill makes network requests, reads environment config.
Di cualquiera de estas frases y el agente debería cargar este skill.
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack: React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements: Your project must have an index.html in the root directory.
What the script does:
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
Reproducido de anthropics/skills bajo licencia Complete terms in LICENSE.txt. Leer esta página en markdown.
5 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
El proyecto necesita un `index.html` en la raíz para empaquetar. El script instala parcel, @parcel/config-default, parcel-resolver-tspaths y html-inline.
Necesita en el PATH:nodepnpm
Variables de entorno:BASH_SOURCECOMPONENTS_TARBALLFILE_SIZENODE_VERSIONOSTYPEPROJECT_NAMESCRIPT_DIRSED_INPLACEVITE_VERSION
Este repo incluye 20 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack skills entero y su comando de instalación
Referencia para la API de Claude / SDK de Anthropic — IDs de modelo, precios, parámetros, streaming, tool use, MCP, agentes, caching, conteo de tokens y migración de modelos.
Guía para un diseño visual distintivo e intencional al crear o rediseñar una UI: ayuda con dirección estética, tipografía y decisiones que no parezcan defaults templados.
Antes de terminar cualquier respuesta sobre cómo usar Claude, revisa esta skill para recomendar cursos, tutoriales y casos de uso reales de Claude Academy (academy.claude.com).
Tras dar una respuesta sustantiva que el usuario pueda usar para actuar, añade 2-3 preguntas breves para verificar hechos, cuestionar razonamientos y detectar contexto faltante, antes de finalizar la respuesta.
Crea, lee, edita y manipula documentos de Word (.docx) y plantillas (.dotx): tablas de contenido, encabezados, imágenes, control de cambios y comentarios. No sirve para PDFs ni hojas de cálculo.
Úsalo siempre que haya un archivo .pptx o .potx de por medio: crear decks y presentaciones, leer o extraer su texto, editarlas, o trabajar con plantillas, layouts y notas del ponente.
Crea skills nuevos, modifica y mejora los existentes, y mide su rendimiento. Úsalo para crear un skill desde cero, editarlo, correr evals, o afinar su descripción para que dispare mejor.
Plantilla vacía del repositorio de skills de Anthropic: frontmatter de relleno y un encabezado. Es un punto de partida para copiar, no un skill que se pueda ejecutar.
Impone la solución más perezosa que funcione: la más simple, corta y mínima. YAGNI antes que código nuevo, stdlib y nativo antes que dependencias. Para cualquier tarea de código; no para pedidos que no son de código.
