Las 5 skills de animación para Claude Code (instalar + qué pedir)

El orden importa: instala Design DNA primero

Se apilan, y el orden importa más de lo que crees:

1. Design DNA fija la dirección visual, así todo lo que construyas después hereda una paleta y una escala tipográfica reales en vez de los defaults.
2. GSAP y Motion Design manejan cómo se mueven las cosas.
3. Three.js agrega profundidad una vez que la versión plana ya se ve bien.
4. Genjutsu es el pase final, por definición va al último.

Si solo vas a instalar una, que sea Design DNA. Cambia cómo se ve todo lo demás y la diferencia se nota de inmediato.

Skill 01 — Three.js

Repo: CloudAI-X/threejs-skills. Nueve archivos que cubren fundamentos, geometría, materiales, iluminación, shaders, loaders, animación, interacción y postprocessing. Es la que convierte una página plana en algo que puedes recorrer en 3D.

$ npx skills add CloudAI-X/threejs-skills

$ Build a full screen Three.js hero for my landing page: a slowly rotating [object] with soft studio lighting and a scroll linked camera dolly. Use the threejs-fundamentals, threejs-lighting and threejs-animation skills. Lazy load the renderer, cap the pixel ratio at 2, and dispose geometries on unmount.

Skill 02 — GSAP

Repo: greensock/gsap-skills. La skill oficial de GreenSock: animación por timeline, ScrollTrigger, reveals de texto e integración con React. Si alguna vez te preguntaste por qué los buenos sitios se sienten tan suaves, es esto.

$ npx skills add https://github.com/greensock/gsap-skills

$ Animate this page with GSAP: a staggered character reveal on the h1, a ScrollTrigger pin on the features section, and a slow parallax on the hero image. Put everything on one master timeline so I can retime the whole sequence from a single place, and wrap it in a prefers-reduced-motion guard.

Skill 03 — Design DNA

Repo: zanwei/design-dna. Le apuntas a un sitio que te guste y extrae el diseño como tokens legibles por máquina: paleta de color, tipografía, layout, spacing. Dejas de adivinar por qué algo se ve caro.

$ npx skills add zanwei/design-dna

$ Extract the design DNA of [paste a URL]. Give me the color palette with hex values, the type scale, the spacing rhythm, border radii, shadow style and the layout grid. Output it as design tokens I can paste straight into my Tailwind config, then rebuild my [page name] using only those tokens.

Skill 04 — Motion Design

Repo: LottieFiles/motion-design-skill. Hecha por el equipo de LottieFiles: animación Lottie y SVG, keyframes, estados interactivos y export directo a JSON o dotLottie.

$ npx skills add LottieFiles/motion-design-skill

$ Design a Lottie ready loading animation for [brand]: a 2 second loop with three states, idle, loading and success. Keep it SVG based and under 30kb. Export the dotLottie plus the raw JSON, then give me the React component that plays the success state when my form submits.

Skill 05 — Genjutsu

Repo: AThevon/genjutsu. Dirección creativa y el pase final. Quince módulos que cubren foundations, web, Apple y Android — o sea, también SwiftUI y Compose, no solo la web.

$ /genjutsu:cast make the pricing cards feel physical on hover

Usa /genjutsu:cast para darle movimiento e intención a algo que ya construiste, y /genjutsu:paint cuando quieras llevar la dirección visual más lejos. Puedes pasar la petición en la misma línea del comando.

Qué cambia de verdad

Notas honestas

• Los cinco repos son públicos y gratis. No hay afiliación ni patrocinio.
• Una skill es contexto, no magia: hace a Claude preciso con una librería, no le da buen gusto.
• npx skills es un CLI de la comunidad (vercel-labs), no de Anthropic. Lee qué contiene una skill antes de instalarla.
• Los repos se mueven. Si un comando deja de funcionar, el README del repo es la fuente de verdad.
• Instalar las cinco de golpe come contexto. Empieza con una, úsala en un build real, y luego suma la siguiente.