Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/nexu-io/open-design --skill emilkowalski-motionAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
Emil Kowalski Motion Follow-Up
Use this skill after a design artifact already exists. The goal is to make the interface feel alive without turning it into a motion demo.
Workflow
- Inspect the current HTML, component, or selected page element before adding animation.
- Pick the smallest set of motion moments that clarify state or hierarchy:
- entry reveal for the primary content
- hover / active feedback for important controls
- transition between UI states
- scroll reveal only when it helps the story
- Prefer
transformandopacity. Avoid animating layout properties such astop,left,width, orheight. - Use one motion language across the artifact. Do not mix unrelated easings, durations, or physics.
- Add
prefers-reduced-motionfallbacks for any automatic or scroll-linked motion. - Keep copy, data, and layout intent intact unless the user explicitly asks for a redesign.
Motion Rules
- Default UI transitions should feel quick and useful: 140-220ms for most controls.
- Larger page reveals can be slower, but must not block reading.
- Avoid endless decorative loops unless they communicate status or progress.
- Do not add custom cursors, noisy particle effects, or motion that competes with content.
- Stagger only small groups. Long staggered lists make interfaces feel slow.
Implementation Notes
- For plain HTML, CSS keyframes and small JavaScript observers are enough.
- For React or framework code, use the local stack already present in the repo.
- If GSAP is available and the motion needs sequencing, pair this with
gsap-core,gsap-timeline, orgsap-scrolltrigger. - Always clean up observers, timers, and animation instances.
