UI/UX Design

La skill accessibility te ayuda a diseñar, implementar y auditar interfaces accesibles con guía de WCAG 2.2 nivel AA para Web, iOS y Android. Úsala para definir roles de componentes, etiquetas, estados, comportamiento del foco y accessibility traits, con orientación práctica para auditorías UX y revisiones de implementación.

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.

browse es una skill rápida de navegador sin interfaz para QA, dogfooding y automatización del navegador. Úsala para abrir páginas, interactuar con elementos, verificar estados, comparar antes y después de acciones, capturar capturas de pantalla y comprobar diseños responsivos, formularios, subidas, diálogos y estados de elementos. Instala browse cuando necesites evidencia del navegador en lugar de un prompt genérico.

gstack es una skill de IA guiada por navegador para pruebas QA, uso interno, validación de releases y captura de bugs. Abre páginas reales, hace clic en la interfaz, verifica el estado, compara antes y después, prueba diseños responsivos y guarda evidencia respaldada por capturas de pantalla. Es especialmente útil para revisión de diseño de UI y validación de despliegues cuando necesitas resultados fiables del navegador con la skill gstack.

ui-ux-pro-max es una skill integral para diseño UI/UX asistido por IA. Brinda orientación estructurada sobre layouts, estilos, sistemas de color, tipografía y reglas UX para proyectos web y móviles. Ideal para equipos y desarrolladores que buscan decisiones de diseño prácticas en React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter y HTML/CSS. Úsala para planificar, revisar y mejorar interfaces con inteligencia de diseño curada.

vercel-react-native-skills es una skill de React Native y Expo para desarrollo frontend orientado al rendimiento. Úsala para mejorar el renderizado de listas, las animaciones, la navegación, los patrones de UI, la gestión del estado y la configuración de módulos nativos. Incluye reglas prácticas, guía de instalación y patrones de uso para abordar cuellos de botella en apps móviles con menos improvisación.

shape es un skill de diseño UI/UX centrado en la planificación que ejecuta una entrevista estructurada de descubrimiento y crea un brief de diseño antes de programar. Úsalo para aclarar problemas de usuario, restricciones y dirección, y luego entregar el brief a la implementación.

quieter es una habilidad de refinamiento de diseño de UI que reduce la agresividad visual en interfaces muy ruidosas o sobreestimulantes sin perder claridad, jerarquía ni intención de marca. Funciona mejor después de la habilidad principal `$impeccable` y ayuda a los equipos a diagnosticar de dónde viene la intensidad antes de hacer cambios concretos.

La skill harden ayuda a preparar diseños de UI y especificaciones de interfaz para producción al poner a prueba casos límite, estados vacíos, manejo de errores, textos largos, localización, permisos y otros fallos habituales del mundo real. Úsala para harden for UI Design cuando necesites menos sorpresas de maquetación y reglas de comportamiento más completas.

critique te ayuda a revisar interfaces, funciones, páginas o componentes desde una perspectiva UX con puntuación estructurada, pruebas basadas en personas, revisiones heurísticas y feedback accionable. Usa la skill critique cuando necesites una guía repetible de crítica para diseño UI/UX, no comentarios vagos. Es ideal para un uso de crítica enfocado en un área concreta y con contexto claro.

Usa la skill delight para añadir un acabado visual cuidado, microinteracciones y personalidad a los estados de éxito, carga, vacío y onboarding sin perjudicar la usabilidad ni la concentración.

Clarify mejora el copy de UX confuso, los mensajes de error, las etiquetas, los pasos de onboarding y las instrucciones para que las personas usuarias puedan actuar con menos dudas. Resulta útil para documentación técnica, contenido de soporte y equipos de producto que necesitan texto de interfaz más claro. La skill empieza por el contexto, la audiencia y el estado de la persona usuaria antes de reescribir, para que el resultado sea más directo, específico y fácil de usar.

figma-create-new-file crea un nuevo archivo en blanco de Figma Design o un tablero de FigJam en borradores. Úsalo cuando necesites un punto de partida limpio antes de otras acciones en Figma, incluyendo use_figma. Admite design o figjam, nombre de archivo opcional y puede resolver el acceso al plan con whoami cuando hace falta.

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.

La skill layout ayuda a revisar y mejorar la composición de la UI, el espaciado, la jerarquía, la alineación y el ritmo visual. Es más útil en pantallas recargadas o con una estructura débil, y depende de /impeccable para recopilar contexto antes de usarla.

shape es una skill de UX/UI centrada en la planificación: realiza una entrevista de descubrimiento y convierte las respuestas en un brief de diseño antes de escribir código. Úsala con /impeccable para aclarar objetivos de usuario, restricciones, estados y la dirección de implementación en UI Design.

site-architecture ayuda a planificar o reorganizar la jerarquía de páginas de un sitio web, la navegación, los patrones de URL y el enlazado interno. Úsala para crear sitemaps, especificaciones de navegación, mapas de URL y diagramas del sitio en Mermaid o ASCII para planificación de marketing y UI/UX.

La skill onboard ayuda a los equipos de producto a mejorar los flujos de onboarding, los estados vacíos y la UX del primer uso. Guía la instalación y el uso con un flujo de trabajo práctico, la dependencia obligatoria `/frontend-design` y pautas para definir el momento aha, el nivel del usuario y los pasos clave de activación.

distill es una skill de diseño UI pensada para llevar pantallas, componentes y flujos a su objetivo esencial. Úsala para reducir el desorden, el ruido visual y la acumulación de funciones, pero ten en cuenta que distill depende de /frontend-design y, en algunos casos, de /teach-impeccable antes de utilizarse.

La skill critique ayuda a los equipos a realizar revisiones UX estructuradas de páginas, funcionalidades y componentes. Evalúa la jerarquía, la carga cognitiva, las heurísticas y los riesgos según personas, y convierte los hallazgos en mejoras accionables. Se aprovecha mejor después de /frontend-design, con capturas claras, objetivos definidos y contexto de usuario.

clarify ayuda a reescribir textos de UI confusos, mensajes de error, etiquetas e instrucciones para mejorar la UX. Se aprovecha mejor dentro del flujo de pbakaus/impeccable después de /frontend-design, aportando el nivel de la audiencia y el estado mental del usuario para obtener resultados más sólidos.

bolder es una skill de diseño de interfaces que potencia interfaces sosas o demasiado conservadoras con más contraste, jerarquía y personalidad. Úsala después de recopilar contexto con /frontend-design, o con /teach-impeccable cuando no exista contexto de diseño, para obtener mejoras de diseño más claras y accionables sin perder usabilidad.

La skill adapt ayuda a rediseñar una interfaz existente para un nuevo dispositivo o contexto. Conoce el flujo de trabajo de adapt, la dependencia obligatoria de frontend-design, la ruta de instalación y su uso práctico para cambios de diseño UI/UX en móvil, tablet, impresión y experiencias multiplataforma.

La skill onboard ayuda a mejorar los flujos de onboarding, los estados vacíos y la experiencia de primera ejecución para acelerar la activación. Requiere /frontend-design primero, puede necesitar /teach-impeccable y funciona mejor con un objetivo claro, un "aha moment" definido y contexto sobre la experiencia de usuario.