ui-ux-suite

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

ESLint para design. Ele encontra a linha exata, o valor errado medido e a correção exata.

O que ele faz · Instalação · Como usar · O que você obtém · Funciona no seu editor · Bom saber

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

O que ele faz

A maioria das revisões de design diz para você melhorar o contraste. Isto diz que .hero-subtitle na linha 14 de src/styles.css é #fbfbfb em #ffffff, que mede 1,03 para 1, e que #767676 passaria. Mesma forma de um erro de linter, aplicado ao design.

Ele lê seu CSS, JSX, HTML e classes Tailwind. Por padrão, nada é executado, nada sai da sua máquina, e nenhuma chave é necessária. Os resultados vêm em dois tipos. Um resultado localizado, que é a maior parte do que você usa, traz três coisas:

• Localizado. O arquivo, a linha e o seletor.
• Medido. O valor errado real, não um adjetivo.
• Corrigido. A mudança exata de before para after, além do critério WCAG ou lei de UX nomeada em que se baseia.

O restante é no nível do projeto, como "5 famílias de fontes, use 1 ou 2". Eles pontuam e nomeiam o problema, mas não há uma única linha para apontar.

Instalação

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

Isso é o Claude Code. Para qualquer outro agente que leia o formato Agent Skills, instale as 14 skills diretamente deste repositório:

npx skills add Aboudjem/ui-ux-suite

A ferramenta de linha de comando não precisa de etapa de instalação: npx ui-ux-suite . a executa.

npm install -D ui-ux-suite

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

Como usar

1. Aponte para um projeto.

npx ui-ux-suite .

Você obtém uma lista classificada de resultados e uma pontuação ponderada de 0 a 10 em 12 dimensões. Sem arquivo de configuração, sem etapa de configuração.

2. Leia um resultado. Esta é a saída real do fixture quebrado incluído neste repositório, que pontua 3,7 de 10 porque é para isso que serve:

- **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)

Execute você mesmo com npx ui-ux-suite test/fixtures/planted-ux-problems a partir de um checkout.

3. Coloque no CI. Escolha a saída e o limite que se encaixam no seu 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 flag está em docs/cli.md.

O que você obtém

• Um relatório classificado em Markdown, JSON, HTML ou SARIF, seja o leitor uma máquina ou uma pessoa.
• Uma pontuação de 0 a 10 em 12 dimensões ponderadas, com acessibilidade tendo o maior peso.
• Um limite de CI, seja uma barra absoluta com --fail-under ou uma linha de base que falha em um novo resultado ou queda de pontuação.
• 14 skills e 16 ferramentas que seu agente pode chamar, então "audite o design deste projeto" funciona no chat.

Funciona no seu editor

Funciona no Claude Code, Cursor, Codex, Copilot, Gemini CLI e 70+ outros agentes através de npx skills add. As skills são em Markdown, então rodam em qualquer modelo que seu editor apontar.

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

Bom saber

[!IMPORTANT] Ele audita, nunca edita. Ele nunca modifica um arquivo de origem no projeto que você aponta, e uma correção é impressa como before para after para você aplicar. Os únicos arquivos que ele escreve são relatórios e arquivos de linha de base, e somente onde você pediu um.

• Nada sai da sua máquina. Apenas built-ins puros do Node, sem chave de API, sem telemetria. A auditoria estática não faz chamada de rede, e o modo profundo só visita a URL que você fornece.
• Fonte estática é o padrão. O modo profundo é opcional, precisa de playwright-core mais @axe-core/playwright, e degrada para resultados de fonte quando eles estão ausentes.
• Os números são testados. npm test executa 356 testes, e o fixture quebrado incluído deve continuar produzindo resultados que carregam um arquivo, uma linha e uma correção.

Saiba mais

• docs/cli.md, cada flag, código de saída e receita
• docs/editors.md, instalação e configuração MCP por editor
• docs/scoring.md, os 12 pesos e como a pontuação é construída
• docs/science.md, os critérios WCAG e leis de UX por trás dos resultados
• docs/faq.md e docs/comparison.md
• CHANGELOG.md, CONTRIBUTING.md, LICENSE

_{MIT · Construído por Adam Boudjemaa}