ui-ux-suite

English · 简体中文 · 日本語 · Español · Français

ESLint para diseño. Encuentra la línea exacta, el valor incorrecto medido y la corrección exacta.

Qué hace · Instalación · Cómo usarlo · Qué obtienes · Funciona en tu editor · Bueno saber

claude plugin marketplace add Aboudjem/10x
claude plugin install ui-ux-suite@10x

Qué hace

La mayoría de las revisiones de diseño te dicen que mejores tu contraste. Esto te dice que .hero-subtitle en la línea 14 de src/styles.css es #fbfbfb en #ffffff, que mide 1.03 a 1, y que #767676 pasaría. Misma forma que un error de linter, aplicado al diseño.

Lee tu CSS, JSX, HTML y clases de Tailwind. Por defecto no se ejecuta nada, nada sale de tu máquina, y nunca se necesita una clave. Los hallazgos vienen en dos tipos. Un hallazgo ubicado, que es la mayoría de lo que aplicas, lleva tres cosas:

• Ubicado. El archivo, la línea y el selector.
• Medido. El valor incorrecto real, no un adjetivo.
• Corregido. El cambio exacto de before a after, más el criterio WCAG o la ley de UX nombrada en la que se basa.

El resto son a nivel de proyecto, como "5 familias de fuentes, usa 1 o 2". Puntúan y nombran el problema, pero no hay una sola línea a la que señalar.

Instalación

claude plugin marketplace add Aboudjem/10x
claude plugin install ui-ux-suite@10x

Eso es Claude Code. Para cualquier otro agente que lea el formato de Agent Skills, instala las 14 habilidades directamente desde este repositorio:

npx skills add Aboudjem/ui-ux-suite

La herramienta de línea de comandos no necesita paso de instalación: npx ui-ux-suite . la ejecuta.

npm install -D ui-ux-suite

{ "scripts": { "design-audit": "ui-ux-suite . --fail-under 7" } }

Cómo usarlo

1. Apúntalo a un proyecto.

npx ui-ux-suite .

Obtienes una lista clasificada de hallazgos y una puntuación ponderada sobre 10 en 12 dimensiones. Sin archivo de configuración, sin paso de configuración.

2. Lee un hallazgo. Esta es la salida real del fixture roto incluido en este repositorio, que puntúa 3.7 sobre 10 porque se supone que debe hacerlo:

- **Where:** `src/styles.css:14` · selector `.hero-subtitle`
- **Measured:** 1.03:1 (APCA Lc 0) (needs 4.5:1)
- **Why:** Text `#fbfbfb` on `#ffffff` measures 1.03:1 (APCA Lc 0). WCAG 2.2 §1.4.3 requires ≥ 4.5:1 for normal text.
- **Fix:** Change `color` on `.hero-subtitle` from `#fbfbfb` to `#767676` (meets 4.5:1 on `#ffffff`), or darken further.
- **Cites:** WCAG 1.4.3 Contrast (Minimum) (AA)

Ejecútalo tú mismo con npx ui-ux-suite test/fixtures/planted-ux-problems desde un checkout.

3. Ponlo en CI. Elige la salida y la puerta que se ajusten a tu pipeline:

npx ui-ux-suite . --json | jq              # machine-readable, banner goes to stderr
npx ui-ux-suite . --html report.html       # standalone HTML report
npx ui-ux-suite . --sarif ui-ux.sarif      # SARIF 2.1.0 for GitHub code scanning
npx ui-ux-suite . --fail-under 7           # exit 1 when the score drops below 7
npx ui-ux-suite . --write-baseline .uiux-baseline.json   # freeze today's debt
npx ui-ux-suite . --baseline .uiux-baseline.json --fail-on-regression
npx ui-ux-suite . --tags dimension:accessibility --exclude-tags severity:nice-to-have

Cada bandera está en docs/cli.md.

Qué obtienes

• Un informe clasificado en Markdown, JSON, HTML o SARIF, según si el lector es una máquina o una persona.
• Una puntuación sobre 10 en 12 dimensiones ponderadas, con la accesibilidad con el mayor peso.
• Una puerta de CI, ya sea una barra absoluta con --fail-under o una línea base que falla ante un nuevo hallazgo o una caída de puntuación.
• 14 habilidades y 16 herramientas que tu agente puede llamar, para que "audita el diseño de este proyecto" funcione en el chat.

Funciona en tu editor

Funciona en Claude Code, Cursor, Codex, Copilot, Gemini CLI y 70+ otros agentes a través de npx skills add. Las habilidades son Markdown, así que se ejecutan en cualquier modelo al que apunte tu editor.

claude mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp
codex mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp

Bueno saber

[!IMPORTANT] Audita, nunca edita. Nunca modifica un archivo fuente en el proyecto al que apuntas, y una corrección se imprime como before a after para que la apliques. Los únicos archivos que escribe son de informe y de línea base, y solo donde lo solicitaste.

• Nada sale de tu máquina. Solo built-ins puros de Node, sin clave de API, sin telemetría. La auditoría estática no hace ninguna llamada de red, y el modo profundo solo visita la URL que le entregas.
• La fuente estática es el valor predeterminado. El modo profundo es opcional, necesita playwright-core más @axe-core/playwright, y degrada a hallazgos de fuente cuando están ausentes.
• Los números están controlados. npm test ejecuta 356 pruebas, y el fixture roto incluido debe seguir produciendo hallazgos que lleven un archivo, una línea y una corrección.

Aprende más

• docs/cli.md, cada bandera, código de salida y receta
• docs/editors.md, instalación y configuración de MCP por editor
• docs/scoring.md, los 12 pesos y cómo se construye la puntuación
• docs/science.md, los criterios WCAG y las leyes de UX detrás de los hallazgos
• docs/faq.md y docs/comparison.md
• CHANGELOG.md, CONTRIBUTING.md, LICENSE

_{MIT · Construido por Adam Boudjemaa}