UI Design

ckm:design-system te ayuda a crear tokens en tres capas, especificaciones de componentes, variables CSS, mapeos a Tailwind y slides de marca coherente a partir de una arquitectura clara de tokens.

ckm:brand es una skill de flujo de trabajo de branding para crear, actualizar y revisar guías de marca, mensajes, tono, identidad visual y sincronización de design tokens con scripts y checklists prácticos.

design-system-patterns ayuda a los equipos a diseñar bases de UI escalables con estructuras de tokens, arquitectura de temas y patrones reutilizables de API de componentes para sistemas de diseño y bibliotecas de componentes.

La skill web-component-design ayuda a los equipos a diseñar componentes de UI reutilizables para React, Vue y Svelte, con patrones de API sólidos, guía de accesibilidad y referencias sobre las ventajas y compromisos de estilo para sistemas de diseño.

Usa la skill tailwind-design-system para crear sistemas de diseño con Tailwind CSS v4, incluyendo tokens, theming, variantes, accesibilidad y guía de migración de v3 a v4.

La skill harden ayuda a dejar las UIs frontend listas para producción con un manejo de errores más sólido, estados vacíos y de carga, correcciones de desbordamiento de texto, soporte de i18n y cobertura de casos límite con datos del mundo real.

La skill extract ayuda a los equipos a detectar patrones de UI, tokens y componentes repetidos, y a planificar o ejecutar su consolidación en un sistema de diseño existente con una ruta de migración más segura.

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.

La skill extract ayuda a los equipos a detectar patrones de UI, tokens y componentes repetidos, y a consolidarlos en un sistema de diseño existente con un plan de migración más seguro.

baoyu-article-illustrator ayuda a los agentes a convertir borradores de artículos en prompts de ilustración estructurados, ubicaciones de imágenes y decisiones coherentes de tipo y estilo para explainers, tutoriales, diagramas y publicaciones con varias imágenes.

huggingface-gradio te ayuda a crear y editar interfaces web de Gradio en Python para demos, chatbots y flujos de trabajo de desarrollo frontend. Usa el skill huggingface-gradio para elegir componentes, conectar eventos y definir layouts con menos incertidumbre.

ab-test-store-listing te ayuda a planificar y ejecutar pruebas de la página de producto en App Store para mejorar la conversión. Úsalo para evaluar iconos, capturas y video de vista previa con Apple Product Page Optimization, entender los límites de PPO y preparar el App ID correcto, el tráfico y la hipótesis de prueba antes de empezar.

makepad-2.0-dsl es una skill práctica para escribir, leer y corregir código UI `script_mod!` de Makepad 2.0 DSL. Ayuda a desarrolladores frontend y autores de UI en Rust a usar correctamente la sintaxis con dos puntos, las instancias con nombre, el comportamiento de fusión y los bindings de Rust, con una guía clara de makepad-2.0-dsl para instalación y uso.

makepad-2.0-splash es una skill de Makepad 2.0 Splash para escribir scripts válidos de UI en runtime con `script_mod!{}`, con gestión fiable del estado, conexión de eventos, flujos de hot reload y patrones de app impulsados por Canvas. Usa esta guía de makepad-2.0-splash cuando necesites sintaxis clara, orientación de instalación y uso práctico para tareas de desarrollo frontend.