CSS Animation
Genera animaciones de demostración de características y recorridos de carrusel HTML/CSS autocontenidas.
Probado · Funciona
Qué hace
Investiga una aplicación en vivo a través de Claude-en-Chrome para extraer su lenguaje de diseño y geometría de diseño, entrevista al usuario, luego genera un brief estructurado más una animación HTML/CSS autocontenida (demostración de característica o carrusel de múltiples escenas), iterando a través de un bucle de revisión de congelar-inspeccionar-retroalimentar hasta la aprobación. Se activa ante 'animación css', 'animar esta característica', 'crear un recorrido css' o una solicitud de una demostración visual basada en CSS de una característica de la aplicación.
Informe de la prueba
Construyó la misma animación de 'marcar tarea como completada' dos veces y renderizó ambas en vivo en un navegador: las reglas obligatorias de la skill (JS solo de cambio de clase, emparejamiento de opacidad+visibilidad de elementos ocultos, easing de resorte, un pase de tokens de lenguaje de diseño) produjeron una capa de pulido de marca de verificación/insignia/cursor que la línea base (JS de estilo en línea, sin tokens, fundido lineal) claramente carecía — una diferencia concreta, capturada en pantalla, no solo una afirmación.
Probado el: 2026-07-16 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/neonwatty/css-animation-skill cd css-animation-skill mkdir -p ~/.claude/skills/css-animation cp SKILL.md ~/.claude/skills/css-animation/SKILL.md
Comandos y prompts de ejemplo
/css-animationGenera animaciones de demostración de características y recorridos de carrusel HTML/CSS autocontenidas.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Show me an animated walkthrough of how marking a task complete worksBuild a carousel walkthrough demo of our app's onboarding flowAnimate this feature so I can show it off on our landing page