菜单
Experto en animaciones de alto rendimiento con Anime.js v4.3.5+. Úsalo para crear animaciones modulares, escalonadas (staggers), animaciones SVG (morphing/dashoffset) e interacciones complejas (drag) con foco en rendimiento.
Professional UI/UX design skill with 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines and 25 chart types across 13 tech stacks. Use this skill when the user asks to build, design, create or improve any UI/UX interface, web components, dashboards, landing pages or mobile apps.
NestJS best practices and architecture patterns for building production-ready applications. Use when writing, reviewing, or refactoring NestJS code to ensure proper patterns for modules, dependency injection, security, testing, and performance.
Work with Shopify GraphQL APIs including Admin API and Storefront API. Use this skill for querying and mutating Shopify data, managing products, orders, customers, handling pagination, working with metafields, and understanding rate limits. Covers authentication, queries, mutations, and webhooks.
Build Shopify apps with extensions and embedded experiences. Use this skill for creating new Shopify apps, adding app extensions, building admin interfaces, working with OAuth authentication, managing app configuration, and deploying to the Shopify App Store. Covers Shopify CLI for apps, Polaris UI, and app bridge.
Customize Shopify checkout with UI extensions and functions. Use this skill for building checkout UI extensions, adding custom fields, implementing payment customizations, creating post-purchase experiences, and extending customer accounts. Covers Checkout UI Extensions API and checkout branding.
Master Shopify CLI and developer tools. Use this skill for using Shopify CLI commands, theme development workflow, app development workflow, debugging with Theme Check, using the Liquid language server, and configuring development environments. Covers VS Code extension and development best practices.
| name | animejs-pro |
| description | Experto en animaciones de alto rendimiento con Anime.js v4.3.5+. Úsalo para crear animaciones modulares, escalonadas (staggers), animaciones SVG (morphing/dashoffset) e interacciones complejas (drag) con foco en rendimiento. |
Esta skill transforma a Gemini en un ingeniero de animaciones especializado en Anime.js v4. Cubre el 100% de la API de v4 (incluyendo la Web Animations API, SVG, Staggers y Timelines) y se enfoca en crear código limpio, modular y altamente performante.
stagger() para listas, cuadrículas y animaciones en cadena complejas (rangos, ejes, delays asimétricos).morphTo para cambios de forma, createMotionPath para trayectorias, y manipula el stroke-dashoffset nativamente.spring) para crear interfaces arrastrables o interactivas sin librerías de terceros adicionales.transform y opacity cuando sea posible para evitar reflows.utils.timeline().onComplete para componentes dinámicos.window.matchMedia.IntersectionObserver de serie para diferir animaciones fuera de pantalla (Lazy Loading).Usuario: "Crea una cuadrícula interactiva que se revele de forma escalonada y permita arrastrar sus elementos." Acción del Agente:
stagger(100, { grid: [cols, rows], from: 'center' }).makeDraggable() (de las referencias interactivas) a cada elemento de la cuadrícula, usando un easing spring() al soltarlo.