Communitygithub.com

jakubantalik/transitions-dev

Transiciones CSS listas para producción para aplicaciones web. Útil al implementar insignias de notificación, menús desplegables, modales, revelaciones de paneles, transiciones de página, redimensiones de tarjetas, apariciones de números, intercambios de texto, intercambios de iconos, verificaciones de éxito, desplazamientos de grupos de avatares, sacudidas de estado de error, limpieza de búsqueda/entrada, cargadores esqueleto, texto con brillo, pestañas deslizantes, tooltips o revelaciones de texto escalonadas. Se activa con frases como 'añadir una transición', 'animar el menú desplegable', 'hacer que el modal se abra suavemente', 'intercambiar icono', 'deslizar página', 'animación escalonada', 'transición de apertura/cierre', 'hacer que se anime', 'fundido entre', 'animación de éxito', 'error de formulario', 'sacudida por inválido', 'elevación al pasar el ratón', 'desplazamiento sobre pila de avatares', 'limpiar la búsqueda', 'cargador esqueleto', 'brillo de carga', 'texto con brillo', 'pestañas deslizantes', 'control segmentado', 'tooltip', 'revelar texto'. También transiciones revelar, transiciones revisar, transiciones aplicar, transiciones refinar.

¿Qué es transitions-dev?

Este skill proporciona un conjunto completo de transiciones CSS listas para producción, diseñadas para mejorar la experiencia de usuario en aplicaciones web modernas. Es especialmente útil para desarrolladores que necesitan implementar animaciones pulidas sin tener que escribirlas desde cero, ahorrando tiempo y asegurando consistencia. Compatible con cualquier framework web que utilice CSS (React, Vue, Angular, Svelte, etc.), el skill se activa mediante comandos en lenguaje natural como "añadir una transición", "animar el menú desplegable" o "hacer que el modal se abra suavemente". El skill incluye una biblioteca de transiciones predefinidas para componentes comunes como insignias de notificación, modales, paneles deslizantes, tarjetas, intercambios de texto e iconos, animaciones de éxito, estados de error, cargadores esqueleto, texto con brillo, pestañas deslizantes y tooltips. Cada transición se entrega con código CSS optimizado, explicaciones de su funcionamiento y recomendaciones de personalización, permitiendo a los desarrolladores aplicarlas directamente o adaptarlas a sus necesidades específicas.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jakubantalik/transitions.dev/tree/main/skills/transitions-dev

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace transitions-dev?

Transiciones CSS listas para producción para aplicaciones web. Útil al implementar insignias de notificación, menús desplegables, modales, revelaciones de paneles, transiciones de página, redimensiones de tarjetas, apariciones de números, intercambios de texto, intercambios de iconos, verificaciones de éxito, desplazamientos de grupos de avatares, sacudidas de estado de error, limpieza de búsqueda/entrada, cargadores esqueleto, texto con brillo, pestañas deslizantes, tooltips o revelaciones de texto escalonadas. Se activa con frases como "añadir una transición", "animar el menú desplegable", "hacer que el modal se abra suavemente", "intercambiar icono", "deslizar página", "animación escalonada", "transición de apertura/cierre", "hacer que se anime", "fundido entre", "animación de éxito", "error de formulario", "sacudida por inválido", "elevación al pasar el ratón", "desplazamiento sobre pila de avatares", "limpiar la búsqueda", "cargador esqueleto", "brillo de carga", "texto con brillo", "pestañas deslizantes", "control segmentado", "tooltip", "revelar texto". También transiciones revelar, transiciones revisar, transiciones aplicar, transiciones refinar.

Skills relacionados