specsfy-specialist-reui

ReUI para interfaces de produto

O Specsfy é opinativo: para interfaces React e Tailwind, shadcn/ui fornece as primitives e o ReUI fornece as composições gratuitas. Esta é a base padrão da Promovaweb para CRUDs e telas de produto.

Quando usar

Use para telas React que precisam de componentes ReUI gratuitos. Em Laravel, use quando o frontend React estiver em Inertia, Vite ou outra integração já configurada. Em Next.js, Astro ou React puro, mantenha o roteamento e a hidratação definidos pelo framework hospedeiro.

Fluxo

1. Leia INTERFACE.md, stack, components.json, Tailwind, primitives locais

e telas afetadas. Quando INTERFACE.md não existir, execute $specsfy-setup antes de criar interface.

1. Confirme React 19, Tailwind CSS v4 e shadcn/ui antes de iniciar o registry.

Carregue $specsfy-specialist-shadcn-ui junto desta skill para inicializar ou auditar components.json, aliases, tema e primitives.

1. Leia references/setup.md para preparar o projeto e

escolher a variante Base UI ou Radix já usada.

1. Use references/catalog-free.md para escolher

apenas itens gratuitos e compatíveis com a jornada definida. Leia também references/components-free.md para percorrer todas as famílias públicas antes de criar uma alternativa. Para Laravel com React, leia obrigatoriamente references/shadcn-components.md.

1. Instale o menor conjunto necessário pelo comando npx shadcn@latest add

retornado pelo registry, nunca por cópia manual de URLs ou itens premium.

1. Leia a API e exemplos reais do item antes de adaptar dados, ações, estados,

rotas e permissões do sistema.

1. Divida a interface em componentes React: a página compõe o fluxo; o

domínio concentra grade, formulário, filtros e ações; primitives e composições reutilizáveis ficam nos diretórios já definidos pelo projeto.

1. Atualize INTERFACE.md com cada bloco criado ou alterado: arquivo, origem

shadcn/ui ou ReUI, finalidade, props e eventos, estados, acessibilidade, consumidores e regra de reaproveitamento ou extensão.

1. Valide a tela com os testes, typecheck, lint e build do projeto.

Padrões

• Todo CRUD com interface React e Tailwind usa ReUI como base visual: Data

Grid ou List para consulta, Filters para recorte, Form e campos ReUI para criação e edição, Dialog ou Sheet para ações contextuais e Alert/Badge para retorno e status. Não crie uma alternativa manual quando o catálogo gratuito já atender a interação.

• Em listas com detalhe, o Data Grid torna a linha inteira clicável e acessível

por teclado. Botões, checkboxes e menus internos ficam em uma camada de ação própria, como TableRowAction, para não abrir o detalhe por engano.

• Em criar e editar, use Form em seções: contexto à esquerda e painel de campos

à direita, com duas colunas nos breakpoints largos e uma no mobile.

• Toda tela tem Breadcrumb com o nome da equipe ativa, o módulo e o título

atual. Em Laravel, reutilize o Breadcrumb ou Breadcrumbs já existente no layout e a tipagem usada pelas rotas.

• Registre @reui em components.json com

https://reui.io/r/{style}/{name}.json; itens c-* são gratuitos.

• Preserve a biblioteca de primitives já presente: Base UI e Radix têm APIs

diferentes, embora o estilo Tailwind seja equivalente.

• Adicione os tokens semânticos ReUI de sucesso, informação, aviso, inversão e

ações destrutivas somente quando a tela os usar.

• Em Laravel, mantenha Form Requests, policies e validação no servidor; ReUI

melhora a experiência, não substitui os contratos PHP.

• Em Laravel, complete Vite, Inertia React, React 19, Tailwind v4 e shadcn/ui

antes do registry ReUI. Blade, Livewire e Vue exigem uma migração registrada na spec antes de receber componentes React.

• Use componentes compostos para a tarefa real, com dados reais, estados

vazio, carregando, erro, sucesso, teclado e foco.

• Uma rota não concentra a implementação de grade, formulário, filtros,

diálogo, painel lateral ou cartão reutilizável. Extraia cada parte para um componente React com responsabilidade e API claras.

• Registre em INTERFACE.md todos os componentes gratuitos usados de ReUI e

shadcn/ui, além de cada bloco React próprio, com explicação, caminho, API, estados, consumidores e forma correta de reutilização ou extensão.

Antipadrões

• Usar blocos, ícones ou templates premium; esta skill trabalha apenas com o

catálogo gratuito e não cria REUI_LICENSE_KEY.

• Migrar primitives existentes de Radix para Base UI, ou o contrário, para

instalar um componente.

• Copiar dados demonstrativos, imports ausentes ou APIs inventadas do catálogo.
• Tratar validação visual como validação de autorização ou persistência.
• Criar tabelas, filtros, modais, upload ou formulários CRUD próprios sem

consultar primeiro o catálogo gratuito ReUI.

Validação

• Execute os comandos detectados do projeto e teste a navegação por teclado,

foco, responsividade, tema e estados da tela.

• Confirme que cada item instalado começa com @reui/c- ou é dependência

pública instalada pelo próprio registry.

• Verifique components.json, imports e tokens adicionados antes de encerrar.

Skills relacionadas

• $specsfy-specialist-react governa estado e testes React.
• $specsfy-specialist-tailwind-css governa tokens e utilitários Tailwind.
• $specsfy-specialist-shadcn-ui governa primitives e components.json.
• $specsfy-specialist-laravel governa backend, Inertia, autorização e testes

Laravel.

• $specsfy-specialist-ui-design e $specsfy-specialist-ux-design definem a

experiência antes da escolha de componentes.

Leia references/standards.md para fontes oficiais, tokens e comandos, e as referências de setup e catálogo quando aplicar ReUI.