ui-ux-pro-max

Descripción general

¿Qué es ui-ux-pro-max?

ui-ux-pro-max es una habilidad de inteligencia de diseño UI/UX que te ayuda a tomar mejores decisiones de diseño para interfaces web y mobile. En lugar de adivinar layouts, colores, tipografías o patrones de interacción, la habilidad se basa en un conjunto de datos estructurado de:

• Más de 50 estilos visuales
• 161 paletas de color
• 57 combinaciones tipográficas
• 161 tipos de producto con reglas de razonamiento
• 99 guías de UX
• 25 tipos de gráficos
• Cobertura para 10 stacks: React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui y HTML/CSS

La habilidad está pensada como una capa de decisión de diseño: ayuda a elegir patrones, justificar decisiones de diseño y mantener la calidad de UX mientras diseñas y construyes.

¿Para quién es ui-ux-pro-max?

ui-ux-pro-max es una buena opción para:

• Product designers y diseñadores UI/UX que quieren una guía sistemática para layouts, sistemas de color, tipografía y patrones de interacción.
• Ingenieros frontend que trabajan con React, Next.js, Vue, Svelte, React Native o Tailwind y necesitan sugerencias sensibles al diseño mientras implementan la UI.
• Founders y desarrolladores independientes que no tienen un equipo de diseño dedicado pero quieren una UI/UX moderna y consistente.
• Responsables de design systems que necesitan una capa de referencia para estilos, patrones de gráficos y guías de UX alineadas con múltiples stacks.

Es especialmente útil cuando estás:

• Diseñando o revisando landing pages, dashboards, paneles de administración, apps SaaS, e‑commerce y apps móviles.
• Eligiendo entre estilos (glassmorphism, minimalismo, brutalismo, neumorphism, bento grid, dark mode, etc.).
• Alineando componentes como buttons, modals, navbars, sidebars, cards, tables, forms y charts con buenas prácticas.

¿Qué problemas resuelve ui-ux-pro-max?

ui-ux-pro-max está diseñado para reducir la ambigüedad en diseño y las experiencias de usuario inconsistentes ofreciendo:

• Decisiones de diseño razonadas: Usa el tipo de producto y el contexto para recomendar colores, tipografía y patrones de layout.
• Control de calidad de UX: 99 guías de UX ayudan a detectar problemas de interacción y usabilidad antes de llegar a producción.
• Guía cross‑stack: Conecta decisiones de diseño con consideraciones de implementación concretas en React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui y HTML/CSS.
• Ideación más rápida: Combina rápidamente direcciones de estilo, paletas y combinaciones tipográficas ya comisariadas y compatibles.

Esto hace que ui-ux-pro-max sea útil cuando necesitas claridad sobre cómo diseñar algo y por qué una dirección concreta es mejor para tu tipo de producto y plataforma.

¿Cuándo es ui-ux-pro-max una buena o mala opción?

Buena opción cuando:

• Estás definiendo layouts de página, estructura de navegación o flujos de interacción.
• Estás eligiendo paletas de color, tipografía y sistemas de espaciado para un producto nuevo o existente.
• Estás implementando UI en React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind o shadcn/ui y quieres guía con conciencia de diseño.
• Quieres una forma sistemática de revisar la calidad UI/UX de dashboards, landing pages o pantallas móviles.

No es ideal cuando:

• Solo necesitas ayuda genérica de ingeniería frontend (gestión compleja de estado, integración con backend o devops) sin decisiones de diseño.
• Ya tienes un design system rígido y totalmente definido y solo necesitas refactors a nivel de código.
• Trabajas en interfaces puramente textuales con muy pocos elementos visuales o interactivos.

Si tu necesidad principal es dirección visual, patrones de interacción o control de calidad de UX, ui-ux-pro-max probablemente será un gran complemento.

Cómo usarlo

1. Pasos de instalación

Para instalar ui-ux-pro-max como habilidad en un entorno de agente compatible, usa:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
``

Tras la instalación, localiza los archivos de la habilidad en el directorio `.claude/skills/ui-ux-pro-max` dentro de la estructura del repositorio upstream. Los artefactos clave son:

- `SKILL.md` – definición principal de la habilidad e intención de uso
- `data/` – los datasets de inteligencia de diseño (estilos, paletas, guías de UX, tipos de gráficos, etc.)
- `scripts/` – lógica auxiliar para buscar o interpretar los datos de diseño

Tu entorno puede montar o reflejar estas rutas de forma diferente, pero estas son las piezas base de las que depende la habilidad.

### 2. Archivos que deberías revisar primero
Después de instalar, empieza con estos archivos para entender cómo se comporta ui-ux-pro-max:

#### `SKILL.md`

- Describe el objetivo de alto nivel: inteligencia de diseño UI/UX para web y mobile.
- Explica el alcance: más de 50 estilos, 161 paletas de color, 57 combinaciones tipográficas, 161 tipos de producto, 99 guías de UX, 25 tipos de gráficos.
- Aclara los casos de **When to Apply** y **Must Use** para que la habilidad se invoque solo cuando haya decisiones de diseño que tomar.

Este archivo es tu referencia principal para entender qué prioriza la habilidad y cómo debe activarse.

#### `data/`

- Contiene los datasets estructurados que alimentan ui-ux-pro-max.
- Incluye referencias a tipos de producto, sistemas de color, opciones tipográficas, guías de UX y tipos de gráficos.
- Permite al agente buscar y seleccionar recomendaciones según el contexto (por ejemplo, dashboard SaaS vs. checkout de e‑commerce).

Normalmente no editarás estos archivos durante la instalación; se usan como base de conocimiento.

#### `scripts/`

- Aporta scripts auxiliares que leen e interpretan los datos.
- Permite recomendaciones basadas en prioridades y búsquedas estructuradas (por ejemplo, elegir palette → font pairing → layout pattern).

Si amplías o integras la habilidad en flujos de trabajo personalizados, aquí es donde encontrarás los hooks o la lógica que puedes reutilizar.

### 3. Flujos de trabajo típicos

#### Diseñar una nueva página o pantalla
Usa ui-ux-pro-max al planear:

- **Landing pages** y sitios de marketing
- **Dashboards y paneles de administración**
- **Apps SaaS y flujos de e‑commerce**
- **Pantallas de apps móviles**

Un flujo de trabajo habitual es:

1. Describe el tipo de producto, público objetivo y plataforma (por ejemplo, “B2B SaaS analytics dashboard in React with Tailwind”).
2. Pídele al agente (con ui-ux-pro-max disponible) que proponga:
   - Estructura general de layout y navegación
   - Estilo recomendado (por ejemplo, minimalism, bento grid, dark mode)
   - Paleta de color y combinación tipográfica adecuadas para el tipo de producto
   - Patrones de interacción clave y guías de UX a seguir
3. Haz que la habilidad sugiera patrones a nivel de componente para buttons, modals, forms, tables y charts.
4. Si estás usando React, Next.js, Vue, Svelte, React Native, Tailwind o shadcn/ui, solicita guía enfocada en implementación que respete la dirección de diseño elegida.

#### Mejorar o revisar una UI existente
Cuando ya tienes una UI y quieres mejorarla:

1. Describe el diseño actual, los puntos de dolor y el stack.
2. Usa ui-ux-pro-max para:
   - Mapear los problemas frente a las 99 guías de UX.
   - Recomendar ajustes en espaciado, jerarquía, uso del color y tipografía para ganar claridad.
   - Sugerir tipos de gráficos más adecuados (de entre los 25 patrones de gráficos) para tus datos.
3. Pide un set de recomendaciones antes/después, incluyendo la justificación ligada al tipo de producto y las buenas prácticas.

#### Alinearse con design systems y librerías de componentes
Si trabajas con design systems (por ejemplo, configuraciones Tailwind o shadcn/ui):

- Usa ui-ux-pro-max para decidir **qué patrones** y **combinaciones de tokens** (colores, tamaños de fuente, espaciado) deberías priorizar para un tipo de producto concreto.
- Con la integración shadcn/ui MCP disponible en el entorno más amplio, puedes:
  - Pedir a ui-ux-pro-max que identifique los patrones de componentes adecuados.
  - Usar MCP para buscar ejemplos concretos y código de esos patrones.

Así mantienes alineadas las decisiones de diseño y la elección de componentes sin tener que revisar documentación manualmente.

### 4. Cuándo invocar la habilidad explícitamente
Siguiendo las indicaciones de `SKILL.md` en el repositorio upstream, ui-ux-pro-max es más útil cuando la tarea implica:

- **Estructura de UI** – layout de páginas, jerarquía de contenido, patrones de navegación.
- **Decisiones de diseño visual** – estilos, colores, tipografía, espaciado, sombras, gradientes.
- **Patrones de interacción** – estados hover/focus, estados de carga, gestión de errores, micro‑interacciones.
- **Control de calidad de UX** – identificar puntos de fricción y aplicar guías de UX.

Para tareas de código puramente técnicas, sin implicaciones de diseño, puedes omitir esta habilidad para mantener las respuestas centradas en ingeniería.


## Preguntas frecuentes

### ¿Qué incluye exactamente ui-ux-pro-max?
ui-ux-pro-max se distribuye con una base de conocimiento de diseño comisariada: más de 50 estilos, 161 paletas de color, 57 combinaciones tipográficas, 161 tipos de producto con reglas de razonamiento, 99 guías de UX y 25 tipos de gráficos mapeados en 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS). Todo esto se almacena como datos y scripts que el agente puede consultar para ofrecer recomendaciones con conciencia de diseño.

### ¿En qué se diferencia ui-ux-pro-max de un asistente de código normal?
Los asistentes de código normales se centran en sintaxis, APIs y detalles de implementación. ui-ux-pro-max se centra en **decisiones de diseño y calidad de UX**: qué layout elegir, qué paleta encaja con tu producto, cómo estructurar forms, qué tipo de chart usar y cómo evitar anti‑patrones de UX. Después puede alinear esas decisiones con tu stack frontend.

### ¿Qué stacks tecnológicos soporta ui-ux-pro-max?
La habilidad está diseñada para ofrecer guía de diseño para:

- Frameworks web: **React, Next.js, Vue, Svelte**
- Frameworks mobile y de apps: **SwiftUI, React Native, Flutter**
- Estilos y componentes: **Tailwind, shadcn/ui y HTML/CSS**

Puedes usarlo de forma conceptual con otros stacks, pero estos son los ecosistemas que cubre explícitamente.

### ¿Puedo usar ui-ux-pro-max con Tailwind o shadcn/ui?
Sí. ui-ux-pro-max conoce explícitamente Tailwind y shadcn/ui. Puede ayudarte a elegir patrones de diseño, sistemas de color, espaciado y tipografía que se traduzcan bien a clases utilitarias de Tailwind o a componentes shadcn/ui. Con shadcn/ui MCP disponible, también puede apoyarse en la búsqueda de componentes y ejemplos.

### ¿ui-ux-pro-max genera código completo de UI?
La habilidad está centrada primero en la **inteligencia de diseño**, y la guía de implementación es un segundo paso. Puede ayudarte a:

- Definir la estructura y el comportamiento de los componentes de UI.
- Sugerir cómo implementarlos en React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind o HTML/CSS.

Sin embargo, su valor principal es **elegir y justificar decisiones de diseño**, no solo generar fragmentos de código.

### ¿Cuándo no debería usar ui-ux-pro-max?
Omite esta habilidad cuando tu tarea sea:

- Puramente de backend o infraestructura.
- Un refactor de bajo nivel sin impacto en UI o UX.
- Un problema de algoritmo o de optimización de rendimiento muy acotado.

En esos casos, activar ui-ux-pro-max aporta poco valor porque no hay decisiones de diseño que tomar.

### ¿Cómo puedo empezar a usar ui-ux-pro-max de forma efectiva?
Después de instalar la habilidad:

1. Lee `SKILL.md` para entender su alcance y las recomendaciones de uso.
2. Al crear o actualizar UI, describe claramente al agente el tipo de producto, usuarios objetivo, plataforma y stack tecnológico.
3. Pide salidas estructuradas: propuestas de layout, dirección de estilo, recomendaciones de color y tipografía, checklist de UX y elección de gráficos.
4. Itera: refina el briefing y deja que ui-ux-pro-max vuelva a evaluar la calidad de UX a medida que te acercas a la implementación.

### ¿Dónde puedo ver los datos y scripts subyacentes?
Abre la pestaña Files de la habilidad e inspecciona:

- `SKILL.md` para la definición de alto nivel y las reglas de aplicación.
- `data/` para los datasets de diseño estructurados.
- `scripts/` para la lógica auxiliar que alimenta las recomendaciones.

Estos recursos explican cómo razona ui-ux-pro-max sobre UI/UX, para que puedas confiar en sus sugerencias y adaptarlas a tu proyecto.