por Juanjo LunaCrear artefactos web complejos
Te ayuda a crear artefactos web complejos con varias partes usando React, Tailwind CSS y shadcn/ui. Sirve cuando necesitas una interfaz con estado, rutas o componentes avanzados.
Descripción original (inglés)
artifacts-builder: Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
Cómo instalarla
Una skill es una carpeta con un fichero SKILL.md. Para instalarla basta con copiar la carpeta artifacts-builder en el sitio donde tu agente busca sus skills.
- Sin terminal: abre la carpeta en GitHub, descárgala y cópiala en la carpeta de tu agente (tabla de abajo).
- Con terminal (macOS, Linux o Git Bash en Windows): elige tu agente y copia los comandos.
git clone --depth 1 https://github.com/ComposioHQ/awesome-claude-skills.git /tmp/skill-src
mkdir -p ~/.claude/skills
cp -r "/tmp/skill-src/artifacts-builder" ~/.claude/skills/artifacts-builder
rm -rf /tmp/skill-src| Agente | Para todos tus proyectos | Solo un proyecto |
|---|---|---|
| Claude Code | ~/.claude/skills | .claude/skills |
| GitHub Copilot | ~/.copilot/skills | .github/skills |
| Codex | ~/.agents/skills | .agents/skills |
| Gemini CLI | ~/.gemini/skills | .gemini/skills |
Muchos agentes leen también .agents/skills. Reinicia el agente después de instalar. Antes de instalar una skill, revisa su SKILL.md y los scripts que incluya: se ejecutan con tus permisos.
Más skills de ComposioHQ/awesome-claude-skills
- Automatizar tareas de 21risk -21risk-automation
- Automatizar tareas de 2chat -2chat-automation
- Automatizar tareas de Ably ably-automation
- Automatizar tareas de Abstract abstract-automation
- Automatizar tareas de Abuselpdb abuselpdb-automation
- Automatizar tareas de Abyssale abyssale-automation
- Automatizar tareas de Accelo accelo-automation
- Automatizar certificados Accredible accredible-certificates-automation
Explicación redactada con ayuda de IA a partir de la descripción original.