Repolode
Enviar
freshtechbro

freshtechbro/claudedesignskills

Colección de skills y plugins para Claude Code que le enseñan a Claude sobre Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js y otras herramientas de animación y 3D web.

Ver en GitHub
Estrellas
1,080
Forks
185
Issues abiertos
6
Último commit
hace 11 meses

¿Qué es?

Este repositorio es un marketplace de plugins para Claude Code que incluye 22 skills para el desarrollo web moderno, centrados en gráficos 3D, animación y experiencias web interactivas. Cada skill es una carpeta con un archivo SKILL.md que contiene instrucciones y patrones, además de documentación de referencia, scripts auxiliares y plantillas que Claude carga solo cuando una tarea los requiere.

Los skills abarcan bibliotecas como Three.js, React Three Fiber, Babylon.js, PlayCanvas, A-Frame, PixiJS, GSAP ScrollTrigger, Framer Motion, React Spring, Anime.js, Lottie y Rive, además de herramientas de creación 3D como Blender, Spline y Substance 3D. Se agrupan en cinco paquetes instalables, y también se pueden añadir plugins individuales con un solo comando en Claude Code.

También se pueden subir los skills como archivos zip a claude.ai o copiarlos en el directorio .claude/skills de un proyecto local.

Funciones clave

  • 01Incluye Three.js, React Three Fiber, Babylon.js y PlayCanvas para crear escenas 3D.
  • 02Incluye GSAP ScrollTrigger, Framer Motion, Anime.js y Lottie para crear animaciones.
  • 03Se puede instalar como plugins individuales o como uno de los cinco paquetes por categoría en Claude Code.
  • 04Cada skill incluye instrucciones en SKILL.md, documentación de referencia y scripts auxiliares.
  • 05Los skills se pueden subir a claude.ai o copiar en un proyecto local.

Casos de uso

  • Pedirle a Claude que cree una escena de Three.js con materiales PBR o un componente de React Three Fiber.
  • Añadir animaciones controladas por el desplazamiento con GSAP o transiciones de Framer Motion a una página web.
  • Elegir entre motores 3D o bibliotecas de animación con ayuda de Claude.
  • Generar código base para experiencias interactivas con WebGL o WebXR.

Inicio rápido

  1. 1

    Añade el marketplace a Claude Code

    /plugin marketplace add freshtechbro/claudedesignskills
  2. 2

    Instala un plugin individual

    /plugin install threejs-webgl
  3. 3

    O instala un paquete completo

    /plugin install core-3d-animation

Antes de usarlo

  • Las Skills son paquetes de instrucciones para Claude Code, no software independiente, así que no hay nada que ejecutar directamente.
  • Los scripts del generador requieren Python 3 y el entorno que especifica el proyecto, que solo utiliza la biblioteca estándar.

Temas

#claude-code#threejs#webgl#animation#gsap#react-three-fiber#3d-graphics#web-development

Preguntas frecuentes

¿Qué es claudedesignskills?
Colección de skills y plugins para Claude Code que le enseñan a Claude sobre Three.js, GSAP, React Three Fiber, Framer Motion, Babylon.js y otras herramientas de animación y 3D web. Este repositorio es un marketplace de plugins para Claude Code que incluye 22 skills para el desarrollo web moderno, centrados en gráficos 3D, animación y experiencias web interactivas. Cada skill es una carpeta con un archivo SKILL.md que contiene instrucciones y patrones, además de documentación de referencia, scripts auxiliares y plantillas que Claude carga solo cuando una tarea los requiere.
¿claudedesignskills es gratuito? ¿Qué licencia tiene?
claudedesignskills es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿claudedesignskills sigue mantenido?
Sin commits en más de 6 meses. El último commit de claudedesignskills fue el 20 nov 2025.
¿Para qué puedo usar claudedesignskills?
Pedirle a Claude que cree una escena de Three.js con materiales PBR o un componente de React Three Fiber. Añadir animaciones controladas por el desplazamiento con GSAP o transiciones de Framer Motion a una página web. Elegir entre motores 3D o bibliotecas de animación con ayuda de Claude. Generar código base para experiencias interactivas con WebGL o WebXR.
¿Cómo se instala claudedesignskills?
Añade el marketplace a Claude Code: /plugin marketplace add freshtechbro/claudedesignskills Instala un plugin individual: /plugin install threejs-webgl O instala un paquete completo: /plugin install core-3d-animation
¿Dónde consigo claudedesignskills?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/freshtechbro/claudedesignskills

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados