@onovoprogramador/onp-ui-ux

UI/UX universal com prova mecânica. As skills de design do mercado dão conselhos; nenhuma verifica o que foi produzido. O onp-ui-ux fecha o ciclo:

1. Skill de design (para agentes de código como o Claude Code): direção intencional anti-genérico, tokens antes de pixels, paletas com contraste pré-validado, checklist MUST/SHOULD/NEVER.
2. Motor de validação estática em Python puro (stdlib, 3.8+): analisa HTML, CSS, JSX/TSX, Vue, Svelte e styled-components sem navegador e sem dependências — contraste WCAG calculado de verdade, rótulos de formulário, nomes acessíveis, foco visível, alvos de toque, headings, reduced-motion, animação de layout, explosão de paleta, z-index, breakpoints. Reprova via exit code.

◆ onp-ui-ux v0.1.0 — 70 arquivo(s) analisados em 69 ms
✖ 12 erro(s)  ⚠ 18 aviso(s)  ℹ 2 dica(s)   score: 50/100

src/pages/index.html
  ✖ C01 Contraste de texto insuficiente — 2.85:1 (mínimo 4.5:1) — #999 sobre #fff (.hero-text) · linha 8 · WCAG 1.4.3 (AA)
      ↳ Texto normal exige 4.5:1; texto grande (24px+ ou 18.66px+ bold), 3:1.

Instalação e uso

# validar sem instalar nada
npx @onovoprogramador/onp-ui-ux validate src/ --ci

# ou instalar no projeto — a skill é copiada AUTOMATICAMENTE
# para ./.claude/skills/onp-ui-ux no postinstall
npm i -D @onovoprogramador/onp-ui-ux
onp-ui-ux validate src/ --ci          # gate: exit 1 se houver erros
onp-ui-ux validate src/ --md rel.md   # relatório em markdown
onp-ui-ux score src/                  # placar 0–100 por categoria
onp-ui-ux explain C01                 # explica qualquer regra
onp-ui-ux rules                       # catálogo completo (28 regras)

# reinstalar/atualizar a skill manualmente, se precisar
onp-ui-ux install            # ./.claude/skills/onp-ui-ux
onp-ui-ux install --global   # ~/.claude/skills/onp-ui-ux
# opt-out da cópia automática no install: ONP_UIUX_SKIP_INSTALL=1

Requisito: python3 no PATH (macOS/Linux já têm; o motor é stdlib pura).

Por que outra ferramenta de a11y/UI?

| | onp-ui-ux | axe-core | pa11y / Lighthouse | Skills de design (ui-ux-pro-max etc.) | |---|---|---|---|---| | Precisa de navegador | Não | Sim (ou jsdom parcial) | Sim (Chrome) | — | | Analisa CSS puro / TSX / Vue / Svelte (código-fonte) | Sim | Não (só DOM renderizado) | Não | Não | | Contraste WCAG calculado | Sim (estático) | Só com browser real | Sim | Não | | Consistência de design (tokens, paleta, z-index, grade) | Sim | Não | Não | Conselho, sem verificação | | Direção de design para agentes de IA | Sim (skill) | Não | Não | Sim | | Tempo no corpus de benchmark (70 arquivos) | 161 ms | 22.980 ms (jsdom, sem contraste) | minutos | — |

Benchmark reproduzível: npm run bench (gera corpus sintético de 40 páginas + 10 CSS + 20 TSX e mede tudo — metodologia e ressalvas em benchmark/RESULTS.md). O onp-ui-ux é o gate de inner-loop: instantâneo, roda a cada edição. Ferramentas de runtime (axe no browser, Lighthouse) continuam valiosas no CI de integração — elas enxergam o DOM vivo; nós enxergamos o código-fonte, incluindo o que elas não veem.

As 28 regras

A01–A14 acessibilidade estrutural · C01/C04 contraste calculado · F01/F02 foco visível · T01–T03 alvos e legibilidade · M01–M05 motion · D01–D06 consistência/tokens · R01/R02 responsividade. Detalhes: onp-ui-ux explain <ID> ou skills/onp-ui-ux/references/motor.md.

Configuração por projeto

.onp-uiux.json na raiz analisada:

{ "disable": ["D02"], "ignore": ["src/legado/**"], "max_colors": 32 }

A skill (para Claude Code e agentes compatíveis)

skills/onp-ui-ux/ traz o fluxo completo Entender → Dirigir → Construir → Provar → Refinar, com contrato de execução (a entrega só fecha com validate --ci exit 0), 8 paletas com todos os pares de contraste medidos, 6 pares tipográficos com fallback de sistema, checklist por categoria e o motor embarcado (zero instalação — a skill funciona offline).

Licença

MIT — Vitor Manoel · O Novo Programador