How long does the integration take?

Change one base URL in an OpenAI-compatible client, or install the Python or TypeScript SDK; the quickstart routes a first request in a few minutes.

Will this lock us into another vendor?

No. The router is Apache-2.0 open source, your provider keys stay yours, and the API is OpenAI-compatible, so leaving is a change of base URL.

What happens when a provider fails?

The router falls back to the next model your policy allows and records the fallback in the trace, so an outage costs a retry, not an incident.

ui - Prompt - OpenSmartRoute

Name: ui
Author: jpkken1979

Prompt file imported from jpkken1979/OutlookBackup (.claude/commands/ui.md). Copyright stays with the author.

/ui — Orquestador del Stack UI/UX completo

Crea, refactor o audita interfaces web "geniales" usando todo el stack: ui-ux-pro-max (intelligence) + magic-21st MCP (componentes IA) + shadcn-ui-components + Tailwind v4 + Framer Motion + react-doctor.

Ver docs/rules-reference/ui-ux-stack.md para la guia completa del stack.

Modos

Comando	Que hace
`/ui`	Modo interactivo: pregunta que queres construir y arma el plan
`/ui build <descripcion>`	Construye un componente o pagina desde cero
`/ui refactor <archivo>`	Audita y refactoriza UI existente con todo el stack
`/ui review`	Audita la UI de toda la rama con `react-doctor` + a11y + paleta
`/ui search <query>`	Busqueda data-driven en `ui-ux-pro-max` (estilos, paletas, etc.)
`/ui generate <prompt>`	Genera componente via `magic-21st` MCP
`/ui setup`	Verifica que el stack este completo (API key, dependencias, MCPs)

Modo sin argumentos: Analisis interactivo

Cuando pones /ui solo:

1. Escaneo del contexto

- Directorios UI detectados (nexus-app/src/, src/components/, etc.)
- Stack tecnico (React/Vue/Svelte detectado en package.json)
- magic-21st MCP: ¿API key configurada en MAGIC_21ST_API_KEY?
- Framer Motion: ¿instalado en package.json?
- Tailwind: ¿v4 con @theme o v3 con tailwind.config.js?
- ui-ux-pro-max: validar `python3 .agent/skills/ui-ux-pro-max/scripts/search.py "test" --domain ux`

2. Presentacion inteligente

## Contexto detectado

Stack: React 19 + Tailwind v4 + Framer Motion 12.38 + shadcn/ui
magic-21st: ⚠️ Falta MAGIC_21ST_API_KEY (obtener en https://21st.dev/magic/console)
ui-ux-pro-max v2.5.0: ✅ operativo (67 styles, 161 palettes, 25 charts)

## Opciones

[1] Build nuevo componente/pagina (Recomendado)
    -> /ui build "<descripcion>"
[2] Refactor UI existente
    -> /ui refactor <archivo>
[3] Audit completo de la rama
    -> /ui review
[4] Search data-driven (paletas, tipografia, estilos)
    -> /ui search "<query>"
[5] Setup del stack (verificar API keys, dependencias)
    -> /ui setup

Elegi [1-5] o describi directamente que queres construir.

Modo: build

Sintaxis: /ui build <descripcion en lenguaje natural>

Ejemplos:

/ui build landing page para SaaS de gestion de personal
/ui build dashboard con sidebar + 4 stat cards + grafico de lineas
/ui build modal de confirmacion con animacion blur+scale

Flujo

Decidir estilo/paleta/tipografia (data-driven):

py .agent/skills/ui-ux-pro-max/scripts/search.py "<tipo de producto>" --domain product
py .agent/skills/ui-ux-pro-max/scripts/search.py "<estilo deseado>" --domain style
py .agent/skills/ui-ux-pro-max/scripts/search.py "<tipo producto>" --domain color
py .agent/skills/ui-ux-pro-max/scripts/search.py "<tipo producto>" --domain typography

Mostrar al usuario las opciones top-3 y elegir o confirmar.

A11y/UX guidelines aplicables:
```
py .agent/skills/ui-ux-pro-max/scripts/search.py "<contexto>" --domain ux
```
Capturar las priority 1-2 (CRITICAL) como restricciones obligatorias.
Generar componente con magic-21st (si esta configurado):
- Usar el MCP magic-21st pasandole prompt enriquecido: descripcion + paleta elegida + a11y constraints + stack target (React/Tailwind v4)
- Si magic-21st no esta configurado: usar shadcn/ui MCP + componer manualmente segun el data-driven plan
Aplicar Tailwind v4 + Framer Motion:
- Variants de Framer en archivo *Variants.ts separado (regla del proyecto)
- Respetar prefers-reduced-motion
- Touch targets minimo 44x44px (ui-ux-pro-max critical rule)
Validar con react-doctor:
```
# Ejecutar el skill react-doctor sobre el archivo generado
```
Fix automatico de issues mecanicos (a11y labels, memory leaks, paleta inconsistente).
Mostrar al usuario:
- Path del archivo creado
- Score react-doctor antes/despues
- Sugerencias de mejoras opcionales

Modo: refactor

Sintaxis: /ui refactor <archivo>

Flujo:

Leer el archivo objetivo
react-doctor para detectar issues
ui-ux-pro-max --domain ux para guidelines aplicables
Aplicar fixes automaticos + sugerir mejoras estructurales
Diff antes/despues con explicacion de cada cambio

Modo: review

Sintaxis: /ui review

Audita TODA la UI de la rama actual:

git diff main para identificar archivos UI cambiados
Por cada archivo: react-doctor + a11y check + paleta consistency
Reporte agrupado por severidad (critical/high/medium/low)
Sugerir batch fix con /jpread si hay muchos issues mecanicos

Modo: search

Sintaxis: /ui search <query>

Wrapper rapido de ui-ux-pro-max:

py .agent/skills/ui-ux-pro-max/scripts/search.py "<query>" --domain <auto-detect>

Si el query menciona "color" o "palette" -> --domain color Si menciona "font" o "typography" -> --domain typography Si menciona "landing", "saas", "ecommerce" -> --domain product Si menciona "chart" o "graph" -> --domain chart Si menciona "a11y", "accessibility", "touch" -> --domain ux Default: --domain style

Modo: generate

Sintaxis: /ui generate <prompt>

Llamada directa al MCP magic-21st:

Requiere MAGIC_21ST_API_KEY configurada
Pasa el prompt textual al MCP
Devuelve el componente generado en el archivo destino que elija el usuario

Si falta la API key, mostrar:

⚠️ magic-21st no esta configurado.
Obtener API key: https://21st.dev/magic/console
Setear: MAGIC_21ST_API_KEY=... en .env del proyecto
Recargar: /reload-plugins

Modo: setup

Sintaxis: /ui setup

Verifica el stack:

Check	OK?
`ui-ux-pro-max` skill instalado y v2.5.0+	`ls .agent/skills/ui-ux-pro-max/data/styles.csv`
`magic-21st` MCP en `.mcp.json`	`grep '"magic-21st"' .mcp.json`
`MAGIC_21ST_API_KEY` en env o .env	`echo $MAGIC_21ST_API_KEY`
Framer Motion en package.json	`grep '"framer-motion"' package.json`
Tailwind v4 con @theme	`grep '@theme' nexus-app/src/index.css`
Skills relacionados	`ls .agent/skills/

Reportar todos los checks con OK/MISSING y dar el comando exacto para arreglarlos.

Reglas de oro (heredadas del stack)

A11y first: contrast 4.5:1, touch 44x44px, focus rings visibles
Framer variants fuera del componente (*Variants.ts)
prefers-reduced-motion siempre
Tailwind v4 con @theme en index.css (sin tailwind.config.js)
No inventar paletas: 161 curadas en ui-ux-pro-max
No improvisar tipografia: 57 pairings curadas con Google Fonts imports

Integracion con otros comandos

Despues de `/ui`	Comando sugerido
Componente creado y se ve bien	`/finalize` para commit+push
Detectaste issues complejos	`/jpread` (react-doctor full)
Necesitas componer multiples componentes	`/sdd` (spec-driven 9 fases)
Refactor masivo	`/ralph` (loop hasta completar)

Ejemplos completos

/ui build landing page para SaaS de gestion de personal japones (派遣)
    -> ui-ux-pro-max sugiere: product=saas, style=minimalism+bento,
       color=palette#42 (azul corp con acentos rojos),
       fonts=Inter + JetBrains Mono
    -> magic-21st genera el hero + features + pricing
    -> react-doctor: a11y 95/100, sin memory leaks
    -> Archivo: src/pages/Landing.tsx + LandingVariants.ts

/ui search "dark mode dashboard"
    -> --domain style
    -> 5 estilos top: glassmorphism-dark, brutalism-dark, minimalism-dark, ...
    -> 5 paletas: zinc-950, slate-950, neutral-950, ...

Fuente

Regla maestra: docs/rules-reference/ui-ux-stack.md
Skill data: .agent/skills/ui-ux-pro-max/
MCP: magic-21st en .mcp.json

Install ui and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

# /ui — Orquestador del Stack UI/UX completo > Crea, refactor o audita interfaces web "geniales" usando todo el stack: > `ui-ux-pro-max` (intelligence) + `magic-21st` MCP (componentes IA) + > `shadcn-ui-components` + Tailwind v4 + Framer Motion + react-doctor. Ver `docs/rules-reference/ui-ux-stack.md` para la guia completa del stack. ## Modos | Comando | Que hace | |---|---| | `/ui` | Modo interactivo: pregunta que queres construir y arma el plan | | `/ui build <descripcion>` | Construye un componente o pagina desde cero | | `/ui refactor <archivo>` | Audita y refactoriza UI existente con todo el stack | | `/ui review` | Audita la UI de toda la rama con `react-doctor` + a11y + paleta | | `/ui search <query>` | Busqueda data-driven en `ui-ux-pro-max` (estilos, paletas, etc.) | | `/ui generate <prompt>` | Genera componente via `magic-21st` MCP | | `/ui setup` | Verifica que el stack este completo (API key, dependencias, MCPs) | ## Modo sin argumentos: Analisis interactivo Cuando pones `/ui` solo: ### 1. Escaneo del contexto ``` - Directorios UI detectados (nexus-app/src/, src/components/, etc.) - Stack tecnico (React/Vue/Svelte detectado en package.json) - magic-21st MCP: ¿API key configurada en MAGIC_21ST_API_KEY? - Framer Motion: ¿instalado en package.json? - Tailwind: ¿v4 con @theme o v3 con tailwind.config.js? - ui-ux-pro-max: validar `python3 .agent/skills/ui-ux-pro-max/scripts/search.py "test" --domain ux` ``` ### 2. Presentacion inteligente ``` ## Contexto detectado Stack: React 19 + Tailwind v4 + Framer Motion 12.38 + shadcn/ui magic-21st: ⚠️ Falta MAGIC_21ST_API_KEY (obtener en https://21st.dev/magic/console) ui-ux-pro-max v2.5.0: ✅ operativo (67 styles, 161 palettes, 25 charts) ## Opciones [1] Build nuevo componente/pagina (Recomendado) -> /ui build "<descripcion>" [2] Refactor UI existente -> /ui refactor <archivo> [3] Audit completo de la rama -> /ui review [4] Search data-driven (paletas, tipografia, estilos) -> /ui search "<query>" [5] Setup del stack (verificar API keys, dependencias) -> /ui setup Elegi [1-5] o describi directamente que queres construir. ``` ## Modo: build **Sintaxis**: `/ui build <descripcion en lenguaje natural>` Ejemplos: - `/ui build landing page para SaaS de gestion de personal` - `/ui build dashboard con sidebar + 4 stat cards + grafico de lineas` - `/ui build modal de confirmacion con animacion blur+scale` ### Flujo 1. **Decidir estilo/paleta/tipografia** (data-driven): ```bash py .agent/skills/ui-ux-pro-max/scripts/search.py "<tipo de producto>" --domain product py .agent/skills/ui-ux-pro-max/scripts/search.py "<estilo deseado>" --domain style py .agent/skills/ui-ux-pro-max/scripts/search.py "<tipo producto>" --domain color py .agent/skills/ui-ux-pro-max/scripts/search.py "<tipo producto>" --domain typography ``` Mostrar al usuario las opciones top-3 y elegir o confirmar. 2. **A11y/UX guidelines aplicables**: ```bash py .agent/skills/ui-ux-pro-max/scripts/search.py "<contexto>" --domain ux ``` Capturar las priority 1-2 (CRITICAL) como restricciones obligatorias. 3. **Generar componente con magic-21st** (si esta configurado): - Usar el MCP `magic-21st` pasandole prompt enriquecido: descripcion + paleta elegida + a11y constraints + stack target (React/Tailwind v4) - Si magic-21st no esta configurado: usar shadcn/ui MCP + componer manualmente segun el data-driven plan 4. **Aplicar Tailwind v4 + Framer Motion**: - Variants de Framer en archivo `*Variants.ts` separado (regla del proyecto) - Respetar `prefers-reduced-motion` - Touch targets minimo 44x44px (ui-ux-pro-max critical rule) 5. **Validar con react-doctor**: ```bash # Ejecutar el skill react-doctor sobre el archivo generado ``` Fix automatico de issues mecanicos (a11y labels, memory leaks, paleta inconsistente). 6. **Mostrar al usuario**: - Path del archivo creado - Score react-doctor antes/despues - Sugerencias de mejoras opcionales ## Modo: refactor **Sintaxis**: `/ui refactor <archivo>` Flujo: 1. Leer el archivo objetivo 2. `react-doctor` para detectar issues 3. `ui-ux-pro-max --domain ux` para guidelines aplicables 4. Aplicar fixes automaticos + sugerir mejoras estructurales 5. Diff antes/despues con explicacion de cada cambio ## Modo: review **Sintaxis**: `/ui review` Audita TODA la UI de la rama actual: 1. `git diff main` para identificar archivos UI cambiados 2. Por cada archivo: `react-doctor` + a11y check + paleta consistency 3. Reporte agrupado por severidad (critical/high/medium/low) 4. Sugerir batch fix con `/jpread` si hay muchos issues mecanicos ## Modo: search **Sintaxis**: `/ui search <query>` Wrapper rapido de `ui-ux-pro-max`: ```bash py .agent/skills/ui-ux-pro-max/scripts/search.py "<query>" --domain <auto-detect> ``` Si el query menciona "color" o "palette" -> `--domain color` Si menciona "font" o "typography" -> `--domain typography` Si menciona "landing", "saas", "ecommerce" -> `--domain product` Si menciona "chart" o "graph" -> `--domain chart` Si menciona "a11y", "accessibility", "touch" -> `--domain ux` Default: `--domain style` ## Modo: generate **Sintaxis**: `/ui generate <prompt>` Llamada directa al MCP `magic-21st`: - Requiere `MAGIC_21ST_API_KEY` configurada - Pasa el prompt textual al MCP - Devuelve el componente generado en el archivo destino que elija el usuario Si falta la API key, mostrar: ``` ⚠️ magic-21st no esta configurado. Obtener API key: https://21st.dev/magic/console Setear: MAGIC_21ST_API_KEY=... en .env del proyecto Recargar: /reload-plugins ``` ## Modo: setup **Sintaxis**: `/ui setup` Verifica el stack: | Check | OK? | |---|---| | `ui-ux-pro-max` skill instalado y v2.5.0+ | `ls .agent/skills/ui-ux-pro-max/data/styles.csv` | | `magic-21st` MCP en `.mcp.json` | `grep '"magic-21st"' .mcp.json` | | `MAGIC_21ST_API_KEY` en env o .env | `echo $MAGIC_21ST_API_KEY` | | Framer Motion en package.json | `grep '"framer-motion"' package.json` | | Tailwind v4 con @theme | `grep '@theme' nexus-app/src/index.css` | | Skills relacionados | `ls .agent/skills/ | grep -iE "ui-ux\|shadcn\|tailwind"` | Reportar todos los checks con OK/MISSING y dar el comando exacto para arreglarlos. ## Reglas de oro (heredadas del stack) - A11y first: contrast 4.5:1, touch 44x44px, focus rings visibles - Framer variants fuera del componente (`*Variants.ts`) - `prefers-reduced-motion` siempre - Tailwind v4 con `@theme` en `index.css` (sin `tailwind.config.js`) - No inventar paletas: 161 curadas en `ui-ux-pro-max` - No improvisar tipografia: 57 pairings curadas con Google Fonts imports ## Integracion con otros comandos | Despues de `/ui` | Comando sugerido | |---|---| | Componente creado y se ve bien | `/finalize` para commit+push | | Detectaste issues complejos | `/jpread` (react-doctor full) | | Necesitas componer multiples componentes | `/sdd` (spec-driven 9 fases) | | Refactor masivo | `/ralph` (loop hasta completar) | ## Ejemplos completos ``` /ui build landing page para SaaS de gestion de personal japones (派遣) -> ui-ux-pro-max sugiere: product=saas, style=minimalism+bento, color=palette#42 (azul corp con acentos rojos), fonts=Inter + JetBrains Mono -> magic-21st genera el hero + features + pricing -> react-doctor: a11y 95/100, sin memory leaks -> Archivo: src/pages/Landing.tsx + LandingVariants.ts ``` ``` /ui search "dark mode dashboard" -> --domain style -> 5 estilos top: glassmorphism-dark, brutalism-dark, minimalism-dark, ... -> 5 paletas: zinc-950, slate-950, neutral-950, ... ``` ## Fuente - Regla maestra: `docs/rules-reference/ui-ux-stack.md` - Skill data: `.agent/skills/ui-ux-pro-max/` - MCP: `magic-21st` en `.mcp.json`

{ "prompt": "# /ui — Orquestador del Stack UI/UX completo\n\n> Crea, refactor o audita interfaces web \"geniales\" usando todo el stack:\n> `ui-ux-pro-max` (intelligence) + `magic-21st` MCP (componentes IA) +\n> `shadcn-ui-components` + Tailwind v4 + Framer Motion + react-doctor.\n\nVer `docs/rules-reference/ui-ux-stack.md` para la guia completa del stack.\n\n## Modos\n\n| Comando | Que hace |\n|---|---|\n| `/ui` | Modo interactivo: pregunta que queres construir y arma el plan |\n| `/ui build <descripcion>` | Construye un componente o pagina desde cero |\n| `/ui refactor <archivo>` | Audita y refactoriza UI existente con todo el stack |\n| `/ui review` | Audita la UI de toda la rama con `react-doctor` + a11y + paleta |\n| `/ui search <query>` | Busqueda data-driven en `ui-ux-pro-max` (estilos, paletas, etc.) |\n| `/ui generate <prompt>` | Genera componente via `magic-21st` MCP |\n| `/ui setup` | Verifica que el stack este completo (API key, dependencias, MCPs) |\n\n## Modo sin argumentos: Analisis interactivo\n\nCuando pones `/ui` solo:\n\n### 1. Escaneo del contexto\n\n```\n- Directorios UI detectados (nexus-app/src/, src/components/, etc.)\n- Stack tecnico (React/Vue/Svelte detectado en package.json)\n- magic-21st MCP: ¿API key configurada en MAGIC_21ST_API_KEY?\n- Framer Motion: ¿instalado en package.json?\n- Tailwind: ¿v4 con @theme o v3 con tailwind.config.js?\n- ui-ux-pro-max: validar `python3 .agent/skills/ui-ux-pro-max/scripts/search.py \"test\" --domain ux`\n```\n\n### 2. Presentacion inteligente\n\n```\n## Contexto detectado\n\nStack: React 19 + Tailwind v4 + Framer Motion 12.38 + shadcn/ui\nmagic-21st: ⚠️ Falta MAGIC_21ST_API_KEY (obtener en https://21st.dev/magic/console)\nui-ux-pro-max v2.5.0: ✅ operativo (67 styles, 161 palettes, 25 charts)\n\n## Opciones\n\n[1] Build nuevo componente/pagina (Recomendado)\n -> /ui build \"<descripcion>\"\n[2] Refactor UI existente\n -> /ui refactor <archivo>\n[3] Audit completo de la rama\n -> /ui review\n[4] Search data-driven (paletas, tipografia, estilos)\n -> /ui search \"<query>\"\n[5] Setup del stack (verificar API keys, dependencias)\n -> /ui setup\n\nElegi [1-5] o describi directamente que queres construir.\n```\n\n## Modo: build\n\n**Sintaxis**: `/ui build <descripcion en lenguaje natural>`\n\nEjemplos:\n- `/ui build landing page para SaaS de gestion de personal`\n- `/ui build dashboard con sidebar + 4 stat cards + grafico de lineas`\n- `/ui build modal de confirmacion con animacion blur+scale`\n\n### Flujo\n\n1. **Decidir estilo/paleta/tipografia** (data-driven):\n ```bash\n py .agent/skills/ui-ux-pro-max/scripts/search.py \"<tipo de producto>\" --domain product\n py .agent/skills/ui-ux-pro-max/scripts/search.py \"<estilo deseado>\" --domain style\n py .agent/skills/ui-ux-pro-max/scripts/search.py \"<tipo producto>\" --domain color\n py .agent/skills/ui-ux-pro-max/scripts/search.py \"<tipo producto>\" --domain typography\n ```\n Mostrar al usuario las opciones top-3 y elegir o confirmar.\n\n2. **A11y/UX guidelines aplicables**:\n ```bash\n py .agent/skills/ui-ux-pro-max/scripts/search.py \"<contexto>\" --domain ux\n ```\n Capturar las priority 1-2 (CRITICAL) como restricciones obligatorias.\n\n3. **Generar componente con magic-21st** (si esta configurado):\n - Usar el MCP `magic-21st` pasandole prompt enriquecido: descripcion + paleta elegida + a11y constraints + stack target (React/Tailwind v4)\n - Si magic-21st no esta configurado: usar shadcn/ui MCP + componer manualmente segun el data-driven plan\n\n4. **Aplicar Tailwind v4 + Framer Motion**:\n - Variants de Framer en archivo `*Variants.ts` separado (regla del proyecto)\n - Respetar `prefers-reduced-motion`\n - Touch targets minimo 44x44px (ui-ux-pro-max critical rule)\n\n5. **Validar con react-doctor**:\n ```bash\n # Ejecutar el skill react-doctor sobre el archivo generado\n ```\n Fix automatico de issues mecanicos (a11y labels, memory leaks, paleta inconsistente).\n\n6. **Mostrar al usuario**:\n - Path del archivo creado\n - Score react-doctor antes/despues\n - Sugerencias de mejoras opcionales\n\n## Modo: refactor\n\n**Sintaxis**: `/ui refactor <archivo>`\n\nFlujo:\n1. Leer el archivo objetivo\n2. `react-doctor` para detectar issues\n3. `ui-ux-pro-max --domain ux` para guidelines aplicables\n4. Aplicar fixes automaticos + sugerir mejoras estructurales\n5. Diff antes/despues con explicacion de cada cambio\n\n## Modo: review\n\n**Sintaxis**: `/ui review`\n\nAudita TODA la UI de la rama actual:\n1. `git diff main` para identificar archivos UI cambiados\n2. Por cada archivo: `react-doctor` + a11y check + paleta consistency\n3. Reporte agrupado por severidad (critical/high/medium/low)\n4. Sugerir batch fix con `/jpread` si hay muchos issues mecanicos\n\n## Modo: search\n\n**Sintaxis**: `/ui search <query>`\n\nWrapper rapido de `ui-ux-pro-max`:\n```bash\npy .agent/skills/ui-ux-pro-max/scripts/search.py \"<query>\" --domain <auto-detect>\n```\n\nSi el query menciona \"color\" o \"palette\" -> `--domain color`\nSi menciona \"font\" o \"typography\" -> `--domain typography`\nSi menciona \"landing\", \"saas\", \"ecommerce\" -> `--domain product`\nSi menciona \"chart\" o \"graph\" -> `--domain chart`\nSi menciona \"a11y\", \"accessibility\", \"touch\" -> `--domain ux`\nDefault: `--domain style`\n\n## Modo: generate\n\n**Sintaxis**: `/ui generate <prompt>`\n\nLlamada directa al MCP `magic-21st`:\n- Requiere `MAGIC_21ST_API_KEY` configurada\n- Pasa el prompt textual al MCP\n- Devuelve el componente generado en el archivo destino que elija el usuario\n\nSi falta la API key, mostrar:\n```\n⚠️ magic-21st no esta configurado.\nObtener API key: https://21st.dev/magic/console\nSetear: MAGIC_21ST_API_KEY=... en .env del proyecto\nRecargar: /reload-plugins\n```\n\n## Modo: setup\n\n**Sintaxis**: `/ui setup`\n\nVerifica el stack:\n\n| Check | OK? |\n|---|---|\n| `ui-ux-pro-max` skill instalado y v2.5.0+ | `ls .agent/skills/ui-ux-pro-max/data/styles.csv` |\n| `magic-21st` MCP en `.mcp.json` | `grep '\"magic-21st\"' .mcp.json` |\n| `MAGIC_21ST_API_KEY` en env o .env | `echo $MAGIC_21ST_API_KEY` |\n| Framer Motion en package.json | `grep '\"framer-motion\"' package.json` |\n| Tailwind v4 con @theme | `grep '@theme' nexus-app/src/index.css` |\n| Skills relacionados | `ls .agent/skills/ | grep -iE \"ui-ux\\|shadcn\\|tailwind\"` |\n\nReportar todos los checks con OK/MISSING y dar el comando exacto para arreglarlos.\n\n## Reglas de oro (heredadas del stack)\n\n- A11y first: contrast 4.5:1, touch 44x44px, focus rings visibles\n- Framer variants fuera del componente (`*Variants.ts`)\n- `prefers-reduced-motion` siempre\n- Tailwind v4 con `@theme` en `index.css` (sin `tailwind.config.js`)\n- No inventar paletas: 161 curadas en `ui-ux-pro-max`\n- No improvisar tipografia: 57 pairings curadas con Google Fonts imports\n\n## Integracion con otros comandos\n\n| Despues de `/ui` | Comando sugerido |\n|---|---|\n| Componente creado y se ve bien | `/finalize` para commit+push |\n| Detectaste issues complejos | `/jpread` (react-doctor full) |\n| Necesitas componer multiples componentes | `/sdd` (spec-driven 9 fases) |\n| Refactor masivo | `/ralph` (loop hasta completar) |\n\n## Ejemplos completos\n\n```\n/ui build landing page para SaaS de gestion de personal japones (派遣)\n -> ui-ux-pro-max sugiere: product=saas, style=minimalism+bento,\n color=palette#42 (azul corp con acentos rojos),\n fonts=Inter + JetBrains Mono\n -> magic-21st genera el hero + features + pricing\n -> react-doctor: a11y 95/100, sin memory leaks\n -> Archivo: src/pages/Landing.tsx + LandingVariants.ts\n```\n\n```\n/ui search \"dark mode dashboard\"\n -> --domain style\n -> 5 estilos top: glassmorphism-dark, brutalism-dark, minimalism-dark, ...\n -> 5 paletas: zinc-950, slate-950, neutral-950, ...\n```\n\n## Fuente\n\n- Regla maestra: `docs/rules-reference/ui-ux-stack.md`\n- Skill data: `.agent/skills/ui-ux-pro-max/`\n- MCP: `magic-21st` en `.mcp.json`", "variables": [], "notes": "Ver `docs/rules-reference/ui-ux-stack.md` para la guia completa del stack.", "metadata": { "source": { "provider": "github-claude-commands", "repository": "https://github.com/jpkken1979/OutlookBackup", "path": ".claude/commands/ui.md", "ref": "fd527b5b8fc9fe4a87854c730bc58abc37b66695", "url": "https://github.com/jpkken1979/OutlookBackup/blob/fd527b5b8fc9fe4a87854c730bc58abc37b66695/.claude/commands/ui.md", "key": "jpkken1979/OutlookBackup/.claude/commands/ui.md" } } }

ui

About