Prototypes

ui-demo te ayuda a grabar vídeos de demostración de aplicaciones web con un acabado profesional usando Playwright, movimiento visible del cursor y un ritmo natural. Usa la skill ui-demo para recorridos guiados, clips de onboarding, demos de funcionalidades y grabaciones estilo tutorial. Sigue el flujo descubrir, ensayar y luego grabar para obtener resultados fiables, especialmente en prototipos e interfaces que cambian rápido.

frontend-slides te ayuda a crear presentaciones HTML con muchas animaciones desde cero o convirtiendo archivos PowerPoint. Usa la skill frontend-slides para charlas, pitch decks, talleres, demos internas y frontend-slides para diseño de UI cuando busques exploración visual, salida en navegador sin dependencias y diapositivas que encajen en una sola ventana de visualización.

algorithmic-art ayuda a crear arte generativo original en p5.js con un flujo de dos pasos: definir una filosofía algorítmica y luego generar archivos .html y .js ejecutables con aleatoriedad con semilla, controles de parámetros y un visor interactivo.

ux-designer es una skill de diseño UX estructurada para research, accesibilidad, arquitectura de la información, flujos de interacción, orientación para wireframes y UX copy. Ayuda a los equipos a convertir ideas de producto todavía vagas en decisiones de diseño más claras y basadas en criterios mediante `AGENTS.md` y archivos de reglas enfocados.

La skill prototype te ayuda a crear código desechable que responda una pregunta concreta antes de comprometerte con una implementación real. Úsala para probar lógica, transiciones de estado, forma de datos o la dirección de una UI con un prototipo ejecutable que siga las convenciones del repositorio anfitrión. Es ideal cuando necesitas una guía rápida de prototipado, no una funcionalidad final.

Usa figma para extraer contexto de diseño, capturas, variables y recursos desde el servidor MCP de Figma, y luego traducir los nodos de Figma en decisiones de UI listas para implementar. Este skill de figma es ideal cuando tienes una URL de Figma o un ID de nodo y necesitas un uso preciso de figma para trabajo de diseño a código, configuración o diagnóstico.

brandkit es una skill premium de generación de imágenes para brand kits, pensada para trabajos de branding, incluidos sistemas de logotipo, decks de identidad, tableros de guías visuales y presentaciones de marca con dirección artística. Está diseñada para lograr resultados cohesionados y con acabado de estudio en startups, herramientas para desarrolladores, seguridad, videojuegos, apps de consumo y conceptos de lujo. Usa brandkit cuando quieras construir un mundo de marca pulido en lugar de un moodboard genérico de IA.

shader-dev es un skill práctico de shaders GLSL para efectos visuales en tiempo real al estilo ShaderToy. Usa el skill shader-dev para crear o depurar ray marching, escenas SDF, iluminación, partículas, movimiento de fluidos, postprocesado y shader-dev para diseño de interfaces, con menos conjeturas que con un prompt genérico.

Usa la skill de remotion para convertir pantallas de proyectos de Stitch en videos tutoriales pulidos con transiciones, zooms y superposiciones de texto. Incluye pasos de instalación, archivos de ejemplo y una guía repetible de remotion para edición de video y composiciones listas para renderizar.

pol-probe-advisor ayuda a los product managers a elegir la prueba de Proof of Life (PoL) adecuada para una hipótesis, un riesgo y un nivel de recursos concretos. Usa la skill pol-probe-advisor para evitar desarrollar de más y ajustar el método de validación más barato y útil al objetivo real de aprendizaje. Es ideal para pol-probe-advisor en Product Management, con una guía práctica y orientación de uso de pol-probe-advisor.

La skill de storyboard convierte una idea de producto en una narrativa de seis viñetas que va del problema a la solución. Úsala para alinear a las partes interesadas, revisar conceptos, preparar demos y hacer storyboard para Prototypes cuando necesites una forma rápida y centrada en las personas de comprobar si una idea conecta.

pol-probe te ayuda a definir una sonda de Proof of Life para probar una hipótesis arriesgada con poco costo antes de construir un producto real. Usa el skill pol-probe para reducir el teatro de prototipos, fijar criterios de éxito exigentes, elegir el tipo de sonda adecuado y planear cómo desecharla después de aprender.

hyperframes-registry te ayuda a instalar y conectar elementos reutilizables del registro de HyperFrames con menos incertidumbre. Úsala para ejecutar `hyperframes add`, distinguir entre bloques y componentes, fusionar fragmentos, conectar bloques en `index.html` y seguir las asignaciones de rutas de `hyperframes.json` para implementar diseños y descubrir el registro.

gsap es una referencia práctica de animación para composiciones de HyperFrames. Te ayuda a elegir entre gsap.to(), from(), fromTo() y gsap.timeline(), y luego aplicar las vars, easing, stagger, transforms y patrones de rendimiento adecuados. Usa esta guía de gsap cuando necesites movimiento listo para implementar en animaciones de entrada, transiciones y efectos de diseño reutilizables.

excalidraw-diagram crea diagramas en JSON de Excalidraw que argumentan de forma visual, no solo muestran cajas y flechas. Úsalo para flujos de trabajo, arquitectura, flujos secuenciales, rutas de decisión y diagramas de conceptos donde importan la estructura, la legibilidad y las relaciones reales. Incluye guía de instalación, comprobaciones orientadas al renderizado y un flujo de trabajo práctico para mejorar el diagramado.

infocard te ayuda a crear tarjetas informativas de estilo editorial en Markdown, incrustando HTML y CSS directamente en la página. Es útil para resúmenes, instantáneas de temas, paneles destacados, tarjetas de eventos, bloques comparativos y otros contenidos pensados para UI Design que deben verse diseñados a propósito. No sirve para diagramas ni visualización de datos; usa mejor una skill específica para diagramas o gráficos.

canvas crea diagramas JSON Canvas con posicionamiento libre y coordenadas x/y explícitas. Úsalo para mapas mentales, grafos de conocimiento, mapas conceptuales, tableros de planificación y otros flujos de trabajo de diagramación en los que la disposición espacial importa más que la secuencia. No es la opción adecuada para flujos ni para gráficos de datos. Usa la skill de canvas cuando necesites nodos editables, enlaces y una estructura de diseño clara.

imagegen-frontend-mobile es una skill de dirección de imagen para pantallas premium de apps móviles y flujos de varias pantallas. Ayuda a crear visuales nativos de app para iOS, Android y conceptos multiplataforma, con jerarquía limpia, texto legible, color controlado y mockups sutiles de teléfono. Úsala para generación de imágenes, no para código, sitios web ni UI de escritorio.

gpt-taste es una skill centrada en diseño para crear páginas de interfaz pulidas con dirección de arte editorial, disciplina en el uso del espacio y motion con GSAP. Usa la skill gpt-taste para páginas de marketing, landing pages y sitios de showcase cuando busques más variedad de composición, mejor control tipográfico y menos patrones frontend genéricos. La guía incluye notas de instalación y uso para una implementación práctica.

La skill hand-drawn-diagrams convierte indicaciones en lenguaje natural en diagramas, flujos, explicaciones, wireframes y mockups de página con estilo dibujado a mano en Excalidraw. Valida la salida y puede devolver una URL de edición junto con imágenes exportables. Es ideal para diagramar rápido cuando quieres un resultado tipo boceto, no arte vectorial pulido.

world-builder es una skill centrada en el diseño para crear y gestionar zonas generativas de juego en el overworld al estilo Pokémon de Dorothy. Usa la skill world-builder para convertir un tema, una premisa o una idea de ubicación en un mapa jugable con atmósfera, disposición, terreno, colocación de NPC y lógica espacial para Design Implementation.

gif-sticker-maker convierte fotos en 4 stickers GIF animados con estilo Funko Pop / Pop Mart usando MiniMax Image Generation, MiniMax Video Generation y ffmpeg. Esta skill de gif-sticker-maker cubre los requisitos de instalación, plantillas de prompts, pies de foto y el flujo completo de imagen a GIF.

figma-create-new-file crea un nuevo archivo en blanco de Figma o FigJam en borradores, con valores predeterminados para el tipo de editor y el nombre del archivo. Este skill figma-create-new-file ayuda en la implementación de diseño, el prototipado rápido y a empezar con un lienzo nuevo antes de usar use_figma. También resuelve planKey mediante whoami cuando es necesario.

figma-use es la skill requerida para hacer llamadas seguras a `use_figma` en flujos de trabajo de Figma Plugin API. Usa la skill figma-use para instalarla y cargarla antes de escribir, actualizar, inspeccionar o estructurar archivos de Figma con JavaScript. Resulta especialmente útil para implementación de diseño, trabajo con componentes, variables, auto layout y lectura programática de archivos.