106.9K+Descargar
Ir a la guía de uso
CSS Animationpor neonwatty

CSS Animation Skill.

Crea demostraciones HTML/CSS basadas en la interfaz de una aplicación real.

  • CSS
  • Fotogramas clave
Descargar OpenDesignVer la guía de uso
Revisión de la fuente · css-animationSKILL.md
Tarea Crea demostraciones HTML/CSS basadas en la interfaz de una aplicación real. Resultados Un briefing estructurado con tokens de diseño, geometría y tiempos de las escenas. Antes de empezar El flujo original presupone Claude-in-Chrome y una app accesible. Otro entorno necesita una vía equivalente de inspección o debe declarar la evidencia que falta.
Resumen editorial · fuente revisada el 2026-11-02 · no es un ejemplo generado

01 Qué hace

Crea demostraciones HTML/CSS basadas en la interfaz de una aplicación real

Investiga una app, escribe un briefing de demostración y crea recorridos HTML/CSS con composiciones separadas de escritorio y móvil y revisión de estados congelados.

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

El enfoque de trabajo

css-animation crea demostraciones en navegador de funciones reales. Primero investiga el lenguaje visual y la composición de la app; después planifica una demostración antes-acción-después o un carrusel de pantallas. El resultado es una animación HTML/CSS autónoma acompañada de un briefing.

La revisión separa la corrección de estados fijos de los tiempos. Congela e inspecciona las composiciones inicial y final y luego reproduce el ciclo entero para ajustar el ritmo. Escritorio y móvil son composiciones separadas: la móvil simplifica la escena y sustituye el cursor por un indicador de toque.

Entregables esperados

  • Un briefing estructurado con tokens de diseño, geometría y tiempos de las escenas.
  • Una demostración de función o carrusel de pantallas en HTML autónomo.
  • Archivos separados de escritorio y móvil cuando se piden ambos.
Ver el brief de ejemplo

Del brief a la revisión

  1. 01
    Investigar la interfaz real

    Inspecciona la app accesible y sus estados relevantes. Registra colores, tipografía, espaciado y geometría real en el tamaño de ventana previsto.

  2. 02
    Planificar y construir la demostración

    Elige una transformación de función o un carrusel multipantalla. Escribe el briefing, calcula posiciones y usa CSS con un pequeño control del ciclo basado en clases.

  3. 03
    Inspeccionar estados fijos y después tiempos

    Congela estados importantes para revisar composición y etiquetas. Cuando sean correctos, reproduce todo el ciclo y ajusta la fase concreta demasiado rápida o lenta.

02 Cuándo usarlo

Cuándo usarlo

El flujo original presupone Claude-in-Chrome y una app accesible. Otro entorno necesita una vía equivalente de inspección o debe declarar la evidencia que falta.

Buen encaje

  • Una función real necesita una demo comercialEl flujo extrae el lenguaje visual de la app en vez de inventar una interfaz genérica.
  • Móvil necesita una explicación centradaLa fuente simplifica expresamente la composición en vez de reducir la escena de escritorio.

Límites que conviene comprobar

  • La investigación presupone herramientas de navegadorEl flujo original presupone Claude-in-Chrome y una app accesible. Otro entorno necesita una vía equivalente de inspección o debe declarar la evidencia que falta.
  • HTML es el artefacto principalEl resultado documentado es una animación web, no un GIF o MP4 codificado.
  • El briefing es un punto de revisiónLa fuente pide aprobar el briefing antes de generar; la autorización actual del usuario y el flujo local siguen determinando cómo se gestiona la revisión.

Aporta estos datos

  • Acceso a la appProporciona la URL de la función o la vista local y acceso a los estados necesarios.
  • Historia de la funciónIdentifica condición inicial, acción y resultado visible útil.
  • Tamaño y destinoEspecifica escritorio, móvil o ambos, y dónde se usarán los archivos.

03 Decisiones importantes

Decisiones importantes

  1. Apariencia propia de la app

    Colores, tipografía y geometría medidos hacen reconocible la demo.

  2. Revisión reproducible

    El briefing registra las decisiones de composición y tiempos junto al HTML.

  3. Problemas de revisión separados

    Los estados congelados revelan defectos de composición; la reproducción muestra problemas de ritmo.

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

Proporciona la URL de la función o la vista local y acceso a los estados necesarios.

Archivo fuente original
https://github.com/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/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 css-animation para demostrar la función de agrupación de mi app de planificación local. Inspecciona la función real antes de preparar una animación antes-acción-después: elementos sin agrupar, acción del usuario y resultado organizado. Respeta colores, tipografía y etiquetas reales. Crea un briefing de escritorio y una composición móvil separada centrada en la acción esencial. Usa un indicador de toque en móvil. Revisa los estados congelados inicial, en proceso y final antes de ajustar el ciclo completo. Entrega el briefing y los HTML e indica qué comportamiento no pudiste inspeccionar.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

  • Compara composiciones congeladas y etiquetas con la app real.
  • Prueba los límites de contenido de escritorio y móvil por separado.
  • Mira el ciclo completo después de corregir estados para evaluar el ritmo.

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
neonwatty
Repositorio
neonwatty/css-animation-skill
Archivo del skill
SKILL.md
Licencia
MIT
Versión revisada
2026-11-02 · 68580a34101c
Resumen editorial de la fuente
Crea demostraciones HTML/CSS basadas en la interfaz de una aplicación real.

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

¿El entregable es un vídeo?

El artefacto principal es HTML/CSS autónomo con JavaScript mínimo. Codificar vídeo queda fuera del resultado predeterminado documentado.

¿Pueden escritorio y móvil compartir una composición escalada?

La fuente recomienda archivos separados y simplificación móvil deliberada, con menos elementos e indicadores táctiles.

¿Y si no se puede inspeccionar la app?

Las instrucciones originales declaran la carencia de herramientas de navegador y permiten continuar desde una descripción del usuario. Ese resultado no debe afirmar fidelidad observada a una app inaccesible.

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/neonwatty/css-animation-skill/blob/68580a34101c83c7a6c4d28005d2d5ea243bcf63/SKILL.md