Instale em um minuto.

Instalar

Poucos passos, tudo na sua máquina.

1. Instale e configure o projeto

   Na raiz do projeto, instale o pacote e escolha a grade. Isso grava o resolvui.config.json.

   $ npm i -D resolvui

   copiar

   $ npx resolvui init

   copiar

2. Ligue o plugin do Vite (JSX, TSX e Vue)

   Para salvar classes Tailwind e templates Vue, o plugin marca onde cada elemento foi escrito. Coloque antes do plugin do framework. Só roda no servidor de desenvolvimento; nada vai para o build de produção. Para CSS e SCSS, pule este passo.

   import resolvui from 'resolvui/vite'
   plugins: [resolvui(), react()]

   copiar

3. Suba a CLI no projeto

   É a ponte entre a extensão e o seu código: sem ela, os ajustes ficam só na página. Ela edita só os arquivos dessa pasta e escuta apenas em loopback (127.0.0.1:3333). Na primeira vez, registra o conector privado do navegador.

   $ npx resolvui serve

   copiar

4. Adicione a extensão

   Instale a extensão no Chrome, abra o seu app e ative o painel pelo ícone. Ele se conecta sozinho à CLI do passo anterior e fica verde: Synced. A partir daí, Save to code grava no arquivo.

   Extensão em breve na Chrome Web Store

Usar na página

Selecione, meça, encaixe.

1. Select

   Clique num elemento. Shift+clique soma mais; arrastar seleciona vários.

2. Precision

   Deslize padding, margem, gap e raio. Os sliders encaixam na grade, ou aperte G.

3. Heatmap e Audit

   H pinta o que está fora da grade. A lista tudo como 9 → 8px, com Fix por linha e Fix all.

Atalhos

Funcionam com o foco na página, fora de campos de texto. ? abre a lista.

Salvar no código

Revise o diff, salve, desfaça se quiser.

A aba Code mostra cada mudança pendente. Save to code grava na regra CSS/SCSS ou na classe Tailwind de origem, por exemplo p-[13px] → p-3. Undo save restaura o último arquivo. Copy for AI copia as mudanças para colar num assistente.

Lint no CI

Valor fora da grade não passa no PR.

# hook de pre-commit
$ npx resolvui lint --staged --fix

# GitHub Actions: anota direto no PR
$ npx resolvui lint --format github

# quanto do projeto está na grade, e quanto mudou no PR
$ npx resolvui score --base-ref origin/main

resolvui consistency conta quantos raios e espaçamentos diferentes você usa e junta os raros.

Regras para IA

Ensine a sua grade ao assistente.

$ npx resolvui rules

Escreve a grade do projeto em AGENTS.md, Cursor ou CLAUDE.md, para o código gerado já nascer no lugar.