106.9K+Descargar
Ir a la guía de uso
Transitions.devpor Jakubantalik

Transitions.dev Skill.

Aplica transiciones CSS por componente y tokens semánticos de movimiento.

  • Transiciones
  • Animación web
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · transitions-devSKILL.md
Tarea Aplica transiciones CSS por componente y tokens semánticos de movimiento. Resultados Una receta de transición con las variables CSS necesarias. Antes de empezar Aporta marcado, estilos, estado y tokens existentes. Revisa la licencia personalizada antes de adaptar una receta; redistribución y plantillas tienen condiciones específicas.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Aplica transiciones CSS por componente y tokens semánticos de movimiento

Explora transiciones CSS para menús, modales, textos y controles con tokens semánticos, conexiones de estado y pruebas repetidas.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

transitions-dev proporciona recetas CSS portables con selectores con espacio de nombres y variables semánticas. Asocia el componente visible con una receta: menú anclado al disparador, modal, texto cambiante o indicador deslizante de pestaña. La implementación conecta los hooks de estado documentados al comportamiento real.

El skill ofrece también revisión y refinamiento. Revisar localiza usos posibles sin editar; refinar asigna valores aislados a tokens según su significado. Una animación de cierre usa un token de duración de cierre por su función, no por proximidad numérica al valor existente.

Entregables esperados

  • Una receta de transición con las variables CSS necesarias.
  • Hooks documentados de clase o atributo conectados al componente.
  • Una revisión por archivo o propuesta de refinamiento de tokens semánticos.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Identificar el componente

    Inspecciona elemento y cambio de estado. Distingue un menú anclado de un modal centrado, o cambio de texto de movimiento de página.

  2. 02
    Añadir tokens y hooks

    Usa una vez el bloque compartido de variables o las variables de la receta. Conserva limpieza de cierre, repetición y orquestación JavaScript necesaria.

  3. 03
    Probar repeticiones

    Abre, cierra y vuelve a abrir. Comprueba movimiento reducido y sincronización de tiempos variables con la lógica de limpieza.

02 Cuándo usarlo

Cuándo usarlo

Aporta marcado, estilos, estado y tokens existentes. Revisa la licencia personalizada antes de adaptar una receta; redistribución y plantillas tienen condiciones específicas.

Buen encaje

  • Un componente necesita una transición definidaLas recetas conectan CSS con estados UI reconocibles, no con una petición abstracta.
  • Los tiempos son incoherentesEl refinamiento propone tokens semánticos según la acción de cada duración.

Límites que conviene comprobar

  • La biblioteca limita la redistribuciónLa licencia personalizada permite uso en productos personales y comerciales, pero prohíbe republicar la colección o una parte sustancial como biblioteca de transiciones, paquete de movimiento o kit de animación competidor. Plantillas y temas tienen términos adicionales; la licencia MIT del repositorio, solo para herramientas, no cubre este skill.
  • Los hooks requieren integraciónUn fragmento no aporta automáticamente estado correcto, gestión de foco o comportamiento del componente.

Aporta estos datos

  • Código del componenteAporta marcado, estilos e implementación de estado pertinentes.
  • Intención de interacciónEspecifica apertura, cierre, sustitución o evento de feedback.
  • Sistema de movimiento existenteIncluye tokens, temas y bloques de variables compartidos ya instalados.

03 Decisiones importantes

Decisiones importantes

  1. Ajuste semántico

    Duraciones y distancias nombradas expresan cómo se mueve el componente.

  2. Alcance pequeño

    La fuente favorece cambios focalizados sin incorporar una biblioteca general.

  3. Interacciones repetibles

    Limpieza y repetición abordan fallos visibles solo en la segunda interacción.

04 Ejemplo de brief

Prueba con un encargo concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la fuente y la configuración

Aporta marcado, estilos e implementación de estado pertinentes.

Archivo fuente original
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md

La referencia siguiente abre las instrucciones originales. Revisa la configuración del repositorio antes de utilizarlas; no es un comando de instalación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo
Usa transitions-dev para mejorar el desplegable de cuenta de mi aplicación. Inspecciona disparador, estado y CSS antes de elegir receta. Haz que crezca desde el disparador, conserva teclado y foco y usa variables semánticas sin duplicar un bloque raíz existente. Prueba abrir-cerrar-abrir rápidamente y confirma que se limpia la clase de cierre. Conserva movimiento reducido y temas claro/oscuro. Entrega cambios focalizados y explica hooks conectados; no rediseñes contenido ni componentes ajenos.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Prueba limpieza de cierre y activaciones repetidas o interrumpidas.
  • Comprueba imports de tokens sin duplicados y tiempos leídos coherentes con CSS.
  • Prueba movimiento reducido, foco y ambos temas.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesignLeer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente
Jakubantalik
Repositorio
Jakubantalik/transitions.dev
Archivo del skill
SKILL.md
Licencia
LicenseRef-Transitions-dev
Versión revisada
2026-11-02 · e3aefb554d8f
Resumen editorial de la fuente
Aplica transiciones CSS por componente y tokens semánticos de movimiento.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Requiere un framework JavaScript de animación?

Las recetas usan CSS y pequeños fragmentos de orquestación de estado cuando hacen falta. No exigen un framework general.

¿Qué cambia refine?

Primero propone reemplazos para los valores de movimiento definidos de forma aislada, basándose en su uso semántico. Los valores sin un token de significado equivalente se dejan intactos.

¿Por qué falla la segunda apertura?

La fuente destaca clases de cierre residuales y falta de reflow para repetir. Una captura de la primera apertura no revela esos fallos.

OpenDesign

Mantén juntos tu encargo y tu trabajo de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesignExplorar skills de diseño
Archivo fuente original
https://github.com/Jakubantalik/transitions.dev/blob/e3aefb554d8fd2cb3e91e773e82a0f2d5a4f82a0/skills/transitions-dev/SKILL.md